[merlinx88]

This is a working code, but i need a button for this search code of mine. i can search and press enter key after i search, but i want to put button and i dont know to to code it.

//the search box

Search: 
                    <input type="text" name="keyword" id="keyword" />
                    <input type="submit" name="submit" value="Go" />  

// code i try to use

  <form method="post"  action="">
                        Search: 
                        <input type="text" name="keyword" id="keyword" >
                        <input type="submit" name="submit" value="Search">
					</form>

// search script

$("#keyword").keypress( function(e) { if(e.which == 13) { var keyword = $(this).val(); var htmlText = ""; $("tr.evenClassStyle,tr.oddClassStyle").each( function(index, element) { var resultval = $(element).children("td:first").html(); if(resultval.indexOf(keyword)>-1){ htmlText += ""+$(element).html()+""; } }); $("#searchResult").html(htmlText); } });

please help, thanks a lot!

[Dormilich]

and what does that have to do with PHP? besides that, there is already a button in the form. but since you search in the current HTML, I don’t see what PHP (or even the form) is supposed to do.

if you just want to start the search from a button’s push, add an appropriate handler to it (and don’t use a submit button for that), like

$("#keyword").on("keypress", search_func_key);
$("#search_button").on("click", search_func_button);

This post has been edited by Dormilich: 30 December 2012 - 04:15 AM

[merlinx88]

@Dormilich

actually, the database is in php, but i think i post in the wrong section and i should post it in javascript. the search box is working fine, but i dont know how to make work the button.

thanks.

[Dormilich]

well, for starters your search function does not search your DB to begin with.


PS. I can move the thread to the JS forum

[merlinx88]

please move if it would help me more, thanks, i just need to create another handle so i can create this button as what you have said, but i think im near with the solution, can you please elaborate more of this code: if you dont mind thanks

$("#keyword").on("keypress", search_func_key);

$("#search_button").on("click", search_func_button);

[Dormilich]

it means: on keypress event (of the text field) execute the keypress handler. on the click event of the button, execute the click handler. the difference between both handlers is minimal, essentially the only difference is that the keypress handler checks if the enter key was pressed. otherwise, both handlers can use the same search function (body). and since writing it out for both cases is bad practice, the use of functions is necessary (though I wanted to leave some work for you to learn on).

[merlinx88]

what i add in the javascript is this:

$("#btn").click(function(){						$("#keyword").keypress();	});

what i did to search box:

1.this search box and press enter, but still go button not working

Search: <input type="text" name="keyword" id="keyword"/> <button id="btn"> Go </button>  

2. another search form i made but still not working

<form>   <fieldset>   <label for="keyword" >Search: </label>                    		<input id="keyword" name="keyword" type="text" /></fieldset>     </form>                                            	<button id="btn"> 	Find 	</button>  

hoping am almost there to the answer thanks a lot

[merlinx88]

as follow up, no. 1 search box is still working and provide results, but the button i cant make it to work. tnx

[Dormilich]

well, the click handler adds one more keypress handler and does nothing otherwise. besides that even if you used the keypress handler it would not work, since there is no enter key pressed (which the keypress handler explicitly tests).

hence you need a function that does the searching:

function search() {
    // search code comes here
    // replace "this" by the text field element
}

and then you use that function inside the two handlers:

// btw. the button should be a click button, not a submit button
$("#btn").on("click", search);

$("#keyword").on("keypress", function(evt) {
    // if the enter key is pressed
    if (13 === evt.which) {
        search();
    }
});

This post has been edited by Dormilich: 30 December 2012 - 05:36 PM
Reason for edit:: corrected target

[merlinx88]

thanks very much dormilich. til next time again.