[英]How can I get the value of an input field in javascript without submitting a form?
[英]How can I get the value of a hidden input field when submitting a form?
我的页面上有多种形式。 每个表单都有两个提交按钮和一个包含ID的隐藏输入字段。
当用户单击提交按钮之一时,我需要将单击的提交按钮的值与隐藏输入字段的值一起发送给表单提交。
这是我的页面外观的示例:
<form id="options">
<input type="hidden" value="104">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
<form id="options">
<input type="hidden" value="44">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
<form id="options">
<input type="hidden" value="39">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
<script>
$(document).on("submit", "#options", function(e) {
e.preventDefault();
console.log(this.submitted) // gets the value of the submit button
});
</script>
目前,我只能通过表单提交发送单击提交按钮的值,而不能发送隐藏输入字段的值。 虽然我知道我可以使用onclick="this.form.submited=this.previousElementSibling.value;"
要获取ID,这意味着我无法获取所单击的提交按钮的值。
您可以使用val()
:
var value = $('input[name="input-name"]').val();
编辑:如果你想使用一个以上的输入具有相同name
,使用它像这样:
$('input[name="input-name"]').forEach(function($in) {
var value = $in.val();
});
在隐藏的输入框中输入一个ID,例如hiddenInput。 要访问该值,可以使用$(.hiddenInput).val();
。 要访问服务器端的值,可以使用req.query.id()
访问它
使用$(this)
获取当前表单的隐藏输入,并且不能对多个元素使用相同的id
,请将id
更改为class="options"
。
var val = $(this).find('input:hidden').val());
$(document).on("submit", ".options", function(e) { e.preventDefault(); console.log($(this).find('input:hidden').val()) // gets the value of the submit button });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="options"> <input type="hidden" value="104"> <input type="submit" onclick="this.form.submited=this.value;" value="Delete"> <input type="submit" onclick="this.form.submited=this.value;" value="Reply"> </form> <form class="options"> <input type="hidden" value="44"> <input type="submit" onclick="this.form.submited=this.value;" value="Delete"> <input type="submit" onclick="this.form.submited=this.value;" value="Reply"> </form> <form class="options"> <input type="hidden" value="39"> <input type="submit" onclick="this.form.submited=this.value;" value="Delete"> <input type="submit" onclick="this.form.submited=this.value;" value="Reply"> </form>
尝试这个:
$(document).ready(function() { $("input[type='submit']").click(function(event) { event.preventDefault(); var id = $(this).parent().find("input[name='id']").val(); var action = $(this).data("action"); console.log("action: " + action + ", id: " + id); }); });
<html> <body> <form id="options1"> <input type="hidden" name="id" value="104"> <input type="submit" data-action="delete" value="Delete"> <input type="submit" data-action="reply" value="Reply"> </form> <form id="options2"> <input type="hidden" name="id" value="44"> <input type="submit" data-action="delete" value="Delete"> <input type="submit" data-action="reply" value="Reply"> </form> <form id="options3"> <input type="hidden" name="id" value="39"> <input type="submit" data-action="delete" value="Delete"> <input type="submit" data-action="reply" value="Reply"> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </body> </html>
只需简单的find
获取所需的数据。
$(document).on("submit", "form", function(e) { alert($(this).find('input[type="hidden"]').val()) e.preventDefault(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form id="options"> <input type="hidden" value="104"> <input type="submit" onclick="this.form.submited=this.value;" value="Delete"> <input type="submit" onclick="this.form.submited=this.value;" value="Reply"> </form> <form id="options"> <input type="hidden" value="44"> <input type="submit" onclick="this.form.submited=this.value;" value="Delete"> <input type="submit" onclick="this.form.submited=this.value;" value="Reply"> </form> <form id="options"> <input type="hidden" value="39"> <input type="submit" onclick="this.form.submited=this.value;" value="Delete"> <input type="submit" onclick="this.form.submited=this.value;" value="Reply"> </form>
您需要的是:
<form>
<input type="hidden" name="id" value="104">
<input type="submit" name="action" value="Delete">
<input type="submit" name="action" value="Reply">
</form>
单击“ Reply
按钮将产生:
id = 104&action =回复
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.