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

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

It's better to hook up to element directly. Especially if id is already provided.
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>
@SiddhantSingh means you are unable to sumit form right? use $(this).submit(); at the end

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

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();

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

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Related