如何從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表單獲取輸入並查找數據？

回答

相關問題