Question

我有两个select boxes，每个都有自己的形式。我想要它，以便当用户更改表单提交的selectbox值时。我添加了一些控制台日志用于调试，看来，当我更改选择框时，只显示第一个控制台并且它从未超过提交，这使我相信有些问题，但我无法弄清楚是什么！ 我还想知道，对于帖子数据，我是否需要$(this).closest('form').serialize()而不是我现在拥有的数据。

$('#usr_vcm, #usr_ma').change(function(){
    console.log('change triggered');
    $(this).closest('form').submit(function() {
        console.log('submit closest done');
        $.ajax({
            type: "POST",
            url: $(this).closest('form').attr('action'),
            data: $(this).serialize(),
            success: function(data){
                alert(data + 'hello');                    
            }
        });

    });           
});

示例HTML

<form name="usr_vcm_frm" method="post" action="framework/AJAX/config_actions.php?config=view_create_modified" class="form-inline">
  <div class="controls docs-input-sizes">
    <select name="usr_vcm" class="select-ms" id="usr_vcm">
      <option value="1">Allow</option>
      <option value="0" <?php if ($row_config['usr_view_cm'] == '0') { echo 'selected'; } ?>>Do not allow</option>
    </select>
    <span style="margin-left:5px;">users to see the name of who created/modified a post</span> </div>
</form>
<form name="usr_ma_frm" method="post" action="framework/AJAX/config_actions.php?config=user_auto_active" class="form-inline">
  <div class="controls docs-input-sizes">
    <select name="usr_ma" class="select-ms" id="usr_ma">
      <option value="1">Allow</option>
      <option value="0" <?php if ($row_config['usr_auto_activ'] == '0') { echo 'selected'; } ?>>Do not allow</option>
    </select>
    <span style="margin-left:5px;">automatic activation of users after they complete the registration form <span class="error-color">(not recommended to allow)</span></span> </div>
</form>

Answer 1

试试这个：

 $('#usr_vcm, #usr_ma').change(function(){
        $.ajax({
            type: "POST",
            url: $(this).closest('form').attr('action'),
            data: $(this).closest('form').serialize(),
            success: function(data){
                alert(data + 'hello');                    
            }
        });

});

正在使用 Fiddle

Answer 2

在这里你绑定submit事件，而不仅仅是实际提交表单，我的意思是：

$(this).closest('form').submit(function() {...

提交表单，您必须在没有处理程序的情况下执行$(this).closest('form').submit();。

我会做这样的事情来处理表单提交：

    $('.form-inline').submit(function(event) {
        event.preventDefault();

        console.log('submit closest done');

        $.ajax({
            type: "POST",
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data){
                alert(data + 'hello');                    
            }
        });
    });

并在变更时提交表格：

$('#usr_vcm, #usr_ma').change(function(){
    $(this).closest('form').submit();
});

Answer 3

您正在定义在提交表单时要调用的事件处理程序，但从不实际提交表单。查看submit上的jQuery文档，了解方法签名的区别。而是定义“提交”＃39;你改变之外的处理程序＆＃39;处理程序，然后触发提交onchange：

$(function() {
    $('[name="usr_vcm_frm"], [name="usr_ma_frm"]').submit(function(e) {
        e.preventDefault();
        console.log('submit closest done');
        $.ajax({
            type: "POST",
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data){
                alert(data + 'hello');                    
            }
        });
    }); 

    $('#usr_vcm, #usr_ma').change(function(){
        console.log('change triggered');
        $(this).closest('form').submit();
    });
});

在更改时使用Jquery提交最接近的表单

3 个答案: