WordPress.org

Ready to get started?Download WordPress

Forums

Get value of textbox on button clik (2 posts)

  1. korabd
    Member
    Posted 1 year ago #

    So, I have a textfield and a button.
    On button click (or on enter) I want to get the value entered in textfield and add it after "product-tag/" and go to that url.

    For example, if value entered on textfield is "123"
    On button click (or on enter) I want to go to this url "www.website.com/product-tag/123"

    <form method="get" id="searchform" action="<?php  bloginfo('home'); ?>/product-tag/">
    <div>
    <input type="text" name="s"/>
    <input type="hidden" value="product" name="post_type" />
    <input type="submit" value="" id="barcode" class="btn" />
    </div>
    </form>
  2. Chris
    Member
    Posted 1 year ago #

    This won't be possible with pure HTML. Personally, I would implement a normal search and when a product tag (or site) for the search query has been found make a redirect (wp_redirect) to that nice looking URL of yours instead. Or you could use Javascript to achieve what you have in mind.

    <form method="get" id="searchform" action="<?php  bloginfo('home'); ?>/product-tag/">
     <div>
      <input type="text" name="s" id="searchform_query" /> <!-- Add an ID for the text input field -->
      <input type="submit" id="barcode" class="btn" />
     </div>
    </form>'
    [...]
    <script type="text/javascript">

    function customFormSubmission() {

    'use strict';

    window.location = document.getElementById('searchform').getAttribute('action') + document.getElementById('searchform_query').value;

    }

    document.getElementById('barcode').onclick = function() {

    'use strict';

    customFormSubmission();

    return false;

    };

    document.getElementById('searchform_query').onkeypress = function( e ) {

    'use strict';

    if( e === 'undefined' && window.event ) {
    e = window.event;
    }

    if ( e.keyCode === 13 ) {
    customFormSubmission();
    }

    };

    </script>`

    Thou you would rely on JS being enabled in the user's browser and still would have to create a fallback of some kind.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.