I need to show the submit button on many forms on the same page only if one option from a select is selected.
I have:
<form id="1">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
and
<form id="2">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
so, I need to show the submit button only if an option of the select is selected
Thanks!!!
This a working example with you html http://jsfiddle.net/g188o5eg/
$('select').on('change', function(){
if($(this).val() != ''){
$(this).parent().find('input[type="submit"]').show();
} else {
$(this).parent().find('input[type="submit"]').hide();
}
});
It will work with all forms on your site :)
Try something like this (would work with multiple select boxes (uses the nearest submit):
<form>
<input type="text">
<select class="select">
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit" class="submitbutton">
<script type="text/javascript">
$('.submitbutton').hide();
$('.select').click(function() {
$(this).closest('.submitbutton').show();
});
</script>
Related
I have a dropdown list which runs the javascript function printResult when the default selection is changed:
<form action="">
<select name="list" onChange="printResult();">
<option value="1"> Option 1</option>
<option value="2" selected> Option 2</option>
<option value="3"> Option 3</option>
</select>
</form>
I would like the form to submit the option that is selected as default when the page loads, as well as when another option is selected. All tutorials I can find only cover onchange, rather than what I want.
Is this possible?
if you want to call a function on page load do this:
<body onload="printResult();">
<form action="">
<select name="list" onChange="printResult();">
<option value="1"> Option 1</option>
<option value="2" selected> Option 2</option>
<option value="3"> Option 3</option>
</select>
</form>
</body>
or in jquery you can postpone the load function anywhere in the page :
$(window).on("load",function(){ printResult(); })
or on document ready:
$(document).ready(function(){printResult();})
Say we have the following:
<select name="select" required>
<option disabled selected value>Please Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<button type="submit" name="submit">Submit</button>
I would like this field to be required but I do not want to allow the user to submit the first option (<option disabled selected value>Please Select Option</option>)
By default, the first option (<option disabled selected value>Please Select Option</option>) should be selected until the user changes the option.
I've tried doing Googling this problem but I'm only able to find different problems but not this particular one. My thoughts is that it would have to use Javascript to accomplish this but I would like to use an HTML option before going that route.
Thank you for help!
<select>
<option selected="true" style="display:none;">Select language</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
Using JS
$("#clickButton").click(function (event) {
var picked = $('#selector option:selected').val();
if (picked == 0) {
alert("Please select any value");
} else {
console.log("Selected")
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selector" name="select" required>
<option disabled selected value="0">Select</option>
<option>Data 1</option>
<option>Data 2</option>
<option>Data 3</option>
</select>
<button id="clickButton" type="submit" name="submit">Submit</button>
Much more complicated than the awesome witchcraft #Mr. HK showed, but another approach:
HTML:
<select id="selector" name="select" required>
<option disabled selected value="0">Please Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<button id="mainButton" type="submit" name="submit">Submit</button>
JS:
$("#mainButton").click(function(event) {
var picked = $('#selector option:selected').val();
if (picked == 0){
alert("you must pick an option")
}
else{
//do whatever
}
})
See here: http://jsfiddle.net/ShL4T/105/
if you do not mind using php or javascript to validate the input of the select. tag.
here is a simple javascript verification:
function verify(){
var somevar = document.getElementById("select").value;
if(somevar == 'Please Select Option'){
document.getElementById("message").innerHTML = 'Invalid Choice, Please choose Option 1, 2, or 3';
}else{
//do whatever you want to do
}
}
<p id="message"></p>
<select name="select" id="select" required>
<option disabled selected>Please Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<button type="submit" onclick="verify()" name="submit">Submit</button>
<form>
<select name="select" required>
<option disabled selected value>Please Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<button type="submit" name="submit">Submit</button>
</form>
<select id="option" name="select" required>
<option disabled selected value="0">Please Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
I have a DIV with two dropdown(maindd and subdd) and an ADD button in a seperate DIV. If i click ADD button i am generating another div with similar two dropdown which have same value(like maindd and subdd). If i click ADD button again, Again i am generating a div with two dropdown(Name maindd and subdd). Like that how many times i want, i can click the ADD button and add a DIV with two dropdowns.
The question is, if i change the first DIV first dropdown (maindd)value, i need to show the corresponding dropdown(subdd) which is present in the same div not on the other DIV. Similarly for second DIV dropdown change, i need to show its corresponding second DIV second dropdown.
Note: By default all the second dropdown(subdd) is set to "display:none;" through CSS. I am using JQUERY.
Code:
<div id="container">
<div class="records">
<select class="recordnumber" name="maindd">
<option value="first">first</option>
<option value="second">second</option>
<option value="other">other</option>
</select>
<select class="othertype" name="subdd">
<option value="one">One</option>
</select>
</div>
<div><input type="button>Add Row</button>
<div class="records">
<select class="recordnumber" name="maindd">
<option value="first">first</option>
<option value="second">second</option>
<option value="other">other</option>
</select>
<select class="othertype" name="subdd">
<option value="one">One</option>
</select>
</div>
<div><input type="button>Add Row</button>
</div>
Tried This:
$(document).ready(function(){
$(".recordnumber").on("change",function(){
if ( this.value == 'other')
{
$(this).siblings(".othertype").show();
}
else
{
if(this.value != 'other')
{
$(this).siblings(".othertype").hide();
}
}
});
});
Is this the right approach to do it?
Try this code may be useful that you want
$(".recordnumber").on("change",function(){
$(".othertype").hide();
$(this).siblings(".othertype").show();
});
DEMO
check below code it may help for you
$(".recordnumber").on("change",function(){
$(this).siblings(".othertype").css("display", "block");
});
.othertype{
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
<div class="records">
<select class="recordnumber" name="maindd">
<option value="first">first</option>
<option value="second">second</option>
<option value="other">other</option>
</select>
<select class="othertype" name="subdd">
<option value="one">One</option>
</select>
<input type="button" value="Add Row" />
</div>
<div class="records">
<select class="recordnumber" name="maindd">
<option value="first">first</option>
<option value="second">second</option>
<option value="other">other</option>
</select>
<select class="othertype" name="subdd">
<option value="one">One</option>
</select>
<input type="button" value="Add Row" />
</div>
</div>
I have many dropdowns, when I click the button I want it to look up the select option that is selected and alert me the text it says, like 'grape'.
It must use .closest, have tried many variations but cant seem to find it.....
<select name="div0" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" value="Edit Row">
<select name="div1" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" value="Edit Row" class="editrowbutton">
JQUERY (Nearest I can get)
$(document).on('click', '.editrowbutton', function() {
var thetext = $(this).closest('select').find('option:selected').text();
alert(thetext);
});
You are missing the class editrowbutton on your buttons in the example.
use .prev to get the previous element from target.
$(document).on('click', '.editrowbutton', function() {
var thetext = $(this).prev().find('option:selected').text();
alert(thetext);
});
http://jsfiddle.net/SeanWessell/wt00c2wu/
.closest looks up the tree at parents. Since the select is not a parent you will not return anything.
If you wanted to search the siblings you can use prev('selector') or next('selector') as well.
https://api.jquery.com/category/traversing/tree-traversal/
You can also use the data-* attribute, preventing DOM position mistakes.
$(function(){
$(document).on("click",'.editrowbutton',function(){
var target = $(this).data("select");
alert($('select[name='+target+'] option:selected').text())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="div0" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" data-select="div0" class="editrowbutton" value="Edit Row">
<select name="div1" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" data-select="div1" class="editrowbutton" value="Edit Row">
I have a simple HTML form that is posting to a URL like this...
<form>
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input class="textinput1" type="text"></input>
<input class="textinput2" type="text"></input>
<input class="textinput2" type="text"></input>
</form>
This generates a URL like this www.example.com/?option_dropdown=option1 when submitted, it does not include the text input boxes as they do not have a name attatched to them.
What I would like to do is add some logic to the text inputs that will choose one depending on its content and then include that parameter when the form is submitted.
Is javascript the way to achieve this?
You ask for javascript way so you can try this.
In order to identify 3 textboxes i've given id's to them.
<form>
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input class="textinput1" id='txt1' type="text"></input>
<input class="textinput2" id='txt2' type="text"></input>
<input class="textinput2" id='txt3' type="text"></input>
<input type='submit' id='submit'>
</form>
on submitting this form script will add name property to any of the 3 text boxes based on a logic of yours. so only that textbox content will be submitted.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* Any logic which select the textbox to be submitted */
id='txt1'; // it can be txt2 or txt3
$("#submit").click(function(){
$("#"+id).attr("name","text");
});
});
</script>
1.Create a PHP file in the same directory as the html.
2.Edit your form to point to that php file and name your text fields so you could refer to them.
<form method="post" action="formTester.php">
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input name="textinput1" class="textinput1" type="text"></input>
<input name="textinput2" class="textinput2" type="text"></input>
<input name="textinput3" class="textinput2" type="text"></input>
</form>
3. In your file formTester.php
<?php
// define variables and and get data from the text fields
$text1= $_POST["textinput1"];
$text2= $_POST["textinput2"];
$text3= $_POST["textinput3"];
// Now you can manipulate the data however you want ..add it to database, trim, validate etc
?>
Hope it helps,
Best
<form>
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input type="text" class="textinput1" name="textinput[]" value="input1" />
<input type="text" class="textinput2" name="textinput[]" value="input2" />
<input type="text" class="textinput3" name="textinput[]" value="input3" />
</form>
One option is to stack your values in an array and parse it on the backend. This removes the need for JavaScript.
<form>
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input type="text" class="textinput1" name="textinput[]"></input>
<input type="text" class="textinput2" name="textinput[]"></input>
<input type="text" class="textinput3" name="textinput[]"></input>
</form>