KCTechNet
asked on
form submit not working when using .load
I have a php form that works fine when I open it directly. The submit button will add records to several tables as needed (using MySQL).
But when I load the page into a div on another page, clicking the submit button does not add the records.
One the main page I have:
function addAppt(apptDate)
{
$("#detailSection").load(" newAppoint ment.php?a pptDate=" + apptDate);
}
When the form loads in the div, it is properly putting the value apptDate into the Appointment field in the form. So it seems to be loading fine. It is just the code behind the submit button (which is in newAppointment.php) does not run.
The reason I am using jquery instead of a php include is because there are a couple different forms that I need to switch between depending on what the user clicks on the main page, and they are all going into the "detailSection" div.
But when I load the page into a div on another page, clicking the submit button does not add the records.
One the main page I have:
function addAppt(apptDate)
{
$("#detailSection").load("
}
When the form loads in the div, it is properly putting the value apptDate into the Appointment field in the form. So it seems to be loading fine. It is just the code behind the submit button (which is in newAppointment.php) does not run.
The reason I am using jquery instead of a php include is because there are a couple different forms that I need to switch between depending on what the user clicks on the main page, and they are all going into the "detailSection" div.
ASKER
Sorry, only on WAMP right now so I can't provide a link.
I don't understand your recommendation. I need to use 'on' instead of '.load'?
I don't understand your recommendation. I need to use 'on' instead of '.load'?
Can you paste the FORM code and any relevant javascript.
ASKER
here are sections of newAppointment.php. However, as I mentioned, this page, when opened directly in a browser works fine. It is only when it is appended to a div of dashboard.php that there is an issue.
newAppointment.php
code in dashbaord.php
newAppointment.php
<form method="post" id ="newApptForm" name="newApptForm" >
<fieldset style="padding: 5px;">
<table><tr><td>
Appt Date: <input name="apptDate" value="<?php echo $apptDate ?>" />
Appt Time: <input name="apptTime" value="<?php echo $apptTime ?>" />
<br/>Duration <input name="apptDuration" value="<?php echo $apptDuration ?>" />
<br/>Groomer <input name="groomerID" value="<?php echo $groomerID ?>" />
</td></tr></table>
</fieldset>
<input type="submit" value="Add Appointment" name="addAppt" id="addAppt" />
<input type="button" name="cancel" value="Cancel" onClick="parent.location='dashboard.php'" />
</form>
code in dashbaord.php
function addAppt(apptDate)
{
$("#detailSection").load("newAppointment.php?apptDate=" + apptDate);
}
$(document).ready(function(){
var d = new Date();
var myDate = d.getMonth()+1 + '/' + d.getDate() + '/' + d.getFullYear();
$('#dateIs').val(myDate);
drawCalendar();
addAppt(myDate);
setInterval(function(){
drawCalendar();
},30000);
});
So when you click Add Appointment it doesn't submit the page?
Just tried it and it works fine.
That is the only js you have in the page, nothing intercepting the Submit button?
Just tried it and it works fine.
That is the only js you have in the page, nothing intercepting the Submit button?
The reason it isn't firing is because the information is brought in dynamically. You can try doing two things to resolve this:
1) bring in new javascript/jquery as part of page that is returning (meaning you include your 'on submit event' capture in your newAppointment.php file.
2) Add the event handler in the callback of the load method, example
1) bring in new javascript/jquery as part of page that is returning (meaning you include your 'on submit event' capture in your newAppointment.php file.
2) Add the event handler in the callback of the load method, example
$("#detailSection").load("newAppointment.php?apptDate=" + apptDate, function(){
var $formElm = $('#formID');
$formElm.onsubmit = function(){
return function(){
//call some function you want to fire 'onsubmit'
}
}();
});
ASKER
so I should have a 3rd php page that executes the sql Inserts and the $(#newApptForm).onsubmit will call that 3rd page?
Or, can/should I just move the if (empty($_POST["addAppt"]) ) code to dashboard.php
Or, can/should I just move the if (empty($_POST["addAppt"]) ) code to dashboard.php
ASKER
ok. so I just noticed that when i add "action":
<form method="post" id ="newApptForm" name="newApptForm" action="newAppointment.php " >
It executes the sql inserts, but loads newAppointment.php. But I need the user to be returned to dashboard.php after the submit. When I change action="dashboard.,php" it doesn't execute the inserts.
<form method="post" id ="newApptForm" name="newApptForm" action="newAppointment.php
It executes the sql inserts, but loads newAppointment.php. But I need the user to be returned to dashboard.php after the submit. When I change action="dashboard.,php" it doesn't execute the inserts.
ASKER
I can't believe I have been dealing with this for two days and it was such an easy solution.
I changed the form action back to newAppointment.php. But after I was done with all the sql commands, I added:
header('Location: /dashboard.php');
exit;
This took me back to the dashboard.
Unless there is a better way to do this, I will go ahead and stick with this solution.
I changed the form action back to newAppointment.php. But after I was done with all the sql commands, I added:
header('Location: /dashboard.php');
exit;
This took me back to the dashboard.
Unless there is a better way to do this, I will go ahead and stick with this solution.
So the Submit was working you just didn't realise ;o)
I think you want use ajax, Try solved example here
https://www.experts-exchange.com/questions/28165416/redirect-insert-data.html?anchorAnswerId=39271158#a39271158
https://www.experts-exchange.com/questions/28165416/redirect-insert-data.html?anchorAnswerId=39271158#a39271158
ASKER
Gary,
As I understood it, "action" tells what page is going to receive the $_POST data, and if you omit "action" it assumes that the same page will handle the POST. I guess this is not true when the form is "included" in another page?
I still need to get a better understanding of the scope of functions, variables, and such when using include/load. For example, can the parent page call php or javascript functions that are in the "included" page, or can the "included" page use variables defined in the parent or in another page that was included in the parent.
As I understood it, "action" tells what page is going to receive the $_POST data, and if you omit "action" it assumes that the same page will handle the POST. I guess this is not true when the form is "included" in another page?
I still need to get a better understanding of the scope of functions, variables, and such when using include/load. For example, can the parent page call php or javascript functions that are in the "included" page, or can the "included" page use variables defined in the parent or in another page that was included in the parent.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
good to know that FORM uses the address bar, not the name of the page the form is in. That explains a lot.
But what if the parent is also php, so it is not rendered yet. Can it then reference the loaded page?
But what if the parent is also php, so it is not rendered yet. Can it then reference the loaded page?
Doesn't matter that it is a php page, it is rendered before its sent to the client and that's where it is when it loads the other page into itself.
If you are running jquery on a dynamic element you need to use the on function
Open in new window
You have to target the container that exists to start with.