1

For some reason, my form has a submit button and the form has an id tag to it. When i do a test to call the .submit function, the form just closes. Here is the example: http://overtheoceanfilms.com/admin/index.php (press the button in the "action" column)

The link to open the modal (i load the form from another page that gets loaded in the href tag.)

 <a href="inc/editInquiry.inc.php?id=<?php echo $row['customer_id'];?>" data-reveal-id="modal_inquiry_editUser"  data-reveal-ajax="true" id="<?php echo $row['customer_id'];?>"> <i class="fi-page-edit large"></i> </a>

Here is my modal: 

<!--INQUIRY EDIT USER -->
<div id="modal_inquiry_editUser" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">


<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

Here is the jquery, very simple: 

 $('#inquiry_editUserForm').submit(function() {

    alert('test');
});

PHP Form (editInquiry.inc.php) 

<form id="inquiry_editUserForm" method="post" action="">
....stuff inside form
<button type="submit"> Update </button> 
</form>
Mike
  • 163
  • 1
  • 3
  • 13

3 Answers3

0

You should use the "click" event, instead of "submit". Also if you don't want to submit at the moment you click, you must suppress the default behaviour with "preventDefault", like this

$('#inquiry_editUserForm').click(function(e) {
    e.preventDefault();
    alert('test');
});

Just a reminder that click event is a shortcut for .on( "click", handler )

Guilherme Holtz
  • 474
  • 6
  • 19
  • If you attach a `click` event to the entire form, it will get triggered every time it get a click – Castro Roy Jul 22 '16 at 19:42
  • updated the code to show more. all i'm trying to do is make sure it calls the function and alerts "test". It doesn't – Mike Jul 22 '16 at 19:43
  • I accessed the exemple url and opened the form, if I bind the event manually, using browser console it works, give it a try. Maybe the problem is related to the moment you are binding the event. – Guilherme Holtz Jul 22 '16 at 19:55
0

If you want to submit your form but the dialog must remain open, then you should submit your form using ajax. You can attach an event to the form it self, or to the submit button.

If you are going to use the submit event, make sure to call preventDefault() or returning false at the end in order to cancel the submit action.

$('#inquiry_editUserForm').submit(function(evt) {
    //your code goes here
    $.ajax({
        method: "POST",
        url: "some.php",
        data: $(this).serialize() //Encode form elements as a string for submission.
        //If using serialize(), name attribute in form elements is required
    })
    .done(function( msg ) {
        alert( "Data Saved: " + msg );
    });
    return false; //return false will cancel the page to reload/redirect
    //evt.preventDefault(); //or we can use preventDefault()
});

Almost the same applies to the click event in the submit button

I took a look to your page source, you are attaching your event to soon and the element with id inquiry_editUserForm does not exist yet. So, i recommend you that you find the right place to attach the event, and i think it is after the form is fully loaded.

Castro Roy
  • 7,623
  • 13
  • 63
  • 97
  • thanks! i'm aware of this - the problem i'm having is when i press the submit button it doesn't even recognize the .submit function at all. but if i use a button with an onclick event, it will fire the function. – Mike Jul 22 '16 at 19:57
  • if you go to the page now, there is a 'customers' link, i made another modal with a form inside it already, and when you press the submit button, it does recognize the .submit function and alerts 'test'. – Mike Jul 22 '16 at 19:58
  • You are right! I see that it doesn't populate the form. Even though it's showing it. – Mike Jul 22 '16 at 20:34
-1

You have to return true to continue operation.

This is already answered here : How to do something before on submit?

Community
  • 1
  • 1
Aleksandar Đokić
  • 2,118
  • 17
  • 35