javascript - jquery代码更改表单提交的参数

Question

在 PHP 程序的 Web 表单中，表单是常规的 HTML 表单。

现在，表单有 3 个单独的文本框。让它们的 ID/名称分别为 box1、box2 和 box3

我想要发生的是，当表格发布时——

发布以下文本--> box1 + box2+ box3 内容，以逗号分隔。

我希望使用 JQuery 来做到这一点——我查找了 JQuery“提交”函数，但找不到任何直接替换参数的方法——我该如何实现上述内容？

Answer 1

你可以这样做：

$('#yourForm').submit(function(e){

    var form = $(this)

    //Do you validation

    if(isValid){
        var mergedInput = $('<input/>');
        var inputToMerge = ['#box1','#box2','#box3'];
        var valueToMerge = $.map(inputToMerge, function(selector){
            val = $(selector).val()
            $(selector).remove()
            return val;
        })
        mergedInput.val(valueToMerge.join(','));
        mergedInput.prop('name', 'mergedInput')


        mergedInput.appendTo(form);

    }else{
        return false;
    }
})

基本上，它将您的输入合并到一个可通过 php 访问的['mergedInput'].

Answer 2

我认为您可以使用 ajax 轻松做到这一点。请检查提交时提交表单的更改内容

如果您想在没有 ajax 的情况下执行此操作，您可能必须使用隐藏字段。请检查jquery-add-additional-parameters-on-submit-not-ajax

Answer 3

您可以使用 AJAX 来解决您的问题

你的 HTML

<form onsubmit="return sendBoxes()">
  <input type="text" id="box1">
  <input type="text" id="box1">
  <input type="text" id="box1">
  <input type="submit">
</form>

和 JS

function sendBoxes(){
    var values = "'"+$('#box1').val()+"'"+$('#box2').val()+"'"+$('#box3').val()+"'";
    jQuery.ajax({
       url: "ajax_ajax.php",
       data: "boxes="+values,
       cache: false,
       error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("Error.\n" + textStatus + " " + errorThrown);
       }
    });
    return false;
}

Answer 4

HTML

 <input id="box1" type="text" />
 <input id="box2" type="text" />
 <input id="box3" type="text" />
 <input id="submit_button" type="submit" />  

JS

function submit(){
$.ajax({
  type: "POST",
  url: "someurl.php",
  data:{'boxes':$('#box1').val()+","+$('#box2').val()+","+$('#box3').val()}
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});
}
$("#submit_button").click(function(e) {
  submit();
  e.preventDefault();
  return false;
});

这将检查是否单击了提交按钮并发送以逗号分隔的三个框值