Uploading data from separate forms in HTML with PHP

Question

I created three separate forms and gave each of these forms an id. After the user presses next, the current form fades out and the second form fades in. After the user presses next again, the second form then fades out and the next form fades in. Inside the third form I included a submit button that should submit all my data to my database.

I am having issues passing the information through the three different forms and was wondering if anyone had any ideas on how I could more easily accomplish this.

Sample code:

<form id ="1">
<input type = "text"/>
</form>
<form id = "2">
<input type="checkbox"/>
</form>
<form id = "3" action ="upload.php">
<input type = "file">
<input type = "submit">
</form>

EDIT* adding more info: Once the user presses submit, the information passed in from form 1 and form 2 should both be posted into upload.php. I am not sure how to accomplish that so far.

are you doing it with jquery..? – Itz Raghu Nov 19 '15 at 05:44 — Itz Raghu, Nov 19 '15 at 05:44
the fadeins and fadeouts are done with Jquery – user3264355 Nov 19 '15 at 05:46 — user3264355, Nov 19 '15 at 05:46
Simply use jquery - serialize function – Thamilhan Nov 19 '15 at 05:47 — Thamilhan, Nov 19 '15 at 05:47

Thamilhan · Answer 1 · 2015-11-19T06:39:24.977

0

You can use jQuery's serialize function to achieve this:

Your html file:

<form id="1">
    <input type="text" name="name" />
</form>
<form id="2">
    <input type="checkbox" name="chk" />
</form>
<form id="3">
    <input type="file" name="file">
    <input type="submit">
</form>

Add this script (an AJAX way):

<script>
$(document).ready(function(){
    $("#3").submit(function(e) {
        e.preventDefault();
        $.ajax({
          type: "POST",
          url: "upload.php",
          data: $('#1, #2, #3').serialize(),
          success: function(res) {
                if(res==="Success"){
                    alert("Success!!!");
                }
            }
        });      
    });
});

</script>

UPDATE

As @Santosh Patel suggests, I too suggest the same, to enclose form contents inside div. But since you have come up with a design, I suggested you jQuery.

edited Nov 19 '15 at 06:39

answered Nov 19 '15 at 05:55

Thamilhan

13,040
5
37
59

This is awesome. Just want to double check before I go and attempt to implement this. In my upload.php file I could easily call $name = $_POST['name'], and $check = $_POST['chk'] even thought they are from different forms? just want to make sure I am understanding you correctly – user3264355 Nov 19 '15 at 06:02
Yes it is same as you do usually – Thamilhan Nov 19 '15 at 06:03
I'm looking up the documentation for serialize() but couldnt find any information regarding this issue, but what happens in the case I have two name attributes that are the same? – user3264355 Nov 19 '15 at 06:07
It is not good to have same name attribute for several controls. In that case, your first value is overwritten by the second value, though both values get posted. In such case use atleast a square brace to the name to make it into array - http://stackoverflow.com/questions/7880619/multiple-inputs-with-same-name-through-post-in-php – Thamilhan Nov 19 '15 at 06:12

score 0 · Accepted Answer · answered Nov 19 '15 at 06:09

0

You can solve this issue by using single form like below.

<form id ="1" action ="upload.php">
<div class="first-form">
<input type = "text"/>
</div>
<div class="second-form">
<input type="checkbox"/>
</div>
<div class="third-form">
<input type = "file">
<input type = "submit">
</div>
</form>

there are three div with different class. You must hide and show the div not the form.

answered Nov 19 '15 at 06:09

Santosh Patel

549
2
13

Thanks you solved my problem,i have also same problem. – Nov 19 '15 at 10:24

score 0 · Answer 3 · answered Nov 19 '15 at 06:12

If you want to do with normal php without ajax, try this.

<form id ="1">
        <input type="text" name="form1" />
    </form>
    <form id = "2">
        <input type="checkbox" name="form2"/>
    </form>
    <form id = "3" action="file.php" method="post">
        <input type = "text" name="form3">
        <input type = "submit" id="sub">
    </form>

Script

$(document).on("click", "#sub", function () {
    $('#1 :input').not(':submit').clone().hide().appendTo('#3');
    $('#2 :input').not(':submit').clone().hide().appendTo('#3');
    return true;
});

Uploading data from separate forms in HTML with PHP

3 Answers3