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("newAppointment.php?apptDate=" + 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.

Gary

Link to the page?
If you are running jquery on a dynamic element you need to use the on function

$('#container').on('click','#clickable_element',function(){

Open in new window

You have to target the container that exists to start with.

KCTechNet

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

Gary

Can you paste the FORM code and any relevant javascript.

KCTechNet

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

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

Open in new window

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

Open in new window

Gary

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?

soupBoy

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

$("#detailSection").load("newAppointment.php?apptDate=" + apptDate, function(){
    var $formElm = $('#formID');
    
    $formElm.onsubmit = function(){
        return function(){
            //call some function you want to fire 'onsubmit'    
        }
    }();
});

Open in new window

KCTechNet

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

KCTechNet

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.

KCTechNet

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.

Gary

So the Submit was working you just didn't realise ;o)

Jagadishwor Dulal

I think you want use ajax, Try solved example here
https://www.experts-exchange.com/questions/28165416/redirect-insert-data.html?anchorAnswerId=39271158#a39271158

KCTechNet

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.

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

KCTechNet

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?

Gary

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.