CODEWITHSUNDEEP
javascriptjquerynode.js
Dilip G
Dilip G

Reputation: 529

on form submit I'm unable to get value field

I have a form in which 2 input fields are there,

step1: I will fill 2 input fields on submit I log it to console, but I see there is no value associated to the typed input.

Question: How can I get set value during form submission like this value="your typed value".

ALL I want is typed value after form submit

Here is my code:

$('#sub').click(function(e) {
    e.preventDefault();
    console.log($('form').html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form>
    <p>
        <span>Enter you name</span>
        <input type="text" name="name" id=""/>
    </p>
    <p>
        <span>Enter your city</span>
        <input type="text" name="city" id=""/>
    </p>
    <p>
        <input type="submit"  id="sub" value="SUBMIT ME SIR" />
    </p>
</form>

Upvotes: 0

Views: 90

Answers (6)

Hina
Hina

Reputation: 11

You can use serializeArray() or serialize() function of jQuery to get the data of post in array or querystring format.

$('#sub').click(function(e) {
  e.preventDefault();
  console.log($('form').serializeArray());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form>
  <p>
    <span>Enter you name</span>
    <input type="text" name="nothing" id=""/>
  </p>
  <p>
    <input type="text" name="abc" id=""/>
  </p>
  <p>
    <input type="submit"  id="sub" value="SUBMIT ME SIR" />
  </p>
</form>

Upvotes: 0

Frogger
Frogger

Reputation: 185

If you want to get individual values of the form elements you can use the jQuery val()

var elementValue = $('[name=elementName]').val();
var cityValue = $('[name=city]').val();

If it's for posting your form data to a backend you need to serialize the form data using jQuery serializeArray()

<form id = "customer-data-form">
        <input type="text" name="name" id=""/>
    </p>
    <p>
        <input type="text" name="city" id=""/>
    </p>
    <p>
        <input type="submit"  id="sub" value="SUBMIT ME SIR" />
    </p>
</form>

$('#customer-data-form').serializeArray();

This would return a json object with the form data as key value pairs

[{"name":"name","value":"NameValue"},{"name":"city","value":"CityValue"}]

Upvotes: 0

Purvik Dhorajiya
Purvik Dhorajiya

Reputation: 4870

After changing the value of the input and pressing "SUBMIT ME SIR" it still returns the HTML with the default values.

$('#sub').click(function(e){
e.preventDefault();

$("input,select,textarea").each(function() {
  if($(this).is("[type='checkbox']") || $(this).is("[type='radio']")) {
    if ($(this).prop("checked")) {
      $(this).attr("checked", "checked");
    }
  }else {
    if ($(this).is("select")) {
      $(this).find(":selected").attr("selected", "selected");
    } else {
      $(this).attr("value", $(this).val());
    }
  }
});
  
console.log($('form').html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form>
<p>
  <span>Enter you name</span>
  <input type="text" name="name" id=""/>
</p>
<p>
   <span>Enter your city</span>
  <input type="text" name="city" id=""/>
</p>
<p>
   <span>Select your gender</span>
  <input type="radio" name="gender" value="male"/>Male
  <input type="radio" name="gender" value="female"/>Female
</p>
<p>
   <span>Select your checkbox</span>
  <input type="checkbox" name="check" value="check1"/>check1
  <input type="checkbox" name="check" value="check2"/>check2
</p>
<p>
   <span>Selectbox</span>
  <select>
    <option value="value1">value1</option>
    <option value="value2">value2</option>
    <option value="value3">value3</option>
  </select>
</p>
<p>
  <input type="submit"  id="sub" value="SUBMIT ME SIR" />
</p>
</form>

Would you please try above snippet? I think it's helpful for you.

Upvotes: 1

Daniel Malik
Daniel Malik

Reputation: 1

$("form").on("submit", function(ev) {
console.log("first input " + $(this).eq(0).eq(1).val();
console.log("first input " + $(this).eq(0).eq(1).val();
});

Upvotes: 0

Jai
Jai

Reputation: 74738

Instead of console.log($('form').html()); use this: 

console.log($('form input[type="text"]').val());

As per your last comment:-

As you don't have [value] attribute on the [type=text] elements. If you need to show them in console.log() then you have to set it explicitly like below: 

$('#sub').click(function(e) {
  e.preventDefault();
  var $frm = $('form');
  $frm.find('input[type=text]').each(function(){
    $(this).attr('value', this.value);
  });

  console.log($frm.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <span>Enter you name</span>
    <input type="text" name="name" id="" />
  </p>
  <p>
    <span>Enter your city</span>
    <input type="text" name="city" id="" />
  </p>
  <p>
    <input type="submit" id="sub" value="SUBMIT ME SIR" />
  </p>
</form>

Upvotes: 1

David R
David R

Reputation: 15637

Use the serializeArray() function available in jQuery.

You can achieve this like,

$("form").submit(function( event ) {
  var formVars = $( this ).serializeArray() ;
  console.log(JSON.stringify(formVars));
  event.preventDefault();
});

Here is a working DEMO : http://jsfiddle.net/Lepd897h/1/

Hope this helps!

Upvotes: 1

Related Questions