2014-09-25 1 views
0

Я пытаюсь создать всплывающее сообщение с подтверждением при отправке формы с помощью плагина bootbox. Проблема в том, что я не знаю, как выбрать кнопку внутри тега формы. В приведенном ниже примере сообщение подтверждения работает для кнопки вне тега формы, но не для внутренней. Как выбрать эту кнопку, заключенную внутри тега формы?Как выбрать кнопку внутри тега формы с помощью javascript?

<div class="bs-example"> 
<div class="col-md-4 col-md-offset-4"> 
<form action="#" method="POST"> 
    <div class="form-group"> 
     <input type="username" class="form-control" id="inputEmail" placeholder="Username"> 
    </div> 
    <div class="form-group"> 
     <input type="email" class="form-control" id="inputEmail" placeholder="Email"> 
    </div> 
    <div class="form-group"> 
     <input type="password" class="form-control" id="inputPassword" placeholder="Password"> 
    </div> 
    <div class="form-group"> 
     <input type="password" class="form-control" id="inputPassword" placeholder="Repeat password"> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox"> Remember me</label> 
    </div> 
      <button class='btn btn-signup btn-signup-sm' type="submit">Sign up</button> 
</form> 
</div> 
</div> 

<button class='btn btn-signup btn-signup-sm' type="submit">Sign up</button> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$('.btn').on('click', function(){ 
    bootbox.alert("hello there"); 
}); 
}); 
</script 
+0

'$ (» form .btn ') '? –

+1

Проблема не в том, что обе кнопки не имеют обработчика onclick, а форма отправляется, и страница перезагружается. – Teemu

ответ

1

Изменить Javascript код:

<script type="text/javascript"> 
$(document).ready(function(){ 
$('.btn').on('click', function(e){ 
    e.preventDefault();   // this line is key to preventing page reload 
           // when user clicks submit button inside form 
    bootbox.alert("hello there"); 
}); 
}); 
</script> 
1

Почему бы вам не поймать событие отправки формы?

Дайте вашу форму идентификатор как "<form method="POST" id="my_form">...</form>"

и использования:

$('#my_form').submit(function(){ 
    bootbox.alert("hello there"); 
}); 

Взгляните на свой fiddle here!