CODEWITHSUNDEEP
javascriptjqueryhtmlajaxforms
MrKalius
MrKalius

Reputation: 51

Submit form without page reloading, and link to javascript

I have made a system that when you enter a specific value, it'll fade in values based on the selection.

I have this code here which is the main form where you can input the specific model numbers into the form and then press enter.

<form>
   <input type="text" name="ModNum" id="ModelNumber" pattern="^PIV13RT[23]?$"
 title="Your Model Number." placeholder="Please Input a Model number" size="35" maxlength="8">
   <center><span class="egsmall"><strong>Eg: PIV13RT, PIV13RT2, Ect.</strong></span></center>
   <center><div class="btnwrap"><input name="proceed" type="submit" class="submitsup" id="forward" /></div></center>
</form>

The problem is that when you press enter, because it's inside of a form, it reloads the page, which means that the fade in won't load because it's reloading the page.

$("#forward").click(function(){ 
$.ajax({
}).done(function() {
  $('.optionbk').fadeIn('slow');
});   
});

I realise that this can also be done with Javascript, but that wouldn't allow me to use a Form.

$("#forward").click(function(){ 
    var text = $("#ModelNumber").val();
    var comparingText = "PIV13RT";
    var comparingText2 = "PIV13RT2";
    var comparingText3 = "PIV13RT3";
    if (text == comparingText) {   
$('.optionbk').fadeIn('slow');
    }
        if (text == comparingText2) {   
$('.optionbk').fadeIn('slow');
    }
            if (text == comparingText3) {   
$('.optionbk').fadeIn('slow');
    }
});

Is there anyway that I can do it inside of a form, but make it so that the page doesn't reload itself so that the fade works instead of reloading. The form is needed because it is following that specific pattern. Please note that the form isn't linking to an external PHP file.

Upvotes: 1

Views: 243

Answers (2)

Armel Larcier
Armel Larcier

Reputation: 16027

You should bind your callback function to the submit event that the form dispatches and make it return false to cancel the actual submission.

$('form').bind('submit', function(){
    $.ajax();
    return false;
});

Upvotes: 3

ArtOfCode
ArtOfCode

Reputation: 5712

The quickest solution is to add onsubmit="return false" into your opening <form> tag.

Upvotes: 4

Related Questions