从html输入中获取价值

时间:2018-11-11 07:53:51

标签: javascript jquery html

我正在使用js从表单中获取数据。我只想将值从<input type="text" name="postid">放入postid变量中。

这是我的代码。我在需要值的地方添加了评论。 (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>

如何从postid输入到变量中获取值?

3 个答案:

答案 0 :(得分:3)

可能有很多方法。

您可以通过以下方式通过选择元素的名称或ID直接选择它。

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

如果要使用此关键字,请使用以下任何一种方式。

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

答案 1 :(得分:2)

如果我正确理解了这个问题,我认为您只想使用$('#postid').val()来获取postid输入的值。因此整行应如下所示:var postid = $('#postid').val();

答案 2 :(得分:1)

您不需要jQuery。

这里有两种获取该值的方法,一种是使用jQuery(可接受的答案),另一种是使用标准方法document.getElementByIdElement.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>