javascript - 仅从指定表单 jquery 中选择文本字段

Question

我有一个表单，用户可以通过单击下拉列表并选择他想要添加的内容来动态向该表单添加一些文本字段。

如何使用 jquery 仅将这些文本字段发布到 php 脚本

代码:

<form id="sms_frm" name="sms_frm">
<tr>
   <td width="17%"><label>Http URL</label></td>
   <td >
      <div class='input-group'>
         <div class='input-group-addon'>
            <i class='fa  fa-television'></i>
         </div>
         <input type='text' class='form-control'  id='smsurl' name='smsurl' >
      </div>
   </td>
   <td></td>
</tr>
<tr id="element"></tr>
<tr>
   <td>
      <div class='input-group'>
         <select name="sms_sel" class="form-control" style="margin: 10px" id="sms_sel">
            <option value="username">UserName</option>
            <option value="Password">Password</option>
            <option value="APIKEY">APIKEY</option>
            <option value="company">company</option>
            <option value="Originator">Originator</option>
            <option value="ServiceCode">ServiceCode</option>
            <option value="sender">sender</option>
            <option value="ServiceUrl">ServiceUrl</option>
            <option value="ServicePassword">ServicePassword</option>
            <option value="header">header</option>
            <option value="OriginName">OriginName</option>
            <option value="not">Not any of this</option>
         </select>
      </div>
   </td>
   <td><input type='text' class='form-control'  id='vals' style="margin: 10px; float: right" name='vals' >
   </td>
   <td><a href="" class="fa fa-plus add_element" style="margin-top: 20px"></a></td>
</tr>
</tbody></table>

这是将文本字段发送到 php 脚本的 ajax 代码，但它不起作用

 $(document).ready(function(){
 
$("#sms_frm").submit(function(event){
    event.preventDefault(); //prevent default action 
	var arrays=new array();
    var number = $(' input[type=text]');
	$('#sms_frm input[type=text]').each(function () {
		arrays.push(this);
		
	});
	 var form_data = $(this).serialize(); //Encode form elements for submission
    
    $.ajax({
        url : "Save.php?id=sms_api",
        type: 'post',
        data : arrays
    }).done(function(response){ //
        $("#res").html(response);
    });
});
	 
});
</script>     

如果用户选择发件人，例如将附加 id ='sender' 和 name ='sender' 的新文本字段 我不想用 ajax 发送选择的项目 我只想要文本字段

Answer 1

请尝试此代码，这可能有效...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <form id="sms_frm" name="sms_frm">
     <table id="text-table">
        <tr>
            <td width="17%"><label>Http URL</label></td>
            <td>
                <div class='input-group'>
                    <div class='input-group-addon'><i class='fa  fa-television'></i></div>
                    <input type='text' class='form-control'  id='smsurl' name='smsurl' >
                </div>
            </td>
            <td></td>
        </tr>
        <tr id="element"></tr>
        <tr>
            <td>
                <div class='input-group'>
                    <select name="sms_sel" class="form-control" style="margin: 10px" id="sms_sel">
                         <option value="username">UserName</option>
                         <option value="Password">Password</option>
                         <option value="APIKEY">APIKEY</option>
                         <option value="company">company</option>
                         <option value="Originator">Originator</option>
                         <option value="ServiceCode">ServiceCode</option>
                         <option value="sender">sender</option>
                         <option value="ServiceUrl">ServiceUrl</option>
                         <option value="ServicePassword">ServicePassword</option>
                         <option value="header">header</option>
                         <option value="OriginName">OriginName</option>
                         <option value="not">Not any of this</option>
                    </select>
                </div>
            </td>
            <td>
                <input type='text' class='form-control'  id='vals' style="margin: 10px; float: right" name='vals' >
            </td>
            <td>
                <a href="" class="fa fa-plus add_element" style="margin-top: 20px"></a>
            </td>
        </tr>
     </table>
</form>
<script>
     $('#sms_sel').change(function(e) {
        var name=$(this).val();
        var value=$('#vals').val();
        $('<tr><td width="17%"><label>'+name+'</label></td><td><input type="text" sms="sms" class="form-control ss" id="'+name+'"  name="'+name+'" value="'+value+'" ></td><td><a href="" class="fa fa-minus remove_element" id="remove_element" style="margin-top: 20px"></a></td><tr>').insertBefore($(this).closest('tr'));
    });
</script>