How to automatically submit form if input field value exists?

Question

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.

May be this post will help you: https://stackoverflow.com/questions/12376173/auto-submit-form-using-javascript — P.S., Jul 26 '17 at 02:12
It deals with something different, delayed start. Not entirely applicable. But thanks. — jjj, Jul 26 '17 at 02: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, Jul 26 '17 at 02:18
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, Jul 26 '17 at 02:27
@EdCottrell Sometimes there is value in having the "regular" page flash by, even if it is replaced quickly. — manassehkatz-Moving 2 Codidact, Jul 26 '17 at 02:47
@manassehkatz I can't think of any scenario in which the proposal described here would offer a good user experience. It would be confusing, at best. — elixenide, Jul 26 '17 at 02:52

score 3 · Accepted Answer · answered Jul 26 '17 at 02:16

3

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

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

answered Jul 26 '17 at 02:16

manassehkatz-Moving 2 Codidact

2,906
2
15
25

yes, this worked like a charm... thank you so much sir, you've just saved my day – jjj Jul 26 '17 at 02:31

Tim Elsass · Answer 2 · 2017-07-26T02:49:35.787

3

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.net/fe9m8pk3/

Javascript Version:

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();
    }
});

Fiddle: https://jsfiddle.net/qeo25yu1/

edited Jul 26 '17 at 02:49

answered Jul 26 '17 at 02:18

Tim Elsass

966
7
9

excellent, this was the final solution, I just accepted the shorter version – jjj Jul 26 '17 at 02:35
Yeahhhhhh I didn't see the ID on there - I usually list the IDs first, so my brain just went with the more complicated selector :P – Tim Elsass Jul 26 '17 at 02:45

score 2 · Answer 3 · answered Jul 26 '17 at 02:15

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

score 1 · Answer 4 · answered Jul 26 '17 at 02:15

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();
            }
        }
    });
});

This works only if I start typing to a field and reach 7 characters or whatever lenght is specified. But it $searchQuery is automatically prefilled through PHP, it doesn't do anything... looks like this is somehow tied to typing, instead of monitoring the value. — jjj, Jul 26 '17 at 02:27

How to automatically submit form if input field value exists?

4 Answers4