Question

A page dslogin.php is loaded from a side panel into

<div id="workarea"> </div>  

The link which loads the page is very simple:

<a id=\"ds_action\" href=\"javascript:outputResults('dslogin.php','workarea','db=$k');\"> Connect to $k</a>

but when dslogin get $_GET[“db”] it generated a Form which shows up in the workarea div. Now the form is also simple :

function getCredentials($db,&$u,&$p)
{
echo "Connecting to Database $db: <br/>\n";
echo "<form id=\"dblogin\"  action=\"dsconnect.php\" method='post'> \n" ;
echo" Please enter your username and password if you wish. <br/> \n" ;
echo "Username: <input type='text' name='username' > \n " ;
echo "Password: <input type='password' name='password' > \n" ;
echo "<input type='submit' value='Login' name='Login'> <br/> \n" ;
echo "<input type='hidden' value=$db name='database'> <br/> \n" ;
echo "</form>" ;
echo "<div id=\"local\"> </div>";
}

Once the users submits the form, an ajax code supposed to intercept it in this following code

  <script>
 $(document).ready(function() 
 {
    $('#dblogin').submit(function() 
    { // catch the form's submit event
        $.ajax({ // create an AJAX call...
            data: $(this).serialize(), // get the form data
            type: $(this).attr('method'), // GET or POST
            url: $(this).attr('action'), // the file to call
            success: function(response) { // on success..
                $('#local').append(response); // update the DIV
            }
        });
        return false; // cancel original event to prevent form submitting
    });
    });
</script>

This is NOT working. My thinking is that when the page first loads with the ajax script:

$(document).ready(function() 
{
    $('#dblogin').submit(function()  ...

there is no link to the dblogin Form because it was not yet loaded.

When you click on submit, you get the action page dsconnect.php instead of getting the output of it appended to the form page as it supposed to do.

Is there a way to make this work?

Answer 1

Change it to a delegate event:

$('#{containerid}').on('submit', '#dblogin', function()  ...

I think the container in you case is #workarea though it’s wasn’t so clear.