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: stackoverflow.com/questions/12376173/… — P.S.
– P.S., Commented Jul 26, 2017 at 2:12
It deals with something different, delayed start. Not entirely applicable. But thanks. — jjj
– 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
– Baim Wrong, Commented Jul 26, 2017 at 2: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
– 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
– manassehkatz-Moving 2 Codidact, Commented Jul 26, 2017 at 2:47

manassehkatz-Moving 2 Codidact · Accepted Answer · 2017-07-26 02:16:56Z

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, 2017 at 2:16

manassehkatz-Moving 2 Codidact

3,0542 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jjj Over a year ago

yes, this worked like a charm... thank you so much sir, you've just saved my day

Tim Elsass · Accepted Answer · 2017-07-26 02:49:35Z

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, 2017 at 2:49

answered Jul 26, 2017 at 2:18

Tim Elsass

1,0068 silver badges9 bronze badges

2 Comments

jjj Over a year ago

excellent, this was the final solution, I just accepted the shorter version

Tim Elsass Over a year ago

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

mmmorgen · Accepted Answer · 2017-07-26 02:15:28Z

2

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

answered Jul 26, 2017 at 2:15

mmmorgen

615 bronze badges

Comments

Baim Wrong · Accepted Answer · 2017-07-26 02:15:42Z

1

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

answered Jul 26, 2017 at 2:15

Baim Wrong

4911 gold badge11 silver badges16 bronze badges

1 Comment

jjj Over a year ago

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.

Collectives™ on Stack Overflow

How to automatically submit form if input field value exists?

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related