CODEWITHSUNDEEP
javascriptjquery
H Dindi
H Dindi

Reputation: 1552

Jquery on click button reloads page

I have the following script:

HTML

<form class="trial_form" id="trial_form" >
   <input type="text" value="TRIAL DATA PLEASE ALERT" id="trial_data" name="trial_data" class="trial_data"/>
   <input type="submit" name="trial_submit" id="trial_submit" class="trial_submit" value="Validate Data"/>
</form>

jQuery

$('#trial_submit').click(function () {
  alert('CLICKED!!!!');
  alert('Alert!!');
  var bla = $('#trial_data').val();
  alert(bla);
});

When I click on the Validate Data button, the page responds with an alert and then reloads the page passing the information from the test field with it in the following format: 

http://enunua.com/emarps/main.php?trial_data=TRIAL+DATA+PLEASE+ALERT&trial_submit=Validate+Data

How can I prevent the reload of the page?

Upvotes: 0

Views: 66

Answers (5)

Nagarajan A
Nagarajan A

Reputation: 89

use attr onsubmit in form tag.

<form class="trial_form" id="trial_form" onsubmit="return false"> <input type="text" value="TRIAL DATA PLEASE ALERT" id="trial_data" name="trial_data" class="trial_data"/> <input type="submit" name="trial_submit" id="trial_submit" class="trial_submit" value="Validate Data"/> </form>

Upvotes: 0

Jakir Hossain
Jakir Hossain

Reputation: 2517

using return false

$('#trial_submit').click(function () {
  alert('CLICKED!!!!');
  alert('Alert!!');
  var bla = $('#trial_data').val();
  alert(bla);

  return false;
});

Upvotes: 0

Vaibs_Cool
Vaibs_Cool

Reputation: 6156

$('#trial_submit').click(function (e) {
    e.preventDefault();
            alert('CLICKED!!!!');
            alert('Alert!!');
            var bla = $('#trial_data').val();
            alert(bla);
        });

Fiddle

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

Use event.preventDefault(). It is used to prevents the default action and trigger your event

$('#trial_submit').click(function (event) {
    event.preventDefault();
    alert('CLICKED!!!!');
    alert('Alert!!');
    var bla = $('#trial_data').val();
    alert(bla);
 });

Upvotes: 0

Tushar
Tushar

Reputation: 87203

Use event.preventDefault() or return false in event handler to stop form submission.

If this method is called, the default action of the event will not be triggered.

$('#trial_submit').click(function(e) {
    e.preventDefault(); // Stop form submission

    alert('CLICKED!!!!');
    alert('Alert!!');
    var bla = $('#trial_data').val();
    alert(bla);
});

Using return false:

$('#trial_submit').click(function(e) {
    alert('CLICKED!!!!');
    alert('Alert!!');
    var bla = $('#trial_data').val();
    alert(bla);

    return false; // Stop form submission
});

Upvotes: 4

Related Questions