javascript - How to automatically submit form if input field value exists? - Stack Overflow

admin管理员组

文章数量:1303519

I have the following form on my site. It's simple, one search input field and one submit button:

<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>           

As you can see, in the search field (id=query) I have a php which sometimes inserts value into his field.

What I want to do is following:

• If $searchQuery doesn't exist (or in other words, if value of search field id=query is empty, allow user to click on the search button manually.
• If $searchQuery exist, auto submit the the form (simulate click on the search button.

Any solution will help, JavaScript, jQuery or in PHP. I just need to figure out how to auto submit this form when PHP variable $searchQuery exists.

I have the following form on my site. It's simple, one search input field and one submit button:

<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>           

As you can see, in the search field (id=query) I have a php which sometimes inserts value into his field.

What I want to do is following:

• If $searchQuery doesn't exist (or in other words, if value of search field id=query is empty, allow user to click on the search button manually.
• If $searchQuery exist, auto submit the the form (simulate click on the search button.

Any solution will help, JavaScript, jQuery or in PHP. I just need to figure out how to auto submit this form when PHP variable $searchQuery exists.

• javascript
• php
• jquery

Share Improve this question Follow edited Jul 26, 2017 at 3:15 Francisco 11.5k66 gold badges3737 silver badges4646 bronze badges asked Jul 26, 2017 at 2:07 jjjjjj 2,67288 gold badges3939 silver badges6060 bronze badges 6

• 1 May be this post will help you: stackoverflow./questions/12376173/… – P.S. Commented Jul 26, 2017 at 2:12
• It deals with something different, delayed start. Not entirely applicable. But thanks. – jjj Commented Jul 26, 2017 at 2:14
• if the query value filled at the start, then will the form auto submit? since form action is not set it will redirect to the same page, beware of unlimited redirection – Baim Wrong Commented Jul 26, 2017 at 2:18
• 1 Why not just do a redirect or, even better, do whatever it is that you want to do with that value on this page? There's no point to rendering the form and trying to submit it instantaneously. – elixenide Commented Jul 26, 2017 at 2:27
• @EdCottrell Sometimes there is value in having the "regular" page flash by, even if it is replaced quickly. – manassehkatz-Moving 2 Codidact Commented Jul 26, 2017 at 2:47

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 3

I believe you are asking specifically on initial page load. Use jQuery:

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

You would need to just look to see if the value is populated and submit the form if it is.

jQuery Version:

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

Fiddle: https://jsfiddle/fe9m8pk3/

Javascript Version:

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

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

Fiddle: https://jsfiddle/qeo25yu1/

<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>

This code will submit form if character length minimum fullfiled using 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();
            }
        }
    });
});

本文标签： javascriptHow to automatically submit form if input field value existsStack Overflow