Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
61
rated 0 times [  68] [ 7]  / answers: 1 / hits: 74319  / 11 Years ago, thu, october 10, 2013, 12:00:00

Here's my form that's in my modal window:



I have no close button and I have disabled the window from closing on pressing esc. I want to be able to submit the form data on pressing submit or on pressing the enter key.



<div class=modal hide fade id=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true data-backdrop=static data-keyboard=false>
<div class=modal-header>
<h3 id=myModalLabel>Enter your Credentials</h3>
</div>
<div class=modal-body>
<form id=login-form class=form-horizontal accept-charset=UTF-8 data-remote=true>
<div class=control-group>
<label class=control-label for=inputEmail>Email</label>
<div class=controls>
<input type=email id=email name=email value= placeholder=Email>
</div>
</div>
<div class=control-group>
<label class=control-label for=inputPassword>Password</label>
<div class=controls>
<input type=password id=passwd name=passwd value= placeholder=Password>
</div>
</div>
<div class=control-group>
<div class=controls>
<label class=checkbox>
<input type=checkbox> Remember me
</label>
<input type=submit id=login value=Loginclass=btn btn-primary />

</div>
</div>
</form>
</div>
</div>


Here's the script I'm using:



$(document).ready(function(){
$('#myModal').modal('show');
});

function submitLogin() {
$.ajax({
url:login_mysql.php,
type:'POST',
dataType:json,
data: $(#login-form).serialize()
}).done(function(data){
//do something
});
}

$('#passwd').keypress(function(e) {
if (e.which == '13') {
submitLogin();
}
});

$('#login').click(function(){
submitLogin();
});


On pressing enter after keying in my password or clicking on the submit button the same page reloads and the ajax script does not run. Could someone tell me if my script is clashing with the default settings of my modal window?


More From » jquery

 Answers
207

Listen to form submit event - it gets triggered by both enter and click events.



Markup



<form id=yourForm>
<input type=text name=username>
<input type=password name=password>
<input type=submit value=Submit>
</form>


JS



$('#yourForm').submit(function(event){

// prevent default browser behaviour
event.preventDefault();

//do stuff with your form here
...

});

[#75094] Wednesday, October 9, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
masonm

Total Points: 167
Total Questions: 87
Total Answers: 103

Location: Rwanda
Member since Wed, Jun 8, 2022
2 Years ago
masonm questions
;