如何檢查輸入值是否存在以及值是否存在提交表單？ jQuery的

Question

我有一個名為sub_category的空輸入，當用戶點擊href鏈接時會填充該輸入。 我需要檢查sub_category輸入中是否存在值，以及是否提交了表單。 我的代碼是：

<div class="multi-dropdown-list-1">
    <ul class="multi-dropdown-list">
        <li>
            <a href="#" class="ico-media" data-category="Accommodation" data-tag="none">
                Accommodation
                <i class="socialbakers-icons-before" data-icons-before="&#xe648;"></i>
            </a>
        </li>
    </ul>
</div>

<form accept-charset="UTF-8" action="{{ route('data_checker') }}" id="industry_form" name="industry_form" method="post" type="hidden">
    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
    <input id="sub_category" type="text" name="sub_category" />
    <input id="tags" type="text" name="tags" />
</form>

和我的jQuery

<script type="text/javascript">
    // function when click input fill value
    $('.multi-dropdown-list-1 a').click(function () {
        var value = $(this).data('category');
        var value2 = $(this).data('tag');
        var input = $('#sub_category');
        var input2 = $('#tags');
        input.val(value);
        input2.val(value2);
    });

    // check for value and if it exists submit form
    $('#sub_category').bind('input', function () {
        $("#industry_form").submit();
    });
</script>

sub_category中的值正在填寫正確。 但隨后該表單不提交。

Answer 1

除了在jQuery不推薦使用bind() （使用on() ）。 如果使用javascript更改值，則不會觸發input事件。 它僅在用戶輸入時觸發。

因此，您應該在設置我想要的值之后在要調用的函數調用中包裝“check if exists”：

警告：前面未經測試的代碼。

$('.multi-dropdown-list-1 a').click(function () {
    var value = $(this).data('category');
    var value2 = $(this).data('tag');
    var input = $('#sub_category');
    var input2 = $('#tags');
    var oldValue = input.val();
    input.val(value);
    input2.val(value2);

    if(val !== oldValue) {
       onValueChanged();
    }
});

function onValueChanged() {
    $("#industry_form").submit();
}

Answer 2

添加input.trigger("input"); 在clcik事件結束時。

輸入事件僅在直接用戶交互后觸發，即; 當用戶在輸入中鍵入內容時，輸入將失去焦點。 使用val（）時，也可以手動觸發事件，它應該可以工作

這是工作代碼： http : //codepen.io/anon/pen/QNpxwz

完整的javascript應該是：

    // function when click input fill value
$('.multi-dropdown-list-1 a').click(function() {
  var value = $(this).data('category');
  var value2 = $(this).data('tag');
  var input = $('#sub_category');
  var input2 = $('#tags');
  input.val(value);
  input2.val(value2);
  input.trigger("change");
});

// check for value and if it exists submit form
$('#sub_category').on('change', function() {
  if ($(this).val() != "")
    $("#industry_form").submit();
});

Answer 3

一種解決方案是在將值輸入到輸入中之后，將觸發器置於主函數自身內部

$('.multi-dropdown-list-1 a').click(function() {
     var value = $(this).data('category');
     var value2 = $(this).data('tag');
     var input = $('#sub_category');
     var input2 = $('#tags');
     input.val(value);
     input2.val(value2);
     if (value != null){
        $("#industry_form").submit();
     }
});