从指定的表单 jquery 中仅选择文本字段答案

【问题标题】：select only text fields from specified form jquery从指定的表单 jquery 中仅选择文本字段
【发布时间】：2017-11-20 19:17:01
【问题描述】：

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

如何使用 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 发送选择项我只想要文本字段

【问题讨论】：

添加您的js 代码
在文本字段中添加数据属性，并将其用作获取所有文本字段的 jquery 选择器
谢谢你的帮助，但你能写代码吗，因为我已经尝试了所有没有结果的事情

标签： javascript php jquery html

【解决方案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>

【讨论】：

感谢您的回复，但我的代码运行完美我唯一想做的就是获取添加的文本字段值以将其发送到 php 代码

【解决方案2】：

在您的 jQuery 中，仅选择文本字段。您可以通过多种方式做到这一点 -

通过直接访问标签$('input[text]');
通过为每个文本字段分配一个类，然后基于该类进行访问，例如 `$('.some-class');
通过分配data-* 规则，然后像$('input').data(YOUR_RULE) 一样访问它；

选择文本字段后，提交表单。

【讨论】：