Two Forms, Two Actions, One Button

iwato · December 9, 2019

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

iwato · December 9, 2019

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 December 9, 2019 by iwato

Funce · December 9, 2019

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.

iwato · December 9, 2019

Will do.

dsonesuk · December 9, 2019

You combine one form elemenst with another using formdata

https://thoughtbot.com/blog/ridiculously-simple-ajax-uploads-with-formdata

Funce · December 9, 2019

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

iwato · December 9, 2019

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

Give me some time to see what works!

Roddy

iwato · December 9, 2019

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

Funce · December 9, 2019

Has your FormData object been initialised as below?

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

Funce · December 9, 2019

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

dsonesuk · December 9, 2019

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 December 9, 2019 by dsonesuk

iwato · December 9, 2019

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

Funce · December 9, 2019

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.

iwato · December 9, 2019

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

No, I fixed this problem as above.

Roddy

iwato · December 9, 2019

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 December 9, 2019 by iwato

Funce · December 9, 2019

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.

iwato · December 9, 2019

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

Roddy

Funce · December 9, 2019

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

Funce · December 9, 2019

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.

iwato · December 9, 2019

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 December 9, 2019 by iwato

Funce · December 9, 2019

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.

iwato · December 9, 2019

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

iwato · December 9, 2019

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

Funce · December 9, 2019

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.

Two Forms, Two Actions, One Button

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in