javascript - jquery确认表单提交

Question

我是 javascipt/jquery 的新手，我找不到使用提交“onchange”的选择表单来确认表单提交的方法。

当用户选择一个新时间时，我希望有一个提醒说，“更改时间将清空你的购物车，你想继续吗？”

然后用户可以选择“取消”更改或确认。

    <form id="hour_select" action="" method="POST" name="hour_form">
        {% csrf_token %}
        <select name="hour" onchange='hour_form.submit()'>
            <option {{selected1900}} value="1900">7:00 PM</option>
            <option {{selected2000}} value="2000">8:00 PM</option>
            <option {{selected2100}} value="2100">9:00 PM</option>
            <option {{selected2200}} value="2200">10:00 PM</option>
            <option {{selected2300}} value="2300">11:00 PM</option>
            <option {{selected2400}} value="2400">12:00 AM</option>
            <option {{selected100}} value="100">1:00 AM</option>
            <option {{selected200}} value="200">2:00 AM</option>
        </select>

        <input type="hidden" name="submit=" value="hour_change"/>

    </form>

Answer 1

onchange您可以使用 jQueryon方法代替使用属性：

$(document).ready(function(){
  $('select[name=hour]').on('change', function() {
     if (confirm("Changing the time will ....")) {
         $('#hour_select').submit()   
     } else {
         $('option:first', this).prop('selected', true)
     }
  })
})

另请注意，您应该将代码放在文档就绪处理程序中。

Answer 2

像这样放置您的代码，以便在加载时绑定事件：

 $(document).ready(function(){
     $('select[name=hour]').change(function(){
         if(confirm('Changing the time will empty your cart, do you wish to continue?')){
             $('#hour_select').submit();
         }
     });
 });

Answer 3

$('select[name=hour]').on('change', function(){
    var conf = confirm('Changing the time will empty your cart, do you wish to continue?');
    if(conf == true){
        hour_form.submit();
    }else{
        //do nothing, right?
    }
});