get value from html input

Question

I am using js to fetch data from a form. I want only to get the value from <input type="text" name="postid"> into the postid variable.

Here is my code. I have added a comment where I want the value. (var postid= ? //Here).

$('#comment_form_sub').on('submit', function(event){
  event.preventDefault();
  var form_data = $(this).serialize();
  //var postid= ? //Here
  console.log(form_data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="comment-form inline-items" method="POST" id="comment_form_sub">
  <input type="text" name="postid" id="postid" value="23">
  <input type="text" name="comment_content" id="comment_content" class="form-control input-sm" placeholder="Press enter to post comment">
  <input type="submit" style="display: none;" />
</form>

How can I get the value from the postid input into my variable?

what does it matter? just take what you need from the serve-side code — vsync
– vsync, Commented Nov 11, 2018 at 7:56

Hamza Haider · Accepted Answer · 2018-11-27 10:08:55Z

3

There are probably many ways.

You can do it by the following way by selecting the element directly by its name or id.

var postid = $("input[name=postid]").val() Or
var postid = $("input[id=postid]").val() Or
var postid = $('#postid').val();

If you want to get by this keyword then use any of the following ways.

var postid = $(this).children("#postid").val() Or
var postid = $(this).children("input[name=postid]").val() Or
var postid = $(this).children("input[id=postid]").val() Or
var postid = $(this).find("#postid").val() Or
var postid = $(this).find("input[name=postid]").val() Or
var postid = $(this).find("input[id=postid]").val()

edited Nov 27, 2018 at 10:08

answered Nov 11, 2018 at 8:04

Hamza Haider

7386 silver badges22 bronze badges

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

4 Comments

Smollet777 Over a year ago

It's better to hook up to element directly. Especially if id is already provided.

Hamza Haider Over a year ago

am i not hooking up to element directly?

Siddhant Singh Over a year ago

By using on submit event.preventDefault; not working <form class="comment-form inline-items" method="POST" onsubmit="form_submit('12')"> <input type="text" name="postid" id="postid" value="23"> </form> <script> function form_submit(postid) { event.preventDefault(); var form_data = $(this).serialize(); } </script>

Hamza Haider Over a year ago

@SiddhantSingh means you are unable to sumit form right? use $(this).submit(); at the end

Snake14 · Accepted Answer · 2018-11-11 08:01:04Z

2

If I understand the question correctly, I think you just want to use $('#postid').val() to get the value of the postid input. So the whole line should look like this: var postid = $('#postid').val();

answered Nov 11, 2018 at 8:01

Snake14

4162 silver badges7 bronze badges

Comments

lucascaro · Accepted Answer · 2018-11-11 09:08:11Z

You don't need jQuery for this.

Here's two ways of getting that value, one with jQuery (accepted answer) and the other with the standard methods document.getElementById and Element.addEventListener:

// The jQuery way:
$('#comment_form_sub').on('submit', function(event) {
  event.preventDefault();
  const postId = $('#postid').val();
  console.log(postId);
});

// You don't need jQuery:
document.getElementById('comment_form_sub').addEventListener('submit', (event) => {
  event.preventDefault();
  const postId = document.getElementById('postid').value;
  console.log(postId); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="comment-form inline-items" method="POST" id="comment_form_sub">
  <input type="text" name="postid" id="postid" value="23">
  <input type="text" name="comment_content" id="comment_content" class="form-control input-sm" placeholder="Press enter to post comment">
  <input type="submit" style="display: none;" />
</form>

Collectives™ on Stack Overflow

get value from html input

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related