如何从HTML表单获取输入并查找数据？

我有这样的表单;如何从HTML表单获取输入并查找数据？

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

我有一个JSON URL： “app.employee.com/employeedata”

我需要得到FNAME和LNAME从HTML表单，并通过上述网址的JSON搜索和

显示它

到目前为止，我有这样的：

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

如何执行该方法？我在shopify中这样做。

来源

2017-05-30 zydexo

您可以从使用getElementById方法开始。

function formSubmit(){ 
    ... 
    var fname=document.getElementById("fname").value; 
    var lname=document.getElementById("lname").value; 
}

来源

2017-05-30 06:34:52 kropla

在你的情况下，你只serializeArray将获取的所有表单数据，并返回像

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

然后在你的后端文件，你可以阅读后的数据。如果你想自己得到每个元素的值，那么你需要使用：

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

然后

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" 
     }); 
     }

来源

2017-05-30 06:42:48 lalithkumar

希望这将帮助你很多？ @zydexo – lalithkumar

如果合适，请点击勾号接受答案。 @zydexo – lalithkumar

尝试在ajax调用返回这样

function formSubmit(){ 
var fname=$('#fname').val(); 
console.log('fname',fname); 
var lname=$('#lname').val(); 
console.log('lname',lname); 
}

来源

2017-05-30 06:43:53 kumbhanibhavesh

的success function来自服务器的数据：

如果请求成功被称为功能（任何数据，字符串textStatus，jqXHR jqXHR）的函数：
成功

类型。该函数传递三个参数：从服务器返回的数据，根据dataType参数或dataFilter回调函数格式化（如果指定）;描述状态的字符串;和jqXHR（在jQuery 1.4.x，XMLHttpRequest）对象中。从jQuery 1.5开始，成功设置可以接受一系列函数。每个函数都会依次调用。这是一个Ajax事件。

来源：jQuery.ajax docs

所以你可以做的是：

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

来源

2017-05-30 06:47:47

如何从HTML表单获取输入并查找数据？

回答

相关问题