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.
Related
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>
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>
This question already has answers here:
How to prevent form from being submitted?
(11 answers)
Closed 5 years ago.
i want to stop reloading page when i don't choose category and click on submit button. can anybody help me?
function check() {
var select = document.getElementById("category").value;
if (select == -1) {
return alert("You didn't choose category !!!");
}
}
<form action="#" method="POST" id="form" name="form">
<select name="category" id="category">
<option value="-1">Select category</option>
<option value="1">News</option>
<option value="2">Sport</option>
<option value="3">World</option>
<option value="4">Music</option>
</select>
<input type="submit" value="submit" id="submit" name="submit" onclick="check();" />
</form>
You need to return false from the function to prevent the form from beeing submitted.
<input type="submit" value="submit" id="submit" name="submit" onclick="return check();" />
function check() {
var select = document.getElementById("category").value;
if (select == -1) {
alert("You didn't choose category !!!");
return false;
}
}
<form action="#" method="POST" id="form" name="form">
<select name="category" id="category">
<option value="-1">Select category</option>
<option value="1">News</option>
<option value="2">Sport</option>
<option value="3">World</option>
<option value="4">Music</option>
</select>
<input type="button" value="submit" id="submit" name="submit" onclick="check();" />
An alternative response is to set the type in "button" with this method you can check the state without reload the page.
And in the javascript if you want to send the submit you can put this code.
document.getElementById("form").submit();
Here there is an example https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_submit
I have simple form:
<form action="">
<select name="gender" onchange="myFunction()">
<option value="m">male</option>
<option value="f">female</option>
</select>
<input type="hidden" name="user_id" value="1">
<input type="submit" id="save1" value="Save">
</form>
<form action="">
<select name="gender" onchange="myFunction()">
<option value="m">male</option>
<option value="f">female</option>
</select>
<input type="hidden" name="user_id" value="2">
<input type="submit" id="save2" value="Save">
</form>
JS:
function myFunction() {
$("#save").first().hide();
}
I want to hide button "Save" only if select ('gender') have changed option for each user (form).
Problem is, that when I change gender for user 2, then button for user 1 hide.
Note: there are many forms and users
Try this:
$("select").change(function() {
$(this).parent("form").find("input[type='submit']").hide();
});
Try this:
$("select").on("change", function() {
$(this).parent().children('input[type=submit]').hide();
});
Working Fiddle
Or like this:
$('form>select').change(function(e){
$(e.currentTarget).siblings("input[type='submit']").hide();
});
You should use jquery, bind action on form and trigger on 'select' box, then use siblings to find the button inside that form.
Example :
$('form').on('change', 'select', function() {
var condition = ($(this).val() && $(this).val() != ""); // true : show button, false : hide button
$(this).siblings('input[type="submit"]').toggle(condition);
})
Try this :- FIDDLE
$("select").on("change",function () {
$(this).parent().find("input[type=submit]").hide();
});
<form id="check" action="." method="POST">
<input id="act" type="hidden" name="action"/>
<select id="blk">
<option value="blk">Bulk Actions</option>
<option value="tes">Active</option>
<option>Inactive</option>
<option>Delete</option>
</select>
<input type="submit" value="Submit" onclick="document.getElementById('act').value = 'document.getElementById('blk').selectedIndex.value'"/>
</form>
i want get the value by select tag and the value action will be change on input with name action as the value
You've mixed two concepts.
The select element has a value property that reflects the current selection
document.getElementById('blk').value
The select element has a list of options with values and a selectedIndex property that reflects the position of the current selection. Use it like this:
var sel = document.getElementById('blk');
if (sel.selectedIndex >= 0) // could be -1 as well
return sel.options[sel.selectedIndex].value
However, what you actually seem to want is
<form id="check" action="." method="POST">
<select name="action">
<option value="blk">Bulk Actions</option>
<option value="tes">Active</option>
<option>Inactive</option>
<option>Delete</option>
</select>
<input type="submit" value="Submit" />
</form>
You forgot the name of your select control, so no value would be posted. With it, you neither need a hidden input nor a click listener on the button (which should have been a onsubmit listener on the form as well).
try this
<form id="check" action="." method="POST">
<input id="act" type="hidden" name="action"/>
<select id="blk" onchange="javascript:CallMe(this.value)">
<option value="blk">Bulk Actions</option>
<option value="tes">Active</option>
<option>Inactive</option>
<option>Delete</option>
</select>
<input type="submit" value="Submit" onclick="document.getElementById('act').value = 'document.getElementById('blk').selectedIndex.value'"/>
</form>
<script>
function CallMe(String str)
{
alert(str+" : is the value selected , call the according action now");
}
</script>