I have two Selects with several options in html code:
<select name="t" id="t">
<option value="0">Overall</option>
<option value="1">t_name</option></select>
<select name="m" id="m">
<option value="0">back to Overall</option>
<option value="1">m_some</option></select>
And my question is how to force change value from first Select named "t" to "0" (Overall) only in the case when user chosen value "0" (back to Overall) in second Select named "m"? And submit form at the end.
--EDIT--
Now because of advices I tried do that in this way:
<script>
$(function(){
$('#m, #t').change(function(){
if($('#m').val() == '0')
$('#t').val('0').change();
$('form#myform').submit();
});
});
</script>
And this script submits the form everytime when I change Select "m" or "t", except situation when I change Select "m" to value "0" (script only changes "t" to "0" in correct way without submit). Why?
<html>
<body>
<form name="form1" id="form1">
<select id="t" name="t" onchange="this.form.submit();">
<option value="0">Overall</option>
<option value="1">t_name</option>
</select>
<select name="m" onchange="setposition(this.value)">
<option value="0">back to Overall</option>
<option value="1">m_some</option>
</select>
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
function setposition(svalue) {
if (svalue == "0") {
document.getElementById("t").options[1].selected = true;
}
}
</script>`enter code here`
You should be using ID's as below as they are easier on DOM searching.
<select name="t" id="t" onchange="this.form.submit();">
<option value="0">Overall</option>
<option value="1">t_name</option></select>
<select name="m" id="m" onchange="this.form.submit();">
<option value="0">back to Overall</option>
<option value="1">m_some</option></select>
<script>
$(function(){
$('#m, #t').change(function(){
//don't forget to trigger the change event
if($('#m').val() == '0')
$('#t').val('0').change();
$('form#form_id').submit();
});
});
</script>
You could do something like that:
$(function(){
$('[name="t"],[name="m"]').change(function(){
if($(this).attr('name')=='m') && $(this).val()=='0'){
$('[name="t"]').val('0');
}
$(this).closest('form').submit();
});
});
$('select[name="m"]').change(function() {
if($(this).val() == '0') {
$('select[name="t"]').val('0');
}
});
Besides that, you should use jQuery to set the onchange events instead of doing so via inline JS:
$('select[name="t"], select[name="m"]').change(function() {
$(this).closest('form').submit();
// if you do not need any jquery submit events,
// you can also use this.form.submit();
});
See http://jsfiddle.net/ThiefMaster/NfVQZ/ for a demo.
Related
I want to fire ajax on dropdown change or search button is clicked (not on change of words). How can I check it in one go becuase I don't want to check it seperately.
For example - If I had to check on change of dropdown and on change of search input, I would use the following script
jQuery(function($){
jQuery( ".js-category, .js-input" ).on( "change", function() {
});
});
But I want to check on either dropdown is changed or search button is pressed and I want to check it one go.
The easiest and cleanest would probably be using a named function. Then register the function as callback of two separate events.
function eventHandler(event) {
console.log("Hello World!");
}
jQuery("#dropdown").on("change", eventHandler);
jQuery("#button").on("click", eventHandler);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdown">
<option>foo</option>
<option>bar</option>
</select>
<button id="button" type="button">button</button>
try this
<select id="select">
<option>select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<button id="button" type="button">click me</button>
<script>
$('#button, #select').on('click change', function(e) {
if(e.type==='change' && this.id =='select' || e.type==='click' && this.id =='button') {
alert('select');
}
});
</script>
You can wrap dropdown and button into the form and listen for submit (search button was clicked) and for change (dropdown selection was changed) events. Don't forget to prevent default submit behaviour in order to avoid unwanted redirections.
$("#js-form").on("change submit", (e) => {
e.preventDefault()
$("#test").html($("#test").html() + 0)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="js-form">
<select>
<option>1</option>
<option>2</option>
</select>
<input type="submit">
</form>
<div id="test">0</div>
I have a formula page where the dropdowns has a default value = 0.
I would like it to hide a div when the value is = 0, even when the page is loaded.
I believe i should use javascript, but should i use jQuery?
i tried with and without jQuery, but couldn't get my code to work.
This is the dropdown
<select class="products-dropdown" name="lease-product" id="sel-lease-product" onchange="hideDiv">
<option value="0"><?php _e('Select product', 'wp-woo-leasing'); ?></option>
This is the div i want to hide.
<div id="product-description" class="product-description"></div>
i tried this JS
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#sel-lease-product").change(function() {
if(jQuery(this).find("option:selected").val() == 0) {
jQuery(".product-description").hide();
}
});
});
</script>
and JS
function hideDiv(elem) {
if(elem.value == 0){
document.getElementById("product-description").style.display = "none";
} }
My whole code looks like this http://pastebin.com/WTFu3Hte
what am i doing wrong?
Try this code:
$(document).ready(function() {
$("#sel-lease-product").change(function() {
if($(this).val() === "0") {
$(".product-description").hide();
}else{
$(".product-description").show();
}
});
$("#sel-lease-product").change();
});
If you want execute the code when the page is load remember to run the event change your select
Result: https://jsfiddle.net/cmedina/mwz5udwz/
Invoke the change handler initially to achieve expected results on page load using jQuery.change().
jQuery.toggle could be used instead of using both jQuery.show and jQuery.hide
Note: Use either of JavaScript or jQuery, do not use them together!
$(document).ready(function() {
$("#sel-lease-product").change(function() {
$(".product-description").toggle(this.value != 0);
}).change();
//-^^^^^^^^
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select class="products-dropdown" name="lease-product" id="sel-lease-product">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div class="product-description">Content here....</div>
If you need to check the onchange() value that is from the select tag you can prefer two methods
Directly write the onchange() function to the select tag itself
Invoke the function with the help if select ID so that you can write the on change over to the script itself.
Method One:
HTML:
<select class="products-dropdown" name="lease-product" id="sel-lease-product" onchange="hide_function(this.value);">
<option value="">Please Select</option>
<option value="0">Zero</option>
<option value="1">One</option>
</select>
<div id="product-description" class="product-description">product-description</div>
JS:
function hide_function(a)
{
if(a=='0')
{
$('#product-description').hide();
}
else
{
$('#product-description').show();
}
}
Method Two:
Directly calling the on change function in the script file itself.
$(document).ready(function() {
$("#sel-lease-product").change(function() {
if($(this).val() === "0") {
$(".product-description").hide();
}else{
$(".product-description").show();
}
});
$("#sel-lease-product").change(); //Again invoking the change function on-load of the page
});
$(document).ready(function() {
$("#sel-lease-product").change(function() {
if($(this).val() == 0) {
$(".product-description").hide();
}else{
$(".product-description").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="products-dropdown" name="lease-product" id="sel-lease-product">
<option value="">select</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
<div id="product-description" class="product-description">Hide if 0</div>
Well your code will never reshow the value so you need to do if/else type of check. The nice thing is jQuery has it built in so you can just call toggle with a boolean.
Also there is not need to look for the selected option, val() will do that for you. And to make sure the element is in the correct state when the page loads, you want to trigger the change event.
$("#sel-lease-product").on("change", function() {
$(".product-description").toggle($(this).val() !== "0");
}).trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="sel-lease-product">
<option value="0">Pick</option>
<option value="1">FOO</option>
</select>
<div class="product-description">Description</div>
Try this :
$(document).ready(function() {
$("#sel-lease-product").on("change",function(){
if($(this).val() == 0) {
$(".product-description").hide();
}
}).change();
})
<select class="products-dropdown" name="lease-product" id="sel-lease-product">
<option value="1">1</option>
<option value="0">0</option>
</select>
<div id="product-description" class="product-description">product-description</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Here is my textbox
<input type="text" name="allowance" id="rs1"
class="form-control allowance1" placeholder="Allowance (Rs.)">
Here is my code for disable textbox
<script type="text/javascript">
$('.allowance1').attr('readonly', true);
</script>
While I Change dropdown value at that time I want textbox value.
$(".val").change(function() // this is dropdown class name
{
var a=$("#rs1").val();
alert(a);
}
I have some value in textbox and It returns undefined.
Since your demo code for input didn't have a value, I added one.
Here's a working code... and I don't see an issue with yours. Is this the expected behaviour?
You should probably check on the logic that changes the value of the input field. I have mocked it in the demo.
$('.allowance1').attr('readonly', true);
$(".val").on("change", function() {
alert($("#rs1").val())
});
$(".change-value").on("click", function() {
$("#rs1").val(Math.random());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="" class="val">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" name="allowance" id="rs1" value="asdf" class="form-control allowance1" placeholder="Allowance (Rs.)">
<button class="change-value">Change Input Value</button>
I guess you are trying to do like this.
HTML:
<input type="text" name="allowance" id="rs1" class="form-control allowance1" placeholder="Allowance (Rs.)">
<select class="val">
<option value"One">One</option>
<option value"Two">Two</option>
<option value"Three">Three</option>
</select>
JS:
$( ".val" ).change(function() {
$("#rs1").val("some text");
alert( $("#rs1").val());
});
working DEMO
This works for me. Instead of get the value on $("#rs1").on('keyup'... you have to do this on your dropdown change listener. You can check my demo
$("#rs1").on('keyup', function(){
var value = $("#rs1").val();
alert(value);
});
I hope it helps.
Make one function and fire it onChange of Dropdown
function gettextvalue()
{
var a= $("#l").val();///l is textbox id
alert(a);
}
I know this is simple, and I need to search in Google. I tried my best and I could not find a better solution. I have a form field, which takes some input and a select field, which has some values. It also has "Other" value.
What I want is:
If the user selects the 'Other' option, a text field to specify that 'Other' should be displayed. When a user selects another option (than 'Other') I want to hide it again. How can I perform that using JQuery?
This is my JSP code
<label for="db">Choose type</label>
<select name="dbType" id=dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
<div id="otherType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>
Now I want to show the DIV tag**(id="otherType")** only when the user selects Other.
I want to try JQuery. This is the code I tried
<script type="text/javascript"
src="jquery-ui-1.10.0/tests/jquery-1.9.0.js"></script>
<script src="jquery-ui-1.10.0/ui/jquery-ui.js"></script>
<script>
$('#dbType').change(function(){
selection = $('this').value();
switch(selection)
{
case 'other':
$('#otherType').show();
break;
case 'default':
$('#otherType').hide();
break;
}
});
</script>
But I am not able to get this. What should I do? Thanks
You have a few issues with your code:
you are missing an open quote on the id of the select element, so: <select name="dbType" id=dbType">
should be <select name="dbType" id="dbType">
$('this') should be $(this): there is no need for the quotes inside the paranthesis.
use .val() instead of .value() when you want to retrieve the value of an option
when u initialize "selection" do it with a var in front of it, unless you already have done it at the beggining of the function
try this:
$('#dbType').on('change',function(){
if( $(this).val()==="other"){
$("#otherType").show()
}
else{
$("#otherType").hide()
}
});
http://jsfiddle.net/ks6cv/
UPDATE for use with switch:
$('#dbType').on('change',function(){
var selection = $(this).val();
switch(selection){
case "other":
$("#otherType").show()
break;
default:
$("#otherType").hide()
}
});
UPDATE with links for jQuery and jQuery-UI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
Demo on JSFiddle
$(document).ready(function () {
toggleFields(); // call this first so we start out with the correct visibility depending on the selected form values
// this will call our toggleFields function every time the selection value of our other field changes
$("#dbType").change(function () {
toggleFields();
});
});
// this toggles the visibility of other server
function toggleFields() {
if ($("#dbType").val() === "other")
$("#otherServer").show();
else
$("#otherServer").hide();
}
HTML:
<p>Choose type</p>
<p>Server:
<select id="dbType" name="dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
</p>
<div id="otherServer">
<p>Server:
<input type="text" name="server_name" />
</p>
<p>Port:
<input type="text" name="port_no" />
</p>
</div>
<p align="center">
<input type="submit" value="Submit!" />
</p>
You have to use val() instead of value() and you have missed starting quote id=dbType" should be id="dbType"
Live Demo
Change
selection = $('this').value();
To
selection = $(this).val();
or
selection = this.value;
I got its answer. Here is my code
<label for="db">Choose type</label>
<select name="dbType" id=dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
<div id="other" class="selectDBType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>
And my script is
$(function() {
$('#dbType').change(function() {
$('.selectDBType').slideUp("slow");
$('#' + $(this).val()).slideDown("slow");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myfun(){
$(document).ready(function(){
$("#select").click(
function(){
var data=$("#select").val();
$("#disp").val(data);
});
});
}
</script>
</head>
<body>
<p>id <input type="text" name="user" id="disp"></p>
<select id="select" onclick="myfun()">
<option name="1"value="1">first</option>
<option name="2"value="2">second</option>
</select>
</body>
</html>
$('#dbType').change(function(){
var selection = $(this).val();
if(selection == 'other')
{
$('#otherType').show();
}
else
{
$('#otherType').hide();
}
});
I have written the below code. But it does not show me the alert message when I don't select the other value and click onto the submit button.
I don't want to use getElementbyId. I am using the name attribute of the HTML.
<HTML>
<HEAD>
<TITLE>ComboBox Validation</TITLE>
<script Language="JavaScript">
function validate()
{
if (document.comboForm.technology.value=="0") \
{
alert("Please Select Technology");
}
}
</script>
</HEAD>
<BODY>
<form name="comboForm">
<select name="technology">
<option value="0">Select</option>
<option value="1">Java Server Pages</option>
</select>
<input type="submit" value="submit" onClick="validate();">
</form>
</BODY>
</HTML>
I think you want:
if (document.forms["comboForm"].technology.value == "0")
But really, stop avoiding document.getElementById. That's the clearest, easiest way to deal with this:
<select id="ddTechnology" name="technology">
<option value="0">Select</option>
<option value="1">Java Server Pages</option>
</select>
if (document.getElementById("ddTechnology").value == "0")