Javascript 将提交按钮替换为值
我继承了一个网页，其中包含一些HTML，如下所示：Javascript 将提交按钮替换为值,javascript,Javascript,我继承了一个网页，其中包含一些HTML，如下所示： <input type="submit" value="1">Submit 1</input> <input type="submit" value="2">Submit 2</input> <input type="submit" value="3">Submit 3</input> 我需要更改此代码，以便可以使用以下代码 <input type="button"
<input type="submit" value="1">Submit 1</input>
<input type="submit" value="2">Submit 2</input>
<input type="submit" value="3">Submit 3</input>
<input type="button" onclick="onSubmitClick(1);">Submit 1</input>
<input type="button" onclick="onSubmitClick(2);">Submit 2</input>
<input type="button" onclick="onSubmitClick(3);">Submit 3</input>
<script type="text/javascript">
function onSubmitClick(val) {
// do something with val
$('#myForm').submit();
}
</script>
我的问题是，对于第一个代码，服务器收到了值，即1、2、3。在我要更改的代码中，1、2和3不再绑定到我的服务器代码。我该如何补救 理想情况下：使用常规提交按钮，并使用JavaScript逐步增强 如果您需要在JavaScript中执行异步操作，则可能不需要这样做，在这种情况下：将值存储在表单中的隐藏输入中 理想情况下，在执行此操作时，请继续使用常规提交按钮 例如，由于您已经在使用jQuery：
<form id="myForm">
<button value="1">Submit 1</button>
<button value="2">Submit 2</button>
<button value="3">Submit 3</button>
</form>
<script>
$f = $("#myForm");
$f.find("button[type=submit]").on("click", remember_button);
$f.on("submit", on_submit_click);
function remember_button() {
var val = $(this).val();
var $remembered_button = $f.find(".remembered_button");
if (!$remembered_button.length) {
$remembered_button = $("<input>")
.attr("type", "hidden")
.attr("name", "button_value")
.addClass("remembered_button")
.appendTo($f);
}
$remembered_button.val(val);
}
on_submit_click(event) {
event.preventDefault();
var val = $f.find(".remembered_button").val();
$f.submit();
}
</script>
您需要向表单中添加一个值，然后可以设置该值，并将其发送到PHP服务器：
<input type="button" onclick="onSubmitClick(1);">Submit 1</input>
<input type="button" onclick="onSubmitClick(2);">Submit 2</input>
<input type="hidden" name="submit" id="submitid">
<script type="text/javascript">
function onSubmitClick(val) {
// do something with val
$('#submitid').val(val)
$('#myForm').submit();
}
</script>
<script type="text/javascript">
function onSubmitClick(val) {
// do something with val
$('#myForm').submit();
}
</script>
如前所述，如果您已经在使用jQuery，那么还有另一种选择 您可以编写自定义事件，使用val，然后将其与表单数据合并，然后再使用请求手动过帐 假设使用以下HTML：
<form id="myForm" action="http://YourTargetUrl" method="post" accept-charset="utf-8">
<input name="ExampleFormData" type="text">
<input data-type="submit" type="button" value="1">Submit 1
<input data-type="submit" type="button" value="2">Submit 2
<input data-type="submit" type="button" value="3">Submit 3
</form>
$.ajax({
type: 'POST',
url: $form[0].action,
data: $.param(data),
success: function() {
location.reload();
}
});
$('[data-type=submit]').on('click', function(e, val) {
var $form = $('#myForm');
var val = this.value;
// do somethign with val
var data = $form.serializeArray();
// add val to the post data, using the variable name on the server as "name" for the serialize on the server side to map it to the correct variable.
data.push({
name: "theNameOfYourVariableOnServerReceivingVal",
value: val
});
// Manually execute a post request to the server
// Using the form's action attribute, containing the target URL to post to
// and using $.param to serialize the data array before posting
$.ajax({
type: 'POST',
url: $form[0].action,
data: $.param(data)
});
});