Question

我的页面上有以下html。

<form id="job" method="POST" action="#">
    <table style="text-align: left; width: 1024px; height: 371px;"
               border="1" cellpadding="2" cellspacing="2">
    <tbody>
    <tr>
        <td style="vertical-align: top;">
            <span style="font-weight: bold;">Required:</span>
            <br>
            Enter your account number:
            <input name="account" id="job_data" type="text">
            <br>
            Pull from Core?
            <input id="pull" name="pull" checked="checked" type="checkbox">
            <br>
            Force update if data exists in coregrapher cache?
            <input id="force" name="force" type="checkbox">
            <br>
            <br>
        </td>
        <td style="vertical-align: top;"><br>
            v2.0
        </td>
    </tr>
    </tbody>
    </table>
    <input type="submit" value="Send">
</form>

点击提交按钮，我想通过websocket发送数据。

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('form#job').submit(function(event) {
            var nameValue = document.getElementById("job").value;
            socket.emit('job_submit', {data: $('#job').val()});
            return false;
        });
    });
</script>

我可以使用socket.emit('job_submit', {data: $('#job_data').val()});获取job_data的值，但是如果我尝试使用#job，我会得到{＆＃39;数据＆＃39;：＆＃39;＆＃39;}无论如何什么在任何领域。

我希望在这种情况下，job_data，pull和force id被提交。

Answer 1

您需要 formData 对象，以便获取集合中的所有名称/值对。

以下是一个例子：

document.querySelector("input[type='button']").addEventListener("click", function(){

  // Create a test FormData object
  var formData = new FormData(document.querySelector("form"));
  
  // You can even add to the object outside of the form
  formData.append('key1', 'value1');
  formData.append('key2', 'value2');

  // Iterate the key/value pairs
  for(var pair of formData.entries()) {
    console.log(pair[0]+ ', '+ pair[1]); 
  }
});

<form action="#" method="get">
  <input name="firstName">
  <select name="favoriteColor">
    <option>red</option>
    <option>white</option>
    <option>blue</option>    
  </select>
  <input type="checkbox" name="agree" value="agree">I Agree
</form>

<input type="button" value="Get formData">

或者，使用JQuery，您可以使用 .serialize() 方法创建名称/值对的查询字符串：

$("input[type='button']").on("click", function(){

  // Create a test FormData object
  var formData = $("form").serialize();
  
  console.log(formData); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="get">
  <input name="firstName">
  <select name="favoriteColor">
    <option>red</option>
    <option>white</option>
    <option>blue</option>    
  </select>
  <input type="checkbox" name="agree" value="agree">I Agree
</form>

<input type="button" value="Get formData">

Answer 2

您可以使用Click事件中的Jquery表单.serialize（）命令。下面的代码段。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="job" method="POST" action="#">
    <table style="text-align: left; width: 1024px; height: 371px;"
               border="1" cellpadding="2" cellspacing="2">
    <tbody>
    <tr>
        <td style="vertical-align: top;">
            <span style="font-weight: bold;">Required:</span>
            <br>
            Enter your account number:
            <input name="account" id="job_data" type="text">
            <br>
            Pull from Core?
            <input id="pull" name="pull" checked="checked" type="checkbox">
            <br>
            Force update if data exists in coregrapher cache?
            <input id="force" name="force" type="checkbox">
            <br>
            <br>
        </td>
        <td style="vertical-align: top;"><br>
            v2.0
        </td>
    </tr>
    </tbody>
    </table>
    <input type="submit" value="Send">
</form>
And on click of the submit button I want to send the data through a websocket.

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('form#job').submit(function(event) {
            var nameValue = JSON.stringify($(event.target).serialize());
            //socket.emit('job_submit', {data: $('#job').val()});
            alert(nameValue);
            return false;
        });
    });
</script>

＆＃13;

从整个表单而不是单个元素引用数据

2 个答案: