Jump to content
iwato

Two Forms, Two Actions, One Button

Recommended Posts

BACKGROUND:  On one webpage I have two forms and one button for both forms. Each form has its own action pointing to a different PHP processing file.  I can get each form to work properly by itself, but I cannot seem to get the perform together.

$('.SignUpButton').on('click', function() {
	$('#student_info').submit();
	$('#topic_info').submit();
});

<form id='student_info' method='post' enctype='application/x-www-form-urlencoded' action='./_utilities/php/student_info.php'> ... </form>

<form id='topic_info' method='post' enctype='application/x-www-form-urlencoded' action='./_utilities/php/topic_info.php'> ... </form>

<input id='passcode_entry' form='student_info' type='text' name='passcode' placeholder='4-Digit Code' />

<button class='SignUpButton'>Sign Up!</button>

QUESTION:  If you could help me to get the above code to work properly, I would be very grateful.  Ideally, I would like to get both forms pointing to the same PHP processing file, but do not know how to combine the data, and I have not a lot of time for a major renovation of my code, as I would very much like to have this up and running by tomorrow morning.

By the way, I tried using the form attribute with the <fieldset> element, but for some reason it failed to work properly.

Please advise.

Roddy

 

 

 

Share this post


Link to post
Share on other sites

Should I assume that the absence of a response is due to an absence of advice?  Does everything really appear OK?  You view the webpage here.

Please respond.

Roddy

Edited by iwato

Share this post


Link to post
Share on other sites

Hi there Roddy,

If you want to post two sets of data, you'll probably want to use an AJAX request.

Stand by, I can also get you the grouping code for submission of two forms as well. Hang in there.

Share this post


Link to post
Share on other sites

Hiya Roddy,

Please view below, the data aggregation and subsequent form submission.

$(".SignUpButton").click(function() {
  //Build the formData payload
  var formData = new FormData($("#student_info")[0]);
  var poData = $("#topic_info").serializeArray();
  for (var i = 0; i < poData.length; i++)
    formData.append(poData[i].name, poData[i].value);

  //Now send it
  $.ajax({
    type: "POST", // define the type of HTTP verb we want to use (POST for our form)
    url: "./_utilities/php/student_info.php", // the url where we want to POST
    data: formData // our data object
  })
    .done(function(data) {
      //Redirect here?
    })
    .fail(function() {
      //Error message if you'd like
    });
});

 

Share this post


Link to post
Share on other sites

Wow!  Thank you to you both.
I might get this accomplished after all.

Give me some time to see what works!

Roddy

Share this post


Link to post
Share on other sites

Hi, Funce.  I have decided to experiment with your suggestion first as it is closer to language that I can easily understand.  This said, the FormData object is new to me and I do not know how to readily correct the error associated with the following code block:

for (var i = 0; i < poData.length; i++) {
    formData.append(poData[i].name, poData[i].value);
}

The associated error is the following;

Quote

TypeError: 'append' called on an object that does not implement interface FormData.

Please advise further..

Roddy

 

Share this post


Link to post
Share on other sites

Has your FormData object been initialised as below?

var formData = new FormData($("#student_info")[0]);

 

Share this post


Link to post
Share on other sites

Also you'll need to add some additional options to the ajax request. Sorry, I missed them before

$.ajax({
    type: "POST", // define the type of HTTP verb we want to use (POST for our form)
    url: "./_utilities/php/student_info.php", // the url where we want to POST
    data: formData, // our data object
    processData: false,
    contentType: false
})

 

Share this post


Link to post
Share on other sites

simplier

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document Title</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

        <style>

        </style>
    </head>
    <body>
        <div>

            <form name="form1" id="form1" action="dualsubmit.php" method="POST" enctype="multipart/form-data" onsubmit="return dothis()">
                <input type="text" name="input1" value="bill">
                <input type="text" name="input2" value="and">
                <input type="text" name="input3" value="ben">

                <input type="submit" value="dual submit" name="dualsubmit">
            </form>
            <form name="form2" id="form2" action="dualsumit.php" method="POST" enctype="multipart/form-data">
                <input type="text" name="input4" value="tom">
                <input type="text" name="input5" value="nick">
                <input type="text" name="input6" value="and">
                <input type="text" name="input6" value="harry">

            </form>



        </div>
        <script>

            function dothis()
            {

                var form1 = document.getElementById('form1');
                var formData = new FormData(form1);
                var otherFormData = $("#form2").serializeArray();
                for (var i = 0; i < otherFormData.length; i++) {
                    formData.append(otherFormData[i].name, otherFormData[i].value);
                }
                var xhr = new XMLHttpRequest();
                // Add any event handlers here...
                xhr.open('POST', form1.getAttribute('action'), true);
                xhr.send(formData);

                return false;

            }


        </script>
    </body>
</html>

for testing only

dualsubmit.php

<?php

var_dump($_POST);
?>

look at response/preview in network tab of web dev tools

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Yes,  Funce.

The formData variable captures the first instance of the jQuery object used to create the object.  I did not drop the [0] expression at the end of the object.  I will wait until I can form a proper data object before implementing the additionally suggested $.ajax() parameters.

Roddy

Share this post


Link to post
Share on other sites
Just now, iwato said:

Yes,  Funce.

The formData variable captures the first instance of the jQuery object used to create the object.  I did not drop the [0] expression at the end of the object.  I will wait until I can form a proper data object before implementing the additionally suggested $.ajax() parameters.

Roddy

I think the two might be linked. The append call may be surrounding the .ajax request.

Share this post


Link to post
Share on other sites
for (var i = 0; i < poData.length; i++) {
    formData.append(poData[i].name, poData[i].value);
}

No, I fixed this problem as above.

Roddy

 

Share this post


Link to post
Share on other sites

There is another problem as well.  The poData array only captures the name-value pairs in the last fieldset of the #topic_info form.

While you are thinking, I will experiment with what dsonesuk has proposed.

Roddy

Edited by iwato

Share this post


Link to post
Share on other sites

Maybe the ajax request is preemptively modifying the formData object, I have no idea. But I do know that adding the ajax options fixes the append error.

Share this post


Link to post
Share on other sites

Are you suggesting that the $.ajax() function should be included in the for-statement?

Roddy

Share this post


Link to post
Share on other sites

In addition, to fix the issue with the data capture, you need name attributes on all of your inputs.

Share this post


Link to post
Share on other sites
Just now, iwato said:

Are you suggesting that the $.ajax() function should be included in the for-statement?

Roddy

Nope, it's really bamboozling, but leaving the order as it is, and adding the ajax options will help.

Share this post


Link to post
Share on other sites

I don't get it either, but you are absolutely correct.  Adding the two additional parameters to the $.ajax() function allowed the data to be transmitted.  Still, however, only the last fieldset of the #topic_info form element was processed.  You may see what is occurring your self.

Do you have any idea why.

Roddy

Edited by iwato

Share this post


Link to post
Share on other sites

Name attributes on your inputs. That's the only way the data can be retrieved in the FormData. I can see one textarea has one 'title1' which is why you can probably see that one.

  • Thanks 1

Share this post


Link to post
Share on other sites

All of my input form controls have names, and there are four fieldsets in the topic_info form element. Only the name-value pairs of the last fieldset appear.  There are six altogether. title1, topic1, title2, topic2, title3, and topic3.

Roddy

Share this post


Link to post
Share on other sites

Never mind.  I have resolved the problem.

Input form controls of the checkbox type are very unusual creatures. I have learned during the last couple of days.  In any case, the checkbox fields do appear when they are checked.  You have made me one very happy trooper.

Roddy

Share this post


Link to post
Share on other sites
Just now, iwato said:

Never mind.  I have resolved the problem.

Input form controls of the checkbox type are very unusual creatures. I have learned during the last couple of days.  In any case, the checkbox fields do appear when they are checked.  You have made me one very happy trooper.

Roddy

Yes indeed, checkboxes only send data when checked. Glad I could help.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...