Question

我的网站上有以下表格。它很简单，只有一个搜索输入字段和一个提交按钮：

<form id="search-form" name="search-form" onsubmit="return search()">
  <input type="search" id="query" class="search-field" value="<?php echo $searchQuery;?>">
  <input type="submit" name="search-btn" id="search-btn" value="">
</form>

正如您所看到的，在搜索字段（id=query）中，我有一个php，有时会在其字段中插入值。

我想要做的是：

如果$searchQuery不存在（换句话说，如果搜索的价值字段id=query为空，允许用户单击搜索按钮手动。
如果存在$searchQuery，请自动提交表单（模拟点击搜索按钮。

任何解决方案都有助于JavaScript，jQuery或PHP。我只需要弄清楚当PHP变量$searchQuery存在时如何自动提交此表单。

Answer 1

我相信你是专门询问初始页面加载的。使用jQuery：

$(document).ready(function() {
   if ($('#query').val() !== '') {
      $('#search-form').submit();
   }
});

Answer 2

您需要查看该值是否已填充，如果是，则提交表单。

jQuery版本：

$( function() {
    if ( $( '#query' ).val() !== '' ) {
        $( '#search-form' ).submit();
    }
});

小提琴：https://jsfiddle.net/fe9m8pk3/

Javascript版：

function ready( fn ) {
    if ( document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading' ) {
      fn();
    } else {
      document.addEventListener( 'DOMContentLoaded', fn );
    }
}

ready( function() {
    if ( document.getElementById( 'query' ).value != '' ) {
        document.getElementById( 'search-form' ).submit();
    }
});

小提琴：https://jsfiddle.net/qeo25yu1/

Answer 3

<script type="javascript/text">
var query = document.getElementById('query');
if(query.value != ''){
    //do your submit
}
function yoursubmitfunctionname(){
    //do your submit
}
query.addEventListener('change',yoursubmitfunctionname);
</script>

Answer 4

如果字符长度最小化使用Jquery：

，则此代码将提交表单

$(document).ready(function ()
{
    var minimum_character = 7;

    $('#query').on('propertychange input', function (e)
    {
        var valueChanged = false;

        if(e.type=='propertychange')
        {
            valueChanged = e.originalEvent.propertyName=='value';
        }
        else
        {
            valueChanged = true;
        }

        if(valueChanged)
        {
            str_length = $('#query').val().length;
            if(str_length == minimum_character)
            {
                $("#search-form").submit();
            }
        }
    });
});

如果输入字段值存在，如何自动提交表单？

4 个答案: