Develop Reference

How to prevent searching when users type even a letter?

I have below form with input options and datalist no submit button. it is search bar that I created. I also have javaScript with onchange event to add href for option tags. The problem is, when users would like to search and type even a letter it starts searching. Users should fully type and than search engine should work. How do I prevent this?
$(document).ready(function() {
$("[list='serv']").on("input propertychange", function() {
window.location = $("#serv option[value='"+$("[list='serv']").val()+"']").find("a").attr("href")
});
});
<form class="search">
<input type="text" name="exx" list="serv" id="example">
<datalist id="serv">
<option value="google">google </option>
<option value="facebook">facebook</option>
</datalist>
</form>

Try this
document.getElementById("form").onSubmit=function(){
window.location.href = this.children[this.selectedIndex].getAttribute('href');
}
<form class="search" id="form">
<input type="text" name="exx" list="serv" id="example">
<input type="submit" style="display:none" value="Submit">
<datalist id="serv">
<option value="b">google </option>
<option value="z">facebook</option>
</datalist>
</form>

Html / javascript - Dropdown selection not working with Submit button

I am trying to using a dropdown and an input box and then submit both.
For some reason, it is not
function watchForm() {
$('.decisions').on('click', function(event) {
event.preventDefault;
const state = $('.js-query-states').val();
console.log(state)
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="decisions">
<select class="states js-query-states">
<option value="">Choose a state</option>
<option value="AL">Alabama</option>
</select><br><br>
<label for="number">How many</label>
<input type="input" name="number" id="number" value=5>
<input type="submit" value="Submit">
</form>

Few issues here:
You need to listen to the Form .submit() event instead of click().
Also, you are missing the parentheses () after event.preventDefault.
Also, it seems that the event handler is inside the watchForm() function, but it is not called anywhere. So, you can remove that function and add the .submit() event handler directly.
$('.decisions').submit(function(event) {
event.preventDefault();
const state = $('.js-query-states').val();
console.log(state)
const number = $('#number').val();
console.log(number)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="decisions">
<select class="states js-query-states" required>
<option value="">Choose a state</option>
<option value="AL">Alabama</option>
</select><br><br>
<label for="number">How many</label>
<input type="input" name="number" id="number" value=5>
<input type="submit" value="Submit">
</form>

It should be event.preventDefault() like Barmar said. Also it's good to have submit event for the form.

To submit the value of the "select" DOM element you must set the "name" attribute and then, "submit" button will include it when you clicked on it
<form class = "decisions">
<select class="states js-query-states" name="state">
<option value= "">Choose a state</option>
<option value= "AL">Alabama</option>
</select><br><br>
<label for= "number">How many</label>
<input type = "input" name = "number" id= "number" value = 5>
<input type="submit" value = "Submit">
</form>

The option selection in the Select box is not available

The option selection in the Select box is not available.I don't know what the cause is. If you check the value by notifying, the first option is "12. Selecting "36" also outputs "12"
<form action="{{ route('penpal.index', ['list'=>$list,'page' => $page]) }}" method="post">
#csrf
<select id="inputState" class="form-control" style="height:35px; width:80%" name="list" onchange="this.form.submit()">
<option value="12">#lang('penpal/component/indexMenu.twelve')</option>
<option value="24">#lang('penpal/component/indexMenu.twenty_four')</option>
<option value="36">#lang('penpal/component/indexMenu.thirty_six')</option>
</select>
</form>
alert($("#inputState").val());

nothing is wrong with your code. you just dont get the logic properly. here is a modify version of your code i wrote. if its of help to you, vote me. thanx
//the blade form. the javascript gets the value of the selected item, assign it to the input box and submit your form automatically.
<form action="{{ route('penpal.index', ['list'=>$list,'page' => $page]) }}" method="post" id="submitForm">
{{ csrf_field() }}
<select id="inputState" class="form-control" style="height:35px; width:80%" name="list">
<option value="">-Please Select-</option>
<option value="12">#lang('penpal/component/indexMenu.twelve')</option>
<option value="24">#lang('penpal/component/indexMenu.twenty_four')</option>
<option value="36">#lang('penpal/component/indexMenu.thirty_six')</option>
</select>
<input type="text" class="form-control" id="valueid" name="id" value="">
</form>
//javascript code
<script>
$(document).ready(function(){
$("#inputState").change(function(e){
var value= e.target.value;
//alert(value);
document.getElementById('valueid').value = value; //assign select value to input field.
$('#submitForm').submit(); //submit form
});
});
</script>

Passing parameters to JavaScript function from a form

I am having trouble trying to figure out how to do this. I want to, using fields in a form as variables call a JavaScript function.
I have this:
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
from an example but what I need is this, but doesn't work:
<form onsubmit="myFunction(this.num_cluster)">
Num. Cluster: <input type="text" id="num_cluster">
<input type="submit">
</form>
Cloud someone help me ? Thanks :)

Change id to name - after that you can access value of input field
function myFunction(form, event) {
event.preventDefault();
alert(form.num_cluster.value);
}
<form onsubmit="return myFunction(this, event)">
Num. Cluster: <input name="num_cluster" type="text">
<input type="submit">
</form>
As problem is little more interesting - we can extend our method onsubmit
function s(form, event) {
event.preventDefault();
var values = Array.prototype.slice.call(form.elements) // as form elements are not an array
.filter(function(element) {
return element.type !== 'submit'; // I don't need submit button
})
.map(function(element) {
return (element.name + ': ' + element.value); // get name and value for rest form inputs and assign them to values variable
});
alert('values => ' + values.join(', ')) // finish
}
<form onsubmit="return s(this, event)">
<p>Foo:
<input type="text" name='foo' />
</p>
<p>Bar:
<input type="text" name='bar' />
</p>
<p>Baz:
<select name='baz'>
<option value="lorem">lorem</option>
<option value="ipsum">ipsum</option>
</select>
</p>
<p>
<input type="submit" />
</p>
</form>

function myFunction(){
var value=document.getElementById("num_cluster").value;
/// value has the actual thing that you need
//... rest of your code
}
you can use this statement even in onsubmit event by directly writing java script there.

to make the button clicked when enter pressed

Here is my code:
<select name="category" id="category">
<option value="select" selected="selected" style="display:none;">--Select Search Category--</option>
<option value="Title">Book Title</option>
<option value="Subtitle">Book Subtitle</option>
<option value="BookAccessNumber">Book Access Number</option>
<option value="Author">Author</option>
<option value="Publisher">Publisher</option>
</select>
<input type="text" name="keyword" value="" id="keyword" />
<input type="button" value="Search" onClick="display(category.value,keyword.value)">
<br/><br/>
<div id="show_result">
</div>
In my code I get some input values , one from combo box and other from textbox and I'm having a button called search. What I done is if I click the button it will call a java script function called display(), which is used to display the results of search.
But I give the event as onClick, so it works only when I click the button. It doesn't work when I press enter.
What I need to do is, to make the function display() called even I hit "enter" too.

You can call the display method check this jsfiddle:
$("input").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
alert("call display method");
display();
}
});

http://jsfiddle.net/naeemshaikh27/cy84t4pz/1/
Use jquery trigger
function display(){
alert('hellow btn clicked');
}
$('.addButton').on('click', display);
$('body').on('keypress','input', function(e){
if (e.keyCode == 13) {
$('.addButton').trigger("click")
}
});

Wrap your input elements in a form and move the onclick handler to the onsubmit handler of the form.
<form onsubmit="alert('foo'); return false;">
<input type="text" />
<input type="submit" />
</form>

<input type="button" value="Search" onClick="display(category.value,keyword.value)" onKeyDown="if(arguments[0].KeyCode==13){display(category.value,keyword.value)}">

Move your input elements to a <form> and change your <input type="button"> to <input type="submit">. A form will treat the pressing of Enter key as clicking on the Submit button. So, the form will be processed.
Try this:
<form onsubmit="display(category.value,keyword.value)">
<select name="category" id="category">
<option value="select" selected="selected" style="display:none;">--Select Search Category--</option>
<option value="Title">Book Title</option>
<option value="Subtitle">Book Subtitle</option>
<option value="BookAccessNumber">Book Access Number</option>
<option value="Author">Author</option>
<option value="Publisher">Publisher</option>
</select>
<input type="text" name="keyword" value="" id="keyword" />
<input type="submit" value="Search" />
</form>
<br/><br/>
<div id="show_result">
</div>
Please note that display(category.value,keyword.value) is moved to the onsubmit attribute of the form.