CODEWITHSUNDEEP
phpjqueryajaxforms
echez
echez

Reputation: 565

Submit two forms to the same page

I have been on this site all day and can't seem to find what I need - no duplicate post intended.

I have a form containing a link which calls a modal popup containing a different form. 

###### PARENT PAGE #############
<form...>
...
<a href="php_page.php?id=<?php echo $id; ?>&sect=<?php echo $sect; ?>">link</a>
...
</form>

**** MODAL POPUP ****
<form...>
...
<input type="submit" />
</form>
**** END MODAL POPUP ****

### END PARENT PAGE #############

When I submit the form in the modal popup, the parent page is refreshed to show the updated info in the corresponding section of the page; except that the first form is not submitted and when the page refreshes to update the necessary section, the contents of the first form is lost.

I have tried using ajax to refresh only the necessary section of the page but that doesn't work as the sections that need refreshing use php variables with contents from mysql.

The system does what it needs to do and I don't mind the refresh. But I need a way to keep the user data entered into the first form.

Is it possible to submit the first form at the same time as the second to the same php page or any other way of preserving the user data in the first form on page reload without submitting it.

Upvotes: 0

Views: 730

Answers (2)

Anthony Hatzopoulos
Anthony Hatzopoulos

Reputation: 10537

You cannot do this with pure php. You'll need javascript and write it in a way that when you hit submit on the modal it 'puts' the information back into the parent form.

One way is to make the modal form submit button not an actual submit button.

You might even be able to get away with taking the filled out section dom elements in the modal injected back into the parent form. Some jquery plugins already do this. For example colorbox

Here is a working example using only ONE <form> tag and jquery colorbox. http://jsbin.com/olalam/1/edit

Upvotes: 1

Alfero Chingono
Alfero Chingono

Reputation: 2663

I am not a php developer, so I'll suggest an alternative approach.

Before you refresh the page, you can serialize the form and store the data locally (e.g. in a cookie) then restore the data back into the form. Granted, that will require a bit more JS code, but should get you what you want.

UPDATE: Since you mentioned that you might need a little assistance on the JS front, here is some guidance:

  1. Grab the jquery.cookie plugin here.
  2. Grab the jquery.deserialize plugin here.
  3. Use the following code as a starting point.

.

// the name of the cookie
var cookieName = 'myCookieName';

function beforeSubmit() {
    // serialize the form into a variable
    var serializedForm = $('#id-of-form').serialize();
    // store the serialized form
    $.cookie(cookieName, serializedForm, { path: '/' });
}

function afterRefresh() {
    // read the cookie
    var serializedForm = $.cookie(cookieName);
    // de-serialize the form
    $('#id-of-form').deserialize(serializedForm, true);
}

HTH

Upvotes: 0

Related Questions