How to perform two different action by using two ID's of textbox using one same button

Question

In below textbox i have two different id's (ie 's' and 'primary-search-input') and only one button.

The first id(ie s) is a plugin id for performing search-suggestion work whenever the user enter any keyword he will get related suggestion. And second id(ie primary-search-input) for getting the search keyword result when the user click on a button.

In the above case both id's has different different tasks. when i put id='s' first and id='primary-search-input'second like below it will only perform first id action(ie get suggestion) and when i put id='primary-search-input' first and id='s'as a second position then it will only perform first id action(ie get keyword result on button click).

My query is that how i can perform both the action at the same time like when user type any text into textbox he will get suggestion and also same time he click on button get keyword result on button click.

<input name="s"  id="s" id="primary-search-input"  class="wide input" type="search" value="<?php if(isset($_GET['s']) && !isset($_GET['product'])) { echo sanitize_text_field(stripslashes(trim($_GET['s']))); } ?>" placeholder="<?php _e('I am shopping for...', 'framework')?>" />

<div id="primary-search-btn" class="medium primary btn"><a href="#"><i class="icon-search"></i></a></div>

Answer 1

You can't use multiple id in single input. From the XHTML 1.0 Spec

In XML, fragment identifiers are of type ID, and there can only be a single attribute of type ID per element. Therefore, in XHTML 1.0 the id attribute is defined to be of type ID. In order to ensure that XHTML 1.0 documents are well-structured XML documents, XHTML 1.0 documents MUST use the id attribute when defining fragment identifiers on the elements listed above. See the HTML Compatibility Guidelines for information on ensuring such anchors are backward compatible when serving XHTML documents as media type text/html.

You can only have one ID per element, but you can indeed have more than one class. But don't have multiple class attributes, put multiple class values into one attribute.

Answer 2

There can only be a single attribute of type ID per element. However you can use data-* attributes . The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.

You can have the HTML like this:

 <input name="s"  id="s" data-id="primary-search-input"  class="wide input" type="search" value="<?php if(isset($_GET['s']) && !isset($_GET['product'])) { echo sanitize_text_field(stripslashes(trim($_GET['s']))); } ?>"   placeholder="<?php _e('I am shopping for...', 'framework')?>" />

<div id="primary-search-btn" class="medium primary btn"><a href="#"><i class="icon-search"></i></a></div>   

Refer this link for better understanding.

Answer 3

You cannot use two id for an input. Id must be unique for a webpage. I think you should need to do some toggle programming like that -

<input type="button" id="s" value="" onclick="toggle()">
<script>

var flag = 0;
function toggle(){

    if(flag == 0){
        // do some work whatever you wanna do first
        flag=1;
    }else{
        // Do some task whatever you wanna do next
        flag = 0;
    }
}
</script>