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();
});
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>
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.
<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>
This code is working great, but I'd like to change it so it uses a drop-down menu choice instead of a checkbox. For example, the Dropdown menu choices for "More?" would be "yes" or "no". If "yes" is selected in the menu, I then want the hidden div to show just like it does when one checks the checkbox in the current code.
The javascript:
<script language="JavaScript">
function showhidefield()
{
if (document.frm.chkbox.checked)
{
document.getElementById("hideablearea").style.display = "block";
}
else
{
document.getElementById("hideablearea").style.display = "none";
}
}
</script>
And this is the HTML:
<form name='frm' action='nextpage.asp'>
<input type="checkbox" name="chkbox" onclick="showhidefield()">
Check/uncheck here to show/hide the other form fields
<br>
<div id='hideablearea' style='visibility:hidden;'>
<input type='text'><br>
<input type='submit'>
</div>
This is a text line below the hideable form fields.<br>
</form>
Thank you.
Replace your checkbox with
<select name="more" onchange="showhidefield()">
<option value="yes">Yes</option>
<option value="yes">Yes</option>
</select>
And replace the
if (document.frm.chkbox.checked)
in your showhidefield() function with
if (document.frm.more.value == 'yes')
<form name='frm' action='nextpage.asp'>
<select name="chkbox" onChange="showhidefield(this)">
<option value="0" selected="true">-Select-</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
Check/uncheck here to show/hide the other form fields
<br>
<div id='hideablearea' style='display:none;'>
<input type='text'><br>
<input type='submit'>
</div>
This is a text line below the hideable form fields.<br>
</form>
And javascript code is:
<script language="JavaScript">
function showhidefield(that)
{
if (that.value == 1)
{
document.getElementById("hideablearea").style.display = "block";
}
else
{
document.getElementById("hideablearea").style.display = "none";
}
}
</script>