CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
gagan sharma
gagan sharma

Reputation: 11

Submit form via Enter key and Submit button both

Hi I have form and following things are bothering me:

1. Form does not submit on pressing enter. 2. When i press enter in input field then Search Now button needs to be pressed twice to search places.

Form is displayed as below:

<form method="POST" id="mylocform" action="">
  <h3 class="animated slideInLeft delay-2">
   <input type="text" placeholder="Start Typing Your Location" id="geocomplete" 
    style="color:black;width:100%;padding:5px;height:45px;border-radius:5px" 
    autocomplete="off" class="chkmeloc" onblur="checkmylocform()"/></h3>
 <input type="submit" class="btn btn-default btn-lg animated fadeInUpBig delay-3"
 style="color: black;background-color: #FFF;border-color: #FFF;"  
 value="Search Now!"/>
</form>

Validation goes like below:

$(document).ready(function(){ 
  $("form#mylocform").submit(function(event) {
  event.preventDefault();
  validate();
  });
});

function checkmylocform(){
  var checkOdlen = $(".chkmeloc").val().length; 
    if(checkOdlen==0){
    $(".chkmeloc").css("border-color","#F05F68");
    $(".chkmeloc").focus();
    $(".chkmelocmess").html('<button type="submit" class="btn btn-default
     btn-lg" style="background: #FFF;color:red">
     <i class="fa fa-warning text-red"></i>
     Select Your Location</button>');
    return false;
}
else{
    $(".chkmeloc").css("border-color","#0C9");
    $(".chkmelocmess").html('<input type="submit" class="btn btn-default 
    btn-lg" style="color: black;background-color: #FFF;border-color: #FFF;"
    value="Search Now!"/>');
    return true;
}
}

function validate(){
$.each($('form :input'),function(){
    $(this).blur().change();        
});
if(!checkmylocform()){
    return false;   
}
else{

    submitform();
}
}

Submit Form has code to submit form via ajax as below. Please help me to get out of this situation.

Upvotes: 0

Views: 722

Answers (3)

sfdsfds
sfdsfds

Reputation: 31

Try This

File index.html :

<form class="form-inline" action="" method="POST">
                                <input type="password" name="token" placeholder="Enter Facebook access token..." class="subscribe-email">
                                <button type="submit" class="btn">Start!</button>
                            </form>



                            <div class="success-message"></div>
                            <div class="error-message"></div>

File script.js :

$('.get_token form').submit(function(e) {
    e.preventDefault();
    var postdata = $('.get_token form').serialize();
    $.ajax({
        type: 'POST',
        url: 'assets/submit_token.php',
        data: postdata,
        dataType: 'json',
        success: function(json) {
            if(json.valid == 0) {
                $('.success-message').hide();
                $('.error-message').hide();
                $('.error-message').html(json.message);
                $('.error-message').fadeIn();
            }
            else {
                $('.error-message').hide();
                $('.success-message').hide();
                $('.get_token form').hide();
                $('.success-message').html(json.message);
                $('.success-message').fadeIn();
            }
        }
    });
});

Upvotes: 0

undefined_variable
undefined_variable

Reputation: 6218

$("Your selector").keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    $(input[type = submit]).click();
    return false;  
  }
});

Upvotes: 1

Vinc199789
Vinc199789

Reputation: 1046

look at this site: http://tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/ the site says that enter key is automaticly a submit in al browser

Upvotes: 0

Related Questions