Question

我有一个页面上有一个表单：

的index.php

 <script>
var userId = $('#userId').val();
 $('#moreFields').click (function()
 {
                    $.ajax(
                    {  
                            type: "POST",  
                            url: "addToForm.php",
                            data: "userId="+userId,
                            success: function(result)
                            { 
                              $('#dialog').html(result);
                            }
                    });
  });
  </script>


  <form id='userInfo' name='userInfo' method='POST' action='#'>
   <input type='text' name='userName' id='userName'>
   <select name='optionChoice' id='optionChoice'>
       <option value='1'>1</option>
       <option value='2'>2</option>
       <option value='3'>3</option>
       <option value='4'>4</option>
   </select>
 <input type='button' id='moreFields' name='moreFields' value='Add Fields'>

  <div id='dialog'></div>

addtoForm.php

 <input type='text' name='job' id='job'>
 <input type='text' name='salary' id='salary'>

基于用户选择的选项。我想添加其他字段。我这样做是通过向addtoForm.php发送ajax调用，其中包含表单字段。这些表单字段显示在对话框中。我的问题是，这些表单字段是否会归因于与index.php页面上的表单相同的表单ID？具有id userInfo的表单是否具有userName，optionChoice，job和salary作为表单中的元素？

Answer 1

您当前的代码不会将其他字段添加到表单中，只是将它们添加到表单外的div＃对话框中。

要将字段添加到表单，可以使用jquery的berfore（）方法：

$('#moreFields').before(result);

但是，由于你的addtoform.php根本不做任何计算，而简单的返回html，整个ajax请求是没有意义的。您也可以使用js添加字段：

$('#moreFields').click (function(){
        $(this).before('<input type=\'text\' name=\'job\' id=\'job\'> <input type=\'text\' name=\'salary\' id=\'salary\'>');
});

使用ajax获取更多表单字段

1 个答案: