Jump to content

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

 

 

 

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
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.

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

 

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

 

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

 

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

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.

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

 

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
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.

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

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

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.

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...