Shopify Question posted in
The Shopify help center can be found here.

How do I get input from an HTML form and find data? – Shopify

I have a form like this;

<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 have a json url: “app.employee.com/employeedata”

I need to get fname and lname from html form and search through the json in above url and display it in

so far i have this:

<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>

How to proceed with this? I’m doing this in shopify.

Tags:

4

Answers


  1. 0

    You can start with use of the getElementById method.

    function formSubmit(){
    ...
    var fname=document.getElementById("fname").value; 
    var lname=document.getElementById("lname").value; 
 }
    Login or Signup to reply.
  2. 0

    In your case your serializeArray only will fetch all the form data and will return like 

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

    Then in your back end file you can read the post data.
    If you want to get each element value by your own then you need to use:

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

    Then

    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"
        });
      }
    Login or Signup to reply.
  3. 0

    try this way

    function formSubmit(){
 var fname=$('#fname').val();
 console.log('fname',fname);
 var lname=$('#lname').val();
 console.log('lname',lname);
}
    Login or Signup to reply.
  4. 0

    The success function in your ajax call returns data from the server:

    success

    Type: Function( Anything data, String textStatus, jqXHR jqXHR )
    A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter or the dataFilter callback function, if specified; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.

    Source: jQuery.ajax docs

    So what you can do is: 

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

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

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

</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search