Question

我目前正在使用Yii2中的网络应用，我在模型中构建了以下表单：

_formConnectModal.php

<div class="modal fade" id="connect-workflow-step-modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Connect this step</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form id="connect-form" action="/index.php?r=mainworkflows%2Fview&amp;id=<?= $mwf_id ?>" method="post">
        <div class="modal-body">
          <div class="mainsteps-form">

            <div class="col-sm-12">
              <div class="form-group field-mainworkflows-step-name required">
                <label class="control-label" for="mainworkflows-step-name">Output</label>
                <select id="mainworkflows-step-name-dropdown" class="form-control" name="" aria-required="true">
                                    </select>

                <div class="help-block"></div>
              </div>
            </div>
            <div class="col-sm-12">
              <div class="form-group field-mainworkflows-step-target required">
                <label class="control-label" for="mainworkflows-step-target">Output</label>
                <select id="mainworkflows-step-target-dropdown" class="form-control" name="" aria-required="true">
                                        <?php
                                            foreach ($mainstepsArray as $key => $value) {
                                                print "<option value='". $key ."'>".$value."</option>";
                                            }
                                        ?>
                                    </select>

                <div class="help-block"></div>
              </div>

            </div>
            <div class="col-sm-12">
              <input type="hidden" id="mainsteps-mst_mwf_id" class="form-control" name="Mainsteps[mst_mwf_id]" value="<?= $mwf_id ?>">
              <input type="hidden" name="Mainsteps[newRecord]" value="">
              <input type="hidden" id="mst_number" name="Mainsteps[mst_number]" value="">
              <input type="hidden" id="mst_name" name="Mainsteps[mst_name]" value="">
              <input type="hidden" id="mst_logicblock_id" name="Mainsteps[mst_lbk_id]" value="">
              <input type="hidden" id="old_mst_id" name="Mainsteps[old_mst_id]" value="">
              <input type="hidden" id="mainworkflows-mst_exit1" name="Mainsteps[mst_exit1]" value="0">
              <input type="hidden" id="mainworkflows-mst_exit2" name="Mainsteps[mst_exit2]" value="0">
              <input type="hidden" id="mainworkflows-mst_exit3" name="Mainsteps[mst_exit3]" value="0">
              <input type="hidden" id="mainworkflows-mst_exit4" name="Mainsteps[mst_exit4]" value="0">
              <input type="hidden" id="mainworkflows-mst_exit5" name="Mainsteps[mst_exit5]" value="0">
              <input type="hidden" id="mainworkflows-mst_exit6" name="Mainsteps[mst_exit6]" value="0">
              <input type="hidden" id="mainsteps-mst_data1" class="form-control" name="Mainsteps[mst_data1]" value="">
              <input type="hidden" id="mainsteps-mst_data2" class="form-control" name="Mainsteps[mst_data2]" value="">
              <input type="hidden" name="_csrf" value="<?=Yii::$app->request->getCsrfToken()?>" />
            </div>


          </div>
        </div>
        <div class="modal-footer">
          <div class="form-group">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <?= Html::submitButton(Yii::t('app', 'Update'), ['class' => 'btn btn-primary']) ?>
              <!-- <button id="update-connection-button" type="submit" class="btn btn-primary">Update</button> -->
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

在表单提交之前，我需要根据下拉列表中的选择更新一堆字段（mainworkflows-mst_exit1到mainworkflows-mst_exit6）。

我已经使用了以下代码，但现在似乎jQuery绑定没有成功。

$('#connect-form').submit(function(e) {

// Convert output selection to the hidden 6 steps in the form
$('#connect-workflow-step-modal #mainworkflows-step-name-dropdown option:selected').each(function() {
    var target_step = $('#mainworkflows-step-target-dropdown').val();
    console.log('target_step:', target_step);

    $('#mainworkflows-mst_exit' + $(this).val() ).val(target_step);
});

console.log($(this).serializeArray());

return false; // Set to false while I debug
 });

即使我直接在控制台中插入jQuery，我也没有错误，但是当表单提交时，它不会触发javascript。它只是提交。没有约束力。

总结：

我有一个表单继续提交，即使有一个jQuery事件处理程序，它明确指出＆＃39; return false ＆＃39;。

我还尝试通过将提交按钮更改为常规按钮来定位点击事件，但之后我无法在jQuery.submit()之后触发表单提交;

Answer 1

这是因为Yii2的Active Form javascript library为你提供了它所监听的表单绑定的事件。

可用事件是：

beforeValidate。
afterValidate。
beforeValidateAttribute。
afterValidateAttribute。
beforeSubmit。
ajaxBeforeSend。
ajaxComplete。

使用事件

$('#contact-form').on('beforeSubmit', function (e) {

    //do your checks and if fail return false

    if (!confirm("Everything is correct. Submit?")) {
        return false;
    }

    //return true if all good 
    return true;
});

因此，在您的情况下，您应该使用 beforeSubmit 事件

$('#connect-form').on('beforeSubmit',function(){
///do all your stuff
})

jQuery绑定不能以这种特定形式工作

1 个答案:

可用事件是：

使用事件