What is the process of retrieving user input from an HTML form and locating specific data within it?

Question

What is the process of retrieving user input from an HTML form and locating specific data within it?

Here is the structure of my form:

<div  id="employeeinfo" style="padding:40px" class="employee-body">
            <form id="employeeform"  title="" method="post">

            <label class="title">First Name</label>
            <input type="text" id="fname" name="first_name" >

            <label class="title">Last Name</label>
            <input type="text" id="lname" name="last_name" >

            <input type="submit" id="submitButton" onclick="formSubmit()" name="submitButton" value="Submit">

            </form>
        </div>

I am trying to retrieve data from a JSON URL at "app.employee.com/employeedata"

The goal is to extract the first and last names entered in the form above, search for them within the JSON data retrieved from the specified URL, and display the results.

This is what I have accomplished so far:

<script type='text/javascript'>
          function formSubmit(){

            var formData = JSON.stringify($("#employeeform").serializeArray());

            $.ajax({
              type: "POST",
              url: "serverUrl",
              data: formData,
              success: function(){},
              dataType: "json",
              contentType : "application/json"
            });
          }

        </script>

Could someone advise me on how to proceed with this? This is being implemented in Shopify.

html json ajax

Answer 1

Answer №1

To begin, utilize the getElementById function.

function submitForm(){
    ...
    var firstName=document.getElementById("firstName").value; 
    var lastName=document.getElementById("lastName").value; 
 }

Answer 2

To begin, utilize the getElementById function.

function submitForm(){
    ...
    var firstName=document.getElementById("firstName").value; 
    var lastName=document.getElementById("lastName").value; 
 }

Answer 3

Answer №2

give this method a shot

function submitForm(){
 var firstName=$('#fname').val();
 console.log('First Name:',firstName);
 var lastName=$('#lname').val();
 console.log('Last Name:',lastName);
}

Answer 4

give this method a shot

function submitForm(){
 var firstName=$('#fname').val();
 console.log('First Name:',firstName);
 var lastName=$('#lname').val();
 console.log('Last Name:',lastName);
}

Answer 5

Answer №3

The successful function within the XMLHttpRequest request retrieves data from the server:

success

Type: Function( Any data, String statusText, jqXHR obj ) This function is executed when the request is successful. It takes three arguments: The data returned by the server, formatted based on the dataType parameter or dataFilter callback function if specified; a string describing the status; and the jqXHR object. Starting from jQuery 1.5, multiple functions can be added to the success setting in an array format, executing them sequentially. This is considered an Ajax Event.

Source: jQuery.ajax documentation

Here's what you need to do:

<script type='text/javascript'>
  function submitForm(){

    var formData = JSON.stringify($("#employeeform").serializeArray());

    $.ajax({
      type: "POST",
      url: "serverUrl",
      data: formData,
      success: function(responseData){
          // responseData holds the json response from the server. You can retrieve the firstname and lastname fields from this data.
      },
      dataType: "json",
      contentType : "application/json"
    });
  }

</script>

Answer 6

The successful function within the XMLHttpRequest request retrieves data from the server:

success

Type: Function( Any data, String statusText, jqXHR obj ) This function is executed when the request is successful. It takes three arguments: The data returned by the server, formatted based on the dataType parameter or dataFilter callback function if specified; a string describing the status; and the jqXHR object. Starting from jQuery 1.5, multiple functions can be added to the success setting in an array format, executing them sequentially. This is considered an Ajax Event.

Source: jQuery.ajax documentation

Here's what you need to do:

<script type='text/javascript'>
  function submitForm(){

    var formData = JSON.stringify($("#employeeform").serializeArray());

    $.ajax({
      type: "POST",
      url: "serverUrl",
      data: formData,
      success: function(responseData){
          // responseData holds the json response from the server. You can retrieve the firstname and lastname fields from this data.
      },
      dataType: "json",
      contentType : "application/json"
    });
  }

</script>

Answer 7

Answer №4

If you use the serializeArray function, it will gather all the form data and return an array like this:

[
  {
    name: "fname",
    value: "zydexo"
  },
  {
    name: "lname",
    value: "test"
  }
]

To access each element value individually in your backend file, you can do the following:

var fname=document.getElementById("fname").value;
or
var fname=$('#fname').val();

Then, you can submit the form using AJAX like this:

function formSubmit(){
        var fname= $("#fname").val();
        var lname= $("#lname").val();

        $.ajax({
          type: "POST",
          url: "serverUrl",
          data: {fname:fname,lname:lname},
          success: function(data){
           //
          },
          dataType: "json",
          contentType : "application/json"
        });
      }

Answer 8

If you use the serializeArray function, it will gather all the form data and return an array like this:

[
  {
    name: "fname",
    value: "zydexo"
  },
  {
    name: "lname",
    value: "test"
  }
]

To access each element value individually in your backend file, you can do the following:

var fname=document.getElementById("fname").value;
or
var fname=$('#fname').val();

Then, you can submit the form using AJAX like this:

function formSubmit(){
        var fname= $("#fname").val();
        var lname= $("#lname").val();

        $.ajax({
          type: "POST",
          url: "serverUrl",
          data: {fname:fname,lname:lname},
          success: function(data){
           //
          },
          dataType: "json",
          contentType : "application/json"
        });
      }

What is the process of retrieving user input from an HTML form and locating specific data within it?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Instructions for concealing and revealing a label and its corresponding field before and after making a choice from a dropdown menu

Unleashing the power of specific dates with the angularJS datepicker directive

Material-UI - Switching thumb styles in a range slider

Looking for guidance on utilizing pushState and handling onpopstate events?

Unpacking a GZip Stream retrieved from an HTTPClient's Response

Converting jQuery ajax success response data into a PHP variable: A step-by-step guide

Parsing JSON data in Java may require skipping over certain characters before successfully parsing the data

Tips for correctly positioning CSS elements:

Go back to the top by clicking on the image

What is the best way to have a text field automatically insert a hyphen after specific numbers?

Avoid including line breaks when using JSON_ENCODE to prevent any issues in the

Issue Alert: Inconsistencies with Google Scripts spreadsheets

Encountering an inexplicable "undefined" error in HTML after receiving an

Is half of your important information disappearing during JSON conversion?

What causes the presence of invalid characters in this JSON data?

Create a script that ensures my website can be set as the homepage on any internet browser

I am hoping to transmit an array from a function using Ajax and JSON

Creating a universal header for all webpages in Angular JS by dynamically adding elements using JavaScript DOM manipulation techniques

Unveiling the Mystery: Java Tips for Capturing the Chosen Value from a DropdownChoice in Apache W

Conceal the element if the offspring is devoid of content