Question

如何从表单的输入字段中获取值。想法是稍后将此值发送到服务器并显示与其关联的其他值。

<form action="" method="post" autocomplete="off" id="my_form">
   <div class="txtb">{{form.date.label}} {{form.date}}</div>
   <div class="txtb"> <p class="txt"></p></div>
<input type="submit" value="send" class="btn" id="btn">

在输入字段中，我分配了一个class =“ pole”并尝试打印值。

$('.pole').on('input', function() {
  var val = $('.pole').val();
  $('.txt').html(val);
$('.txt').val(val);
});

但这不起作用，该怎么办？

Answer 1

您需要使用$(this)而不是$('.pole')来使用class = pole来获取当前输入的实例，请参见下面的代码

$('.pole').on('input', function() {
  var val = $(this).val();
  $('.txt').text(val);
});

Answer 2

要提交值，您需要在html中提及输入字段。看看this demo

<form id="myForm" action="/action_page.php">
  First name: <input type="text" id="fname" value="Donald"><br>
  Last name: <input type="text" id="lname" value="Duck"><br>
  <input type="button" value="Submit" onclick="submitForm()">
<p id="demo"></p>
</form> 

function submitForm() {
  var firstName = document.getElementById("fname").value;
  var lastName = document.getElementById("lname").value;
  document.getElementById("demo").innerHTML = lastName;
}

Answer 3

我认为您的输入是该段落的同级。试试这个：

$('.pole').on('keyup', function() {
   $(this).parent().find(".txt").html($(this).val());
});

Answer 4

将$('.pole').val()更改为$(this).val()，您应该尝试像

$('.pole').on('input', function() {
  var val = $(this).val();
  $('.txt').html(val);
  $('.txt').val(val);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>


<input type="text" class="pole" placeholder="type here">
<p class="txt"></p>

Answer 5

找不到class txt和pole的dom，但是您可以尝试使用此代码

$('.pole').on('input', function() {
  // changed here
  var val = $(this).val();
  $('.txt').html(val);
  $('.txt').val(val);
});

从输入领域获得价值

5 个答案: