select only text fields from specified form jquery

Question

I have a form and user can dynamically add some text-feild to this form by clicking on dropdown and choosing what he wants to add.

How to post only these text feilds to php script using jquery

code:

<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>

this is ajax code to send text fields to php script but it not working

 $(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>

if user choose sender for example new text field with id ='sender' and name ='sender' will be append I don't want to send the select item with ajax I only want text fields

add a data attribute along with the text field, and use it as a jquery selector for fetching all text fields — nivendha
– nivendha, Commented Nov 20, 2017 at 11:04
thank you for help but can u write code because I have tried with all things without result — muhammad ahmed
– muhammad ahmed, Commented Nov 20, 2017 at 11:07

Gyandeep Sharma · Accepted Answer · 2017-11-20 11:17:01Z

Please try this code this may work...

<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>

thank you for reply but my code is working perfect the only thing which I want to make is get the added text field value to send it to php code

Rudraksh Pathak · Accepted Answer · 2017-11-20 11:08:36Z

0

In your jQuery, select only text fields. You can do that in multiple ways -

By directly accessing the tag $('input[text]');
By assigning a class to every text field and then accessing based on that class like `$('.some-class');
By assigning a data-* rule and then accessing it like $('input').data(YOUR_RULE);

After selecting your text fields, submit your form.

answered Nov 20, 2017 at 11:08

Rudraksh Pathak

9188 silver badges21 bronze badges

Collectives™ on Stack Overflow

select only text fields from specified form jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related