CODEWITHSUNDEEP
jqueryajaxforms
RAP
RAP

Reputation: 137

Remove duplicate form inputs while serializing and submitting two or more forms

I have two forms holding the common action with inputs with same names. First my requirement is to submit the individual forms which i can do easily. Then i need to submit both the forms at a time by serializing and sending through ajax. Here the problem is, as both the forms contains inputs with same names duplicate values are going through post. How can i prevent it?

Ex:

$(document).ready(function(){
$("#btn").on("click",function(){
var dataString=$('#form1, #form2').serialize();
$.ajax({
            url: "someOther.jsp",
            dataType: 'json',
            data: dataString,
            success: function (data) {
                console.log(data);
            },
            error: function (data) {
                console.log(data);
            }
      });
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="some.jsp" method="post" id="form1">
<input type="hidden"  name="hField1" value="value1">
<input type="hidden"  name="hField2" value="value2">
<input type="text" id="field11" name="field11">
<input type="text" id="field21" name="field21">
<input type="submit" value="Save">
</form>

<form action="some.jsp" method="post" id="form2">
<input type="hidden"  name="hField1" value="value1">
<input type="hidden"  name="hField2" value="value2">
<input type="text" id="field12" name="field12">
<input type="text" id="field22" name="field22">
<input type="submit" value="Save">
</form>

<button id="btn">Submit</button>

Upvotes: 1

Views: 2644

Answers (3)

RAP
RAP

Reputation: 137

$(document).ready(function(){
$("#btn").on("click",function(){
$(".neglect").remove();
var dataString=$('#form1, #form2').serialize();
$.ajax({
            type:"POST",
            url: "someOther.jsp",
            dataType: 'json',
            data: dataString,
            success: function (data) {
                console.log(data);
            },
            error: function (data) {
                console.log(data);
            }
      });
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="some.jsp" method="post" id="form1">
<input type="hidden" name="hField1" value="value1">
<input type="hidden" name="hField2" value="value2">
<input type="text" id="field11" name="field11">
<input type="text" id="field21" name="field21">
<input type="submit" value="Save">
</form>

<form action="some.jsp" method="post" id="form2">
<input type="hidden" class="neglect" name="hField1" value="value1">
<input type="hidden" class="neglect" name="hField2" value="value2">
<input type="text" id="field12" name="field12">
<input type="text" id="field22" name="field22">
<input type="submit" value="Save">
</form>

<button id="btn">Submit</button>

Upvotes: 0

Muhammad Sajjad
Muhammad Sajjad

Reputation: 18

You can send both forms data in 2 different variables.

    $(document).ready(function(){
      $("#btn").on("click",function(){
      var form1=$('#form1').serialize();
      var form2=$('#form2').serialize();
       $.ajax({
        url: "someOther.jsp",
        dataType: 'json',
        data: {form1:form1,form2:form2},
        success: function (data) {
            console.log(data);
        },
        error: function (data) {
            console.log(data);
        }
  });
 });
});

And on the other side get both form data differently.

Upvotes: 0

Flash Thunder
Flash Thunder

Reputation: 12036

The simplest solution would be to make those arrays instead of single values, like this:

<form action="some.jsp" method="post" id="form1">
<input type="hidden" id="hField1" name="hField1[]" value="value1">
<input type="hidden" id="hField2" name="hField2[]" value="value2">
<input type="text" id="field11" name="field11[]">
<input type="text" id="field21" name="field21[]">
<input type="submit" value="Save">
</form>

<form action="some.jsp" method="post" id="form2">
<input type="hidden" id="hField1" name="hField1[]" value="value1">
<input type="hidden" id="hField2" name="hField2[]" value="value2">
<input type="text" id="field12" name="field12[]">
<input type="text" id="field22" name="field22[]">
<input type="submit" value="Save">
</form>

Upvotes: 1

Related Questions