call jquery function from html without preventing default

Question

So I saw a lot of answer on similar question but didn't found how to exactly make it work. I have a lot of functions in query and all of them didn't complete because the html event load the next page. So what I need is how exactly make the html event wait till the jquery check everything that it should check.

so example of jquery is

jQuery.noConflict();
jQuery(document).ready(function($) {
    $(document).on("click","input[name=open]", function () {
        var login = $("input[name=field1]").val();
        var pas = $("input[name=field2]").val();
        alert('I call it');

        $.post("index.php", { 
            st: 1, 
            field1: field1, 
            field2: field2
        }, function(data) {
            alert(data);
            if ($.trim(data) == 'er') {
                alert("Sorry incorrect data");
                return false;
            }
            else
                return true;
        });
    });
});

<div>   
    <form method="POST" action="index.php?cd=in">
        <!----code here --->
        <div>
            <input name="open" class="field_submit" type="submit" size="7" value="IN" ">
        </div>

So the function works fine when there is not line with action="index.php?cd=in". So what happen is just start the function but didn't wait the result and do redirection. So there is couple ways how I can prevent it:

redirect by jQuery but it not what I need
is make in HTML file on tag input event onclick="return function-name();"

But the problem how to correct realize the jquery file function because when I put the function inside the console gives me an error as I the function is not defined. So the problem is how to exactly realize the function in jquery file that it work for onclick event in HTML file. Or if you know other better variant to realize it. Thanks

A. Wolff · Accepted Answer · 2015-12-09 13:19:43Z

2

What you need is:

// bind submit event on form, not click of submit
// because a form can be submited without clicking submit button
$(document).on("submit", "form:has(input[name=open])", function(e) {
  e.preventDefault();  // prevent default behaviour
  var self = this; // keep ref on form
  var login = $(this).find("input[name=field1]").val();
  var pass = $(this).find("input[name=field2]").val();
  alert('I call it');
  $.post("index.php", {
    st: 1,
    login: login,
    pass: pass
  }, function(data) {
    alert(data);
    if ($.trim(data) == 'er') {
      alert("Sorry incorrect data");
      return false; // if error, return whatever value
    }
    self.submit(); // submit the FORM calling submit DOM API method (doesn't trigger jq submit handler)
  });

});

edited Dec 9, 2015 at 13:19

answered Dec 9, 2015 at 12:47

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

ZeroVash Over a year ago

and what about HTML file ? some onclick event?

A. Wolff Over a year ago

@alex_mike I don't understand what you mean?! Which onclick event? EDIT: i edited answer because this.submit(); must be self.submit();. It could be this.submit(); only if passing context: this, as option of ajax request, which isn't possible using shorthand $.post() method

A. Wolff Over a year ago

Oops, i forgot to prevent default behaviour, check it again now: function(e) { e.preventDefault(); ... });

ZeroVash Over a year ago

ok thanks, but some how it just skip the hole function I think I make some mistake

A. Wolff Over a year ago

You mean submit event isn't triggered or what?

|

Collectives™ on Stack Overflow

call jquery function from html without preventing default

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related