jquery代码更改表单提交的参数答案

【问题标题】：jquery code to change the parameters submitted by a formjquery代码更改表单提交的参数
【发布时间】：2013-05-25 01:17:33
【问题描述】：

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

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

我想要发生的事情是，当表单发布时 --

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

我希望使用 JQuery 来执行此操作 - 我查找了 JQuery “提交”函数，但找不到任何直接替换参数的方法 - 我该如何实现上述内容？

【问题讨论】：

你可以使用jQuery.ajax来做到这一点，例如：data:{'boxes':$('#box1').val()+","+$('#box2').val()+","+$('#box3').val()}
@mgraph 好的-一旦我将组合数据放入新变量中，现在如何提交表单——用新的单个参数（具有组合值）替换 3 个框参数？如果您可以发布一个显示此内容的 JS sn-p，那将非常有帮助。也不要发表评论，而是将其作为答案发布？谢谢，阿文德

标签： javascript jquery forms

【解决方案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']。

【讨论】：

【解决方案2】：

我认为你可以使用 ajax 轻松做到这一点。请检查Change contents of submitted form on submit

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案4】：

HTML

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

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;
});

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

【讨论】：