php how to get the type of form fields using jquery?

Question

I want get the name , value and type of the fields in the form. I am using the following code which helped me to get the name and value but type = "text" always even for checkboxs and radio button too. i want get the exact types of the fields whether it is checkbox, radio or text. here is the code

 <form action="">
   <h1> Try Form</h1>
  First name: <input type="text" name="FirstName" value="khan"><br>
  Last name: <input type="text" name="LastName" value="wazir"><br>
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked="checked"> I have a car<br>
   <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other 
</form>
<button>Serialize form values</button>
<div id="results"></div>

Here is the script

    <script>
$(document).ready(function(){
    $("button").click(function(){
        var x = $("form").serializeArray();
        $.each(x, function(i, field){
            $("#results").append(field.name + ":" + field.value + " :" + $( "input" ).attr( "type" ) + " ");
        });
    });
});
</script>

Possible duplicate of How to get input type using jquery?

Sergii K
– Sergii K

2017-07-26 06:56:05 +00:00
Commented Jul 26, 2017 at 6:56 — Sergii K
– Sergii K, Commented Jul 26, 2017 at 6:56
yes i have gone through this question but didn't help me

Bashir ahmad
– Bashir ahmad

2017-07-26 07:05:46 +00:00
Commented Jul 26, 2017 at 7:05 — Bashir ahmad
– Bashir ahmad, Commented Jul 26, 2017 at 7:05

Matx132 · Accepted Answer · 2017-07-26 06:56:12Z

2

change

$( "input" ).attr( "type" )

to

$( "input[name='" + field.name + "']" ).attr( "type" )

you must pick specify input to get type correct

answered Jul 26, 2017 at 6:56

Matx132

1638 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Milan Chheda · Accepted Answer · 2017-07-26 07:00:53Z

You can loop through input element and get prop('type') to get the input type:

prop() is a JQuery function that gives you the properties of an element:

$(document).ready(function() {
  $("button").click(function() {
    var x = $("form").serializeArray();
    $('input').each(function() {
      $("#results").append($(this).val() + " :" + $(this).prop('type') + "<br />");
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <h1> Try Form</h1>
  First name: <input type="text" name="FirstName" value="khan"><br> Last name: <input type="text" name="LastName" value="wazir"><br>
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked="checked"> I have a car<br>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>
<button>Serialize form values</button>
<div id="results"></div>

Ananth Cool · Accepted Answer · 2017-07-26 07:15:28Z

1

Check this

$(document).ready(function(){
    $("button").click(function(){
        var x = $("form").find("input");
        $.each(x, function(i, field){
            $("#results").append(field.name + ":" + field.value + " :" + field.type);
        });
    });
});

Demo: fiddle

answered Jul 26, 2017 at 7:15

Ananth Cool

1358 bronze badges

3 Comments

Ananth Cool Over a year ago

Did you add jquery plugin in your page? Also check 'x' value in your code.

Bashir ahmad Over a year ago

look at my script I have used this. field.type = undefined.

Ananth Cool Over a year ago

Did you check the fiddle?

Collectives™ on Stack Overflow

php how to get the type of form fields using jquery?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related