HTML表單：發送數據到javascript函數

我有一個html頁面。它有很多形式。HTML表單：發送數據到javascript函數

我想要一個泛型函數，在提交任何表單後，將獲取該表單的所有輸入，並將其作爲JSON發送到另一個服務器。

據我瞭解，我想是這樣的：

<form enctype="application/json" name="createStudentForm" onsubmit="sendForm()"> 
    Student ID (must be 3 digit number): 
    <input type="text" name="student_id"><br> 
    Nickname: 
    <input type="text" name="student_nickname"><br> 
    <input type="submit"> 
</form>

及更高版本：

<script> 
    function sendForm(){ 
     console.log('sent form'); 
    } 
</script>

我的問題是：1）爲什麼我的控制檯無法登錄這個當我提交？當我使用chrome測試時，在發送提交和b）後，控制檯是空的，我如何從sendForm（）內部訪問表單的輸入？我是否需要直接引用該表單，或者有什麼方法可以在我調用它時將數據傳遞給sendForm（）？

來源

2017-02-03 Daniel Paczuski Bak

您需要停止窗體實際提交，因爲當它提交時，它將刷新頁面並清除控制檯。選擇保留控制檯日誌頁面刷新或將'return false;'添加到'sendForm（）'。 –

@GeorgeJempty - 我聽說'console.log'的一些實現是異步的，從來沒有真正體驗過我的自我。無論如何，我不認爲這是相關的。 –

如果可以，請使用jQuery：'https：// api.jquery.com/serializeArray /' –

跟進什麼邁克爾說，用一點點jquery你可以很容易地做這個工作。

<html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
    function sendForm(form){ 
    console.log('sent form: ' + $(form).serialize()); 
    return false; 
    } 
</script> 
<body> 
<form enctype="application/json" name="createStudentForm" onsubmit="return sendForm(this)"> 
    Student ID (must be 3 digit number): 
    <input type="text" name="student_id"><br> 
    Nickname: 
    <input type="text" name="student_nickname"><br> 
    <input type="submit"> 
</form> 
</body> 
</html>

來源

2017-02-03 21:24:51 mcallahan

你可以試試這個腳本：

$(function() { 
 
    var formHandler = function (e) { 
 
     e.preventDefault(); // Avoid form submit 
 
     var data = $(this).serializeArray(); 
 
     data = JSON.stringify(data); // To JSON 
 
     console.log(data); 
 
    }; 
 
    
 
    $('form').submit(formHandler); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Form 1 
 
<form> 
 
Field 1: <input name="field1"> 
 
Field 2: <input name="field2"> 
 
Field 3: <select name="field3"> 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
      <option value="3">3</option> 
 
     </select> 
 
<input type="submit"> 
 
</form> 
 

 
<hr> 
 

 
Form 2 
 
<form> 
 
Field 1: <input name="field1"> 
 
Field 2: <input name="field2"> 
 
Field 3: <select name="field3"> 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
      <option value="3">3</option> 
 
     </select> 
 
<input type="submit"> 
 
</form> 
 

 
<hr> 
 

 
Form 3 
 
<form> 
 
Field 1: <input name="field1"> 
 
Field 2: <input name="field2"> 
 
Field 3: <select name="field3"> 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
      <option value="3">3</option> 
 
     </select> 
 
<input type="submit"> 
 
</form>

我們附上提交事件到你的頁面的每個表單和捕獲數據。如果你將有很多的形式在您的網站，嘗試將抓住正確的事件給body（事件傳播）：

$('body').on('submit', 'form', formHandler);

來源

2017-02-03 21:01:51 nikoskip

HTML表單：發送數據到javascript函數

回答

相關問題