I'm wondering how I can chain an input box after chaining a selection in my form.
I'm using http://www.appelsiini.net/projects/chained to chain my selects and it works. However, I need to adjust this to also allow for the chaining of an input. In the below example it would be someone would choose an option such has an item has Strength on it then the select menu of value options then input the value. I'm trying to also incorporate into this where after those 3 options of item, controller, value are inputed the user has the option to filter more so another box appear with the same options of strength, agility, etc. http://jsfiddle.net/isherwood/XMx4Q/ is an example of work I used to incorporate this into my own work.
<form id="myform" name="myform" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<div>
<label for="searchterm">Name:</label>
<input type="text" name="searchterm">
</div>
<div>
<div class="chainedSelectFilter">
<select name="specificFilter" class="attribute">
<option value="" selected>Select a Filter</option>
<option value="strength">Has Strength</option>
<option value="agility">Has Agility</option>
<option value="spirit">Has Spirit</option>
<option value="stamina">Has Stamina</option>
</select>
<select name="specificFilter" class="valueController">
<option value=">" selected>></option>
<option value=">=">>=</option>
<option value="=">=</option>
<option value="<="><=</option>
<option value="<"><</option>
</select>
</div>
</div>
</div>
<div>
<label for="submit"></label>
<input type="submit" name="submit" value="Filter">
</div>
Code reference below shows how to accomplish this. Here is jsFiddle that shows it's working.
HTML
<form id="myform">
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value="" placeholder="Type here"/>
</div>
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value="" placeholder="type here"/>
</div>
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value=""/>
</div>
</form>
JS
$('select').change(function () {
$(this).next('input').fadeIn();
});
$('body').on('keyup','input.chain',function () {
$(this).parent().next('div').fadeIn();
});
Related
I have a select which contains options, I want to be able to resent each of the select to its first value onclick
$('.reset').on('click', function() {
$('food option:first').prop('selected', true);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<select class="food">
<option value="" selected disabled>Select Food</option>
<option value="rice">Rice</option>
<option value="garri">Garri</option>
</select>
<input type="text" class="showfood">
<button class="reset">Reset Select</button>
</div>
<div class="box">
<select class="food">
<option value="" selected disabled>Select Food</option>
<option value="beans">Beans</option>
<option value="pear">pear</option>
</select>
<input type="text" class="showfood">
<button class="reset">Reset Select</button>
</div>
However, what this does is reset only the first select.
Your logic to reset is correct. The issue you have is that you need to find only the option related to the select within the same container as the clicked button. To achieve that you can use closest() and find(), like this:
$('.reset').on('click', function() {
$(this).closest('.box').find('.food option:first').prop('selected', true);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<select class="food">
<option value="" selected disabled>Select Food</option>
<option value="rice">Rice</option>
<option value="garri">Garri</option>
</select>
<input type="text" class="showfood">
<button class="reset">Reset Select</button>
</div>
<div class="box">
<select class="food">
<option value="" selected disabled>Select Food</option>
<option value="beans">Beans</option>
<option value="pear">pear</option>
</select>
<input type="text" class="showfood">
<button class="reset" type="button">Reset Select</button>
</div>
Am trying to check if a user has not selected any option from the select options list and then pass the error message to the user via a span id...else submit the form...I want javascript code that can check for empty selected index options for two select. Here is my code for that..
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" method="post">
<label for="exampleInputSelect1">Select Your Stage</label>
<select class="form-control" name="course" id="course">
<option value=""></option>
<option value="Education">Education</option>
<option value="Information Technology">Information Technology</option>
<option value=" Computer Science">Computer Science</option>
</select>
<span class="help-block" style="color:red;font-size:1em;font-family:Segoe UI" id="course_err"></span>
</div><br/>
<div class="form-group">
<label for="exampleInputSelect2">Select Your Stage</label>
<select type="password" class="form-control" name="stage" id="stage">
<option value="Y1S1">Y1S1</option>
<option value="Y1S2">Y1S2</option>
<option value="Y2S1">Y2S1</option>
<option value="Y2S2">Y2S2</option>
<option value="Y3S1">Y3S1</option>
<option value="Y3S2">Y3S2</option>
<option value="Y4S1">Y4S1</option>
<option value="Y4S2">Y4S2</option>
</select>
<span class="help-block" style="color:red;font-size:1em;font-family:Segoe UI" id="stage_err"></span>
</div>
</form>
<button onclick="Check()" class="btn btn-info">Submit</button>
<script>
function Check(){
var c=document.getElementById("course");
var s=document.getElementById("stage");
if(c.options[c.selectedIndex].text==""){
document.getElementById("course_err").innerHTML="You have to select a course";
}else{
alert("form is ready to submit");
}
}
Am trying to check for empty selects and pevent submission until the user selects something from the option list..I need code to do that simultaneously for two selects, Thank you
There is a wrong variable x, to be changed to c:
function Check(){
var c=document.getElementById("course");
var s=document.getElementById("stage");
if(c.options[c.selectedIndex].text==""){
document.getElementById("course_err").innerHTML="You have to select a course";
}else if(s.options[s.selectedIndex].text==""){
document.getElementById("stage_err").innerHTML="You have to select a semester";
} else {
alert("form is ready to submit");
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" method="post">
<label for="exampleInputSelect1">Select Your Stage</label>
<select class="form-control" name="course" id="course">
<option value=""></option>
<option value="Education">Education</option>
<option value="Information Technology">Information Technology</option>
<option value=" Computer Science">Computer Science</option>
</select>
<span class="help-block" style="color:red;font-size:1em;font-family:Segoe UI" id="course_err"></span>
</div><br/>
<div class="form-group">
<label for="exampleInputSelect2">Select Your Stage</label>
<select type="password" class="form-control" name="stage" id="stage">
<option value="Y1S1">Y1S1</option>
<option value="Y1S2">Y1S2</option>
<option value="Y2S1">Y2S1</option>
<option value="Y2S2">Y2S2</option>
<option value="Y3S1">Y3S1</option>
<option value="Y3S2">Y3S2</option>
<option value="Y4S1">Y4S1</option>
<option value="Y4S2">Y4S2</option>
</select>
<span class="help-block" style="color:red;font-size:1em;font-family:Segoe UI" id="stage_err"></span>
</div>
</form>
<button onclick="Check()" class="btn btn-info">Submit</button>
I have some inputs. "input and select" data in the id value of "customer-1", I want to match and transfer with "class" value if click add button.
For example, id="customer-1" "input and select" data in, I want it imported into class="customer-1".
$('.customer-add').click(function(){
var customer_id = $('.customer-add').closest('.customer-bar').find("input").attr("id");
$("." + customer_id).val($("#" + customer_id).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="customer-bar">
<div id="customer-1">
<input type="text" id="customer-name" value="john" disabled />
<input type="text" id="customer-surnamename" value="doe" disabled />
<select name="" id="customer-day" disabled>
<option value="">14</option>
</select>
<select name="" id="customer-month" disabled>
<option value="">02</option>
</select>
<select name="" id="customer-year" disabled>
<option value="">1995</option>
</select>
</div>
<br />
<div class="customer-add" style="cursor:pointer;background:red;color:white;display:inline-block;">Click to add customer details</div>
<br /><br />
<div class="customer-1">
<input type="text" class="customer-name" value="" />
<input type="text" class="customer-surnamename" value="" />
<select name="" class="customer-day">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-month">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-year">
<option value=""></option>
<option value="">2012</option>
<option value="">2015</option>
</select>
</div>
</div>
<br><br><br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="customer-bar">
<div id="customer-2">
<input type="text" id="customer-name" value="john" disabled />
<input type="text" id="customer-surnamename" value="doe" disabled />
<select name="" id="customer-day" disabled>
<option value="">14</option>
</select>
<select name="" id="customer-month" disabled>
<option value="">02</option>
</select>
<select name="" id="customer-year" disabled>
<option value="">1995</option>
</select>
</div>
<br />
<div class="customer-add" style="cursor:pointer;background:red;color:white;display:inline-block;">Click to add customer details</div>
<br /><br />
<div class="customer-2">
<input type="text" class="customer-name" value="" />
<input type="text" class="customer-surnamename" value="" />
<select name="" class="customer-day">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-month">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-year">
<option value=""></option>
<option value="">2012</option>
<option value="">2015</option>
</select>
</div>
</div>
I updated my code. I was able to transfer a single input, but I have to transfer them all
Change id to class
use closest and next
I assume you meant copy from customer1 to customer2
I cannot make a working snippet because you have the same IDs and no names, but the code will look this this
$(function() {
$(".customer-add").on("click",function() {
const $container = $(this).closest(".customer-bar")
const $nextContainer = $container.next(".customer-bar")
const $currentElements = $(":input",$container);
const $nextElements = $(":input",$nextContainer);
$currentElements.each(function(i) {
console.log(i,$(this).attr("class"))
$nextElements.eq(i).val($(this).val())
})
})
})
I updated my code. I was able to transfer a single input, but I have to transfer them all
I need to add a text input that displayed only when the other is selected. And make this input required if it is shown. One thing more, I need to enter that input to the same table in the database. Can anyone help? Please!
<form action="" method="post">
<div class="row">`enter code here`
<div class="col-sm-8 col-sm-offs et-2">
<select class="form-control" name="country" id="country" required>
<option value="">Please select your country</option>
<option value="A">Country A</option>
<option value="B">Country B</option>
<option value="C">Country C</option>
<option value="Other">Other</option>
</select>
<button type="submit" class="btn btn-gpsingh">Next</a>
</div>
</div>
</form>
Try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div class="row">
<div class="col-sm-8 col-sm-offs et-2">
<select class="form-control" name="country" id="country" required >
<option value="">Please select your country</option>
<option value="A">Country A</option>
<option value="B">Country B</option>
<option value="C">Country C</option>
<option value="Other">Other</option>
</select>
<input type ="text" id="country_other" style="display:none">
<button type="submit" class="btn btn-gpsingh">Next</a>
</div>
</div>
</form>
<script>
$("#country").change(function(){
var value = this.value;
if(value =='Other')
{
$("#country_other").show();
$("#country_other").prop('required',true);
$("#country_other").val('');
}
else
{
$("#country_other").hide();
$("#country_other").prop('required',false);
$("#country_other").val('');
}
});
</script>
I have a site with the same form in different spots on the page. I would like to be able to have a placeholder in a text input change when I change the select option. I have a JSFiddle with a kinda example: http://jsfiddle.net/y1jhhqLz/
All the forms look like this:
<form id="form1">
<select id="mySelect1" onClick="changePlaceHolder('#mySelect1','#myInput1')">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
And in this example, I would like to have the place holder change on the input with the id myInput, when I select the option Third.
I have tried many different ways to include the most recent attempt, which I put on the JSFiddle.
Any help would be greatly appreciated!
Set select onclick attribute to
onclick="changePlaceHolder(this,'#myInput1');"
and change javascript function to
function changePlaceHolder(dropdown, element) {
if (jQuery(dropdown).val() == "Third") {
jQuery(element).attr('placeholder', 'You did it correctly!');
} else {
jQuery(element).at}tr('placeholder', '');
}
}
in JSFiddle, you should set the loading behaviour to "no wrap - in head"
Done!
Add a change listener to the select, then get the value of the select and set the attribute placeholder to said value:
$('select').on('change',function(){
var place=$(this).val();
var num=$(this).attr('id').substring(8);
$('#myInput'+num).attr('placeholder',place);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p>How do I get it so that when I click on the option that says Third Choice (for any form), it will put in the text box (with the form and number ) a placeholder: "You did it correctly"? But it shouldn't change any other form but the one where you change the select to the Third Choice option. I tried using a onClick function.
</p>
<br><br>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" onClick="changePlaceHolder('#mySelect1','#myInput1')">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
Several things going on. First, remove the onClick events (we are not looking for when the select is clicked but rather when it is changed) and instead use jQuery's on method. Now changePlaceHolder has access to this which is the actual select box which was changed.
See below:
jQuery('select').on('change input', changePlaceHolder);
function changePlaceHolder() {
//I have to use jQuery instead of $ because it is on a wordpress site
if (jQuery(this).val() == "Third") {
jQuery(this).next().attr("placeholder","You did it correctly!");
} else {
jQuery(this).next().attr("placeholder"," ");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" >
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"/>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"/>
</form>
Other things to note: your <input> tags to not require an ending tag </input>, instead write them like this <input />. Note that the "/" ends the tag. You want to edit the input immediately following your select, in which case you can use jQuery(this).next() which will select the element immediately following the current this element.
For your specific case I would not touch source code, would define all functionality in script. Setting the onlick event inline is not a good idea, scripts should not go together with content.
I wrote this script having in mind that your select and input tags do not have to be siblings, the only condition is that both belong to same form:
/* This way you can use $ in your Wordpress */
(function ($) {
$('select').on('change', function(e) {
var thisSelect = $(this);
var thisSelectValue = thisSelect.val();
var thisInput = thisSelect.closest('form').find('input[id^=myInput]');
if (thisSelectValue == 'Third') {
thisInput.attr("placeholder", "You did it correctly!");
} else {
thisInput.attr("placeholder", "");
}
});
}(jQuery));
p {
max-width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
Please find the working code for you:
<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function changePlaceHolder(element,target) {
alert(element);
if ( element == "Third") {
jQuery(target).attr("placeholder","You did it correctly!");
} else {
jQuery(target).attr("placeholder","");
}
}
</script>
<br><br>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" name="mySelect1" onclick="changePlaceHolder( this.value ,'#myInput1' );">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
</body>
</html>