1

I have been reading dozens of threads on using jquery to submit an html form, and my form still wants to submit traditionally. When I click on the button to submit the form, the php file successfully executes, but I get a page refresh, which tells me that my script isn't firing on form submission. Any help?

EDIT: A little more info; my form is dynamically loaded on the page, and is set to display:none when loaded.

My Form:

<div id='member-form' style="text-align: center; display: none;">
    <form id="addmemberform" method="post" action="/scripts/addmemberscript.php" style='margin: 0 auto;'>
        <th><h2 class="form-header">Add Team Member</h2></th>
        <tr><span class="error">* required field</span></tr>
        <fieldset id="team-info" class="team-info">
            <div class='label'>*First Name:</div><div class='label'>*Last Name:</div><div class='label'>Specialty:</div><div class='label'>Email:</div><div class='label'>Phone:</div>
            <div>
                <input type="hidden" name="tmid" value="<?php echo $team; ?>"></input>

                <input type="text" name="fname" autocomplete="off" autofocus tabindex="1">

                <input type="text" name="lname" autocomplete="off" tabindex="2">

                <input type="text" name="specialty" autocomplete="off" tabindex="3">

                <input type="text" name="email" autocomplete="off" tabindex="4">

                <input type="text" name="phone" autocomplete="off" tabindex="5">
            <div>
        </fieldset>
        <fieldset class="team-action">

            <input class="btn" type="submit" name="submit" value="Submit" style='width: 70; heigt: 15; font-size: 14px;' tabindex="6"> 

        </fieldset>
    </form>
</br></br>
</div>

My JQuery:

<script type="text/javascript">
     $(document).ready(function(){
         $(document).on('submit','#addmemberform',(function(e){
            var postData = $(this).serializeArray();
            var formURL = $(this).attr('action');
            $.ajax(
            {
                url : formURL,
                type: "POST",
                data : postData,
                success:function(data, textStatus, jqXHR) 
                {
                    alert(data);
                },
                error: function(jqXHR, textStatus, errorThrown) 
                {
                    //if fails      
                }
            });
            e.preventDefault(); //STOP default action
            e.unbind(); //unbind. to stop multiple form submit.
        });
    });

</script>

My php file:

<?php
$team = $_POST["tmid"];
$fname = $_POST["fname"];
$lname = $_POST["lname"];


$con = mysql_connect('************', '******', '**********');
mysql_select_db(dbbmdmi);


if ($con) {
$sql = "SELECT First, Last, City, State FROM MemberAdmin WHERE   First='" .$fname. "' AND Last='" .$lname. "'";
$res = mysql_query($sql) or die(mysql_error());
if(mysql_num_rows($res) > 0){

while($row = mysql_fetch_array($res, MYSQL_ASSOC)) {
    echo'People found with that name.  Please choose the correct team member: <div>' .$row['First']. ' ' .$row['Last']. '  from ' .$row['City']. ', ' .$row['State'];
}

} else {
    $date = date(dmi);
    $name = substr($fname, 0, 1) . substr($lname, 0, 1);
    $inid = $name . $date;
    $memid = substr($team, 0, 3) . $name . date(d);

    $con = mysql_connect('dbbmdminet.ipagemysql.com', 'local', 'dbbmdmi');
    mysql_select_db(dbbmdmi);

    If ($con) {
    $sqlins1 = "INSERT INTO MemberAdmin". "(IndID, First, Last)". "VALUES ('$inid','$fname','$lname')";
    $sqlins2 = "INSERT INTO Members". "(MemberID, TeamID, IndID)". "VALUES ('$memid','$team','$inid')";
    mysql_query($sqlins1);
    mysql_query($sqlins2);

    echo 'Team member ' .$fname. ' ' .$lname. ' was successfully added.';
    }
}}


?>
JMoudy
  • 33
  • 6
  • 1
    Likely because you are referencing an id that the form doesn't have. Your submit says listen for an id but your form has the name attribute but no id attribute – Rasclatt Feb 21 '16 at 03:25
  • Side note, the `mysql_` functions are deprecated, use pdo or `mysqli_`. – Rasclatt Feb 21 '16 at 03:28
  • @Rasclatt thanks for the id catch, however it's still doing the same thing. I know, I'm getting around to mysqli. – JMoudy Feb 21 '16 at 03:32
  • Is it loaded in my JavaScript? If so, you'll want to use `on('submit'` instead – Rasclatt Feb 21 '16 at 03:36
  • If I'm following your question correctly, the form is loaded through an ajax call. – JMoudy Feb 21 '16 at 03:39
  • Also if it still doesn't work then make sure there are no console errors – Rasclatt Feb 21 '16 at 03:40
  • Oh if you load the form into the page using JavaScript then you probably have to use the on('submit') for it to work – Rasclatt Feb 21 '16 at 03:41
  • I tried .on('submit'), still nothing. Checking console. – JMoudy Feb 21 '16 at 03:45
  • Unfortunately, no console errors. – JMoudy Feb 21 '16 at 03:48
  • This example is more what I meant: http://stackoverflow.com/questions/18545941/jquery-on-submit-event – Rasclatt Feb 21 '16 at 04:01
  • Tried $(document).on('submit','#addnewmember',(function(e) { but nothing. Don't know what's going on here. – JMoudy Feb 21 '16 at 04:19
  • I am going to try it on my server and see if I can replicate the issue – Rasclatt Feb 21 '16 at 04:21
  • Wait, what you have above is not right. You need `$(document).ready(function....etc.` then you need `$(document).on('submit','#addnewmember', function(e) {`...etc – Rasclatt Feb 21 '16 at 04:22
  • Also you cause a syntax error if you do `(function(e)`, should just be `function(e)` – Rasclatt Feb 21 '16 at 04:24
  • 1
    It's because your form ids don't match now. I was running into the same issue. You need what you have now but your form id and the jquery id have to be the same. You have one as `addnewmember` and the form as `addmemberform` – Rasclatt Feb 21 '16 at 04:33
  • Perfect! Thank you so much! My weary eyes and brain are not seeing the little mistakes. – JMoudy Feb 21 '16 at 04:38

0 Answers0