jquery code to change the parameters submitted by a form

Question

In a web form in a PHP program, the form is a regular HTML form.

Now, the form has 3 separate text boxes. Let their IDs/names be box1, box2 and box3 respectively

What I want to happen is, when the form gets posted --

The following text gets posted--> box1 + box2+ box3 contents, separated by commas.

I wish to do this using JQuery- I looked up JQuery "submit" function but could not find any direct way to replace the parameters-- how can I implement the above?

you can do that using `jQuery.ajax`, example : `data:{'boxes':$('#box1').val()+","+$('#box2').val()+","+$('#box3').val()}` — mgraph, May 29 '13 at 16:50
@mgraph ok- once i get the combined data into the new variable, now how do I submit the form-- replacing the 3 boxes params with the new single param(having combined value)? If you could post a JS snippet showing this that would be very helpful. Also instead of a comment kindly post that as an answer? Thanks, Arvind — Arvind, May 29 '13 at 16:54

score 4 · Accepted Answer · answered May 29 '13 at 17:10

You could do this :

$('#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;
    }
})

Basicly, it is merging your input into one accessible via php with ['mergedInput'].

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

i think you can do this easily using ajax .. Kindly check Change contents of submitted form on submit

if you want to do this without ajax, you may have to use hidden fields .. Kindly check jquery-add-additional-parameters-on-submit-not-ajax

edited May 23 '17 at 11:43

Community

1
1

answered May 29 '13 at 16:56

ebram khalil

8,252
7
42
60

score 0 · Answer 3 · answered May 29 '13 at 17:10

You can use AJAX to solve your problem

Your HTML

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

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

gautiselvaraj · Answer 4 · 2013-05-29T17:24:25.557

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

This would check whether submit button is clicked and sends three box values separated by comma

jquery code to change the parameters submitted by a form

4 Answers4