Question

如果点击提交按钮，下面的HTML如何删除表单操作并显示警告？

HTML：

<div id="reservation-widget-content">
    <form class="resForm" action="https://www.thebookingbutton.com.au/properties" method="get">

        <button type="submit" id="submit-button">Check Availability</button>
    </form>
</div>

Answer 1

使用Javasrcipt

'onclick'是javascript中的事件，在单击元素时执行

 <div id="reservation-widget-content">
        <form class="resForm" action="" method="get">

            <button type="submit" id="submit-button" onclick="alert('Success')">Check Availability</button>
        </form>
    </div>

使用Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#submit-button").click(function(){
    alert("Success");
    return false;
});
});
</script>

return false会阻止页面在发出警报后重定向。

Answer 2

return false将阻止提交按钮的默认行为，并阻止事件通过DOM冒泡。

$('#submit-button').click(function(){

 alert('Submit button clicked !');
 return false;

});

JSFiddle

return false做了

的组合工作

event.preventDefault（）;
event.stopPropogation（）;

Answer 3

$('.resform').removeAttr('action').on('submit', function(e){
  e.preventDefault();
  alert('form submitted');
  // rest of the code
});

Answer 4

<div id="reservation-widget-content">
<form class="resForm" action="" method="get">
<button type="button" id="submit-button">Check Availability</button>
</form>
</div>

$('#submit-button').click(function(){
alert('Show something');
});

试试这个。将按钮类型更改为“按钮”（现在您正在使用“提交”。这将在单击按钮时提交表单。）

jQuery删除操作并显示警报

4 个答案: