So I'm trying to build a quickbuy of products with different variants in my list of products. The product has a set of avaialble options, that are collected from the select option with jQuery, passed to a input field and then submitted to the cart. The products are listed out by a loop. When I'm at the single product page it works fine, since all the option values are required.
But once in the list of products, it gets the options from all the products and passes them to all the submit fields. How can I scope a jquery function to work on only one product at a time
In the example below, I want the field to have only the values from the select options relevant to the product. Not th evalues from both product options.
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$("select option:selected").each(function() {
str += $(this).val() + ".";
});
$("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
here you have
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$(this).parent().find("select option:selected").each(function() {
str += $(this).val() + ".";
});
$(this).parent().find("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
Related
I am new to javascript and cannot find an easy-to-understand answer. I would like a certain value to get passed to a hidden field when a user selects a certain option from 2 different select dropdown options. They can only select one or the other on the actual form.
For example if a user selects a US state or a Canadian province, I want to pass that value to hidden text field using javascript.
<form>
<p class="form-field state pd-select required">
<label class="field-label" for="usstatevalue">State</label>
<select name="usstatevalue" id="usstatevalue" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="47815">AL</option>
<option value="47817">AK</option>
<option value="47819">AZ</option>
<option value="47821">AR</option>
<option value="47823">CA</option>
<option value="47825">CO</option>
<option value="47827">CT</option>
<option value="47829">DE</option>
<option value="47831">DC</option>
<option value="47833">FL</option>
<option value="47835">GA</option>
<option value="47837">HI</option>
</select>
</p>
<p class="form-field Province_Canada pd-select required">
<label class="field-label" for="provcanvalue">Province – Canada</label>
<select name="provcanvalue" id="provcanvalue" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="47791">Alberta</option>
<option value="47793">British Columbia</option>
<option value="47795">Manitoba</option>
<option value="47797">New Brunswick</option>
<option value="47799">Newfoundland and Labrador</option>
<option value="47801">Nova Scotia</option>
<option value="47803">Nunavut</option>
<option value="47805">Ontario</option>
<option value="47807">Prince Edward Island</option>
<option value="47809">Quebec</option>
<option value="47811">Saskatchewan</option>
<option value="47813">Yukon</option>
</select>
</p>
<p class="form-field State_Province">
<label for="stateprovnew">hidden field</label>
<input type="text" name="stateprovnew" value="">
</p>
</form>
Following code will insert the selected state and country into the text field. You can make the field hidden it will work.
var stateSelector = document.getElementById('usstatevalue');
var countrySelector = document.getElementById('provcanvalue');
var hiddenSelector = document.getElementById('stateprovnew');
stateSelector.addEventListener('change', function() {
hiddenSelector.value = stateSelector.value;
});
countrySelector.addEventListener('change', function() {
hiddenSelector.value += ' ' + stateSelector.value;
});
<form>
<p class="form-field state pd-select required">
<label class="field-label" for="usstatevalue">State</label>
<select name="usstatevalue" id="usstatevalue" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="47815">AL</option>
<option value="47817">AK</option>
<option value="47819">AZ</option>
<option value="47821">AR</option>
<option value="47823">CA</option>
<option value="47825">CO</option>
<option value="47827">CT</option>
<option value="47829">DE</option>
<option value="47831">DC</option>
<option value="47833">FL</option>
<option value="47835">GA</option>
<option value="47837">HI</option>
</select>
</p>
<p class="form-field Province_Canada pd-select required">
<label class="field-label" for="provcanvalue">Province – Canada</label>
<select name="provcanvalue" id="provcanvalue" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="47791">Alberta</option>
<option value="47793">British Columbia</option>
<option value="47795">Manitoba</option>
<option value="47797">New Brunswick</option>
<option value="47799">Newfoundland and Labrador</option>
<option value="47801">Nova Scotia</option>
<option value="47803">Nunavut</option>
<option value="47805">Ontario</option>
<option value="47807">Prince Edward Island</option>
<option value="47809">Quebec</option>
<option value="47811">Saskatchewan</option>
<option value="47813">Yukon</option>
</select>
</p>
<p class="form-field State_Province">
<label for="stateprovnew">hidden field</label>
<input type="text" name="stateprovnew" id="stateprovnew" value="">
</p>
</form>
i have a button that i wish to clone in jquery so that i can have two of them, using both buttons to do the same task however when i run this code only one of the buttons actually works and the other does not.
I have looked it up trying to use true as a parameter and it still doesnt work
any help would be much appreciated
jQuery(function($) {
var $button = $('#addEvent'),
$row = $('.newEvent').clone();
$button.click(function() {
$row.clone().insertBefore($button);
});
});
jQuery(function($) {
var $button = $('#newPupil'),
$row = $('.newParticipant').clone();
$button.click(function() {
$row.clone().insertBefore($button);
});
});
<form>
<div class="newEvent">
<fieldset id="ResultSheet">
<legend>Add Event</legend>
Event: <br>
<select name="Events" id="Events">
<option disabled selected value> --SELECT AN OPTION BELOW-- </option>
<option value="100 Metres">100 Metres</option>
<option value="200 Metres">200 Metres</option>
<option value="300 Metres">300 Metres</option>
<option value="400 Metres">400 Metres</option>
<option value="800 Metres">800 Metres</option>
<option value="1500 Metres">1500 Metres</option>
<option value="400 Metres">400 Metres</option>
<option value="Hurdels">Hurdels</option>
<option value="Shot Put">Shot Put</option>
<option value="Discus">Discus</option>
<option value="Javelin">Javelin</option>
<option value="Long Jump">Long Jump</option>
<option value="High Jump">High Jump</option>
<option value="Triple Jump">Triple Jump</option>
<option value="4x100 Metres Relay">4x100 Metres relay</option>
</select>
<div class="newParticipant">
<br> First name: <input type="text" name="fisrtName"> Last Name: <input type="text" name="lastName">
</div>
<input type="button" id="newPupil" name="newPupil" value="New participant">
</fieldset>
</div>
</form>
<input type="button" id="addEvent" name="addEvent" value="Add Event" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Attribute id must be unique in a document, use class instead. To attach dynamically created element use on().
Try the following way:
jQuery(function($){
var $button1 = $('#addEvent'),
$row1 = $('.newEvent').clone();
$button1.click(function(){
$row1.clone().insertBefore($button1);
});
var $row2 = $('.newParticipant').clone();
$('body').on('click', '.newPupil', function(){
$row2.clone().insertBefore(this);
});
});
<div class="newEvent">
<fieldset id="ResultSheet">
<legend>Add Event</legend>
Event: <br>
<select name="Events" id="Events">
<option disabled selected value> --SELECT AN OPTION BELOW-- </option>
<option value="100 Metres">100 Metres</option>
<option value="200 Metres">200 Metres</option>
<option value="300 Metres">300 Metres</option>
<option value="400 Metres">400 Metres</option>
<option value="800 Metres">800 Metres</option>
<option value="1500 Metres">1500 Metres</option>
<option value="400 Metres">400 Metres</option>
<option value="Hurdels">Hurdels</option>
<option value="Shot Put">Shot Put</option>
<option value="Discus">Discus</option>
<option value="Javelin">Javelin</option>
<option value="Long Jump">Long Jump</option>
<option value="High Jump">High Jump</option>
<option value="Triple Jump">Triple Jump</option>
<option value="4x100 Metres Relay">4x100 Metres relay</option>
</select>
<div class="newParticipant">
<br>
First name: <input type="text" name="fisrtName">
Last Name: <input type="text" name="lastName">
</div>
<input type="button" class="newPupil" name="newPupil" value="New participant">
</fieldset>
</div>
<input type="button" id="addEvent" name="addEvent" value="Add Event" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<button value="Refresh Page" onClick="refreshPage()">REFRESH</button>
<script src="newButtons.js"></script>
I have a selector with a list of options. One of the options is 'other' in which case the user may enter their own option in a textbox below.
How can I make the textbox disabled and greyed out only to become active when the 'other' option is selected?
<select id = "list" name="Optionlist">
<option value = "1">Option one</option>
<option value = "2">Option two</option>
<option value = "3">Option three</option>
<option value = "4">Other</option>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox"/>
$('#list').change(function() {//on change of select
$('#otherbox').prop('disabled', $('option:selected', this).val() != '4');//check if value is not other then disable
}).change();//call on change manually so on load will run the change event
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list" name="Optionlist">
<option value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
<option value="4">Other</option>
</select>
<br>
<br>
<label for="Other">Other:</label>
<input type="text" name="Other" id="otherbox" />
Maybe a little something like this:
$(document).ready(function() {
$("#list").change(function() {
$("#otherbox").prop("disabled", this.value != "4");
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id = "list" name="Optionlist">
<option value = "1">Option one</option>
<option value = "2">Option two</option>
<option value = "3">Option three</option>
<option value = "4">Other</option>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox"/>
<html>
<head>
<body>
<select onchange="func(this)" id = "list" name="Optionlist">
<option value = "1">Option one</option>
<option value = "2">Option two</option>
<option value = "3">Option three</option>
<option value = "4">Other</option>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox" disabled/>
<script>
function func(obj){
document.getElementById('otherbox').setAttribute('disabled',true);
if(obj.value == 4)
document.getElementById('otherbox').removeAttribute('disabled');
}
</script>
</body>
</html>
An implementation without Jquery
I am using php and want my selected selectbox to become visible based on which one I select. My html code is
<form name="frmIndex" action="index.php" method="post">
<select name="ddlSelections">
<option value="1">Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select>
<input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlTickets" style="display:none">
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
<select name="ddlProjects" style="display:none">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
<select name="ddlSales" style="display:none">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>
And my php code so far is
<?php
if(isset($_POST["btnSubmit"]))
{
$selection = $_POST["ddlSelections"];
if ($selection == 1) {
}
else if ($selection == 2) {
}
else {
}
}
?>
so my question is what would the javascript look like inside of the if/else statement to make the selectboxes visible?
Why not do it client side using javascript?
<form name="frmIndex" action="index.php" method="post">
<select name="ddlSelections" id="ddlSelections" onChange="changeSelect()"> <!-- call function on change -->
<option value="1">Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select>
<input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlTickets" id="ddlTickets"> <!-- visible by default -->
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
<select name="ddlProjects" style="display:none" id="ddlProjects">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
<select name="ddlSales" style="display:none" id="ddlSales">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>
javascript
<script>
function changeSelect()
{
document.getElementById('ddlTickets').style.display = "none";
document.getElementById('ddlProjects').style.display = "none";
document.getElementById('ddlSales').style.display = "none";
switch(document.getElementById('ddlSelections').value) // Get selected one
{
case "1":
document.getElementById('ddlTickets').style.display = "block";
break;
case "2":
document.getElementById('ddlProjects').style.display = "block";
break;
case "3":
document.getElementById('ddlSales').style.display = "block";
break;
}
}
</script>
If you must use PHP
<form name="frmIndex" action="index.php" method="post">
<?php
if(isset($_POST["btnSubmit"]))
{
$selection = $_POST["ddlSelections"];
if ($selection == 1) {
/* echo these
<select name="ddlSelections" id="ddlSelections" >
<option value="1" selected>Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select> <input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlTickets" style="display:none">
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
*/
}
else if ($selection == 2) {
/* echo these
<select name="ddlSelections" id="ddlSelections" >
<option value="1" >Tickets</option>
<option value="2" selected>Projects</option>
<option value="3">Sales</option>
</select> <input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlProjects" style="display:none" id="ddlProjects">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
*/
}
else {
/* echo these
<select name="ddlSelections" id="ddlSelections" >
<option value="1" >Tickets</option>
<option value="2" >Projects</option>
<option value="3" selected>Sales</option>
</select> <input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlSales" style="display:none">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
*/
}
}
?>
<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>
A slightly shorter example using jQuery's .change() which is more unobtrusive than the on* attributes like onclick, onchange, etc.
replace all the style="display:none" with a class="subDDL" and then simply style with .subDDL{display: none;}. I did leave one style="display:initial" for the default option.
then add an id to your sublists that correspond to the values in ddlSelections
now you only need one submit button
$("[name='ddlSelections']").change(function(){
$(".subDDL").hide();
$('#' + $("[name='ddlSelections'] option:selected").val()).show();
});
.subDDL{
display: none;
}
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form name="frmIndex" action="index.php" method="post">
<select name="ddlSelections">
<option value="1">Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select>
<select id="1" name="ddlTickets" class="subDDL" style="display:initial">
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
<select id="2" name="ddlProjects" class="subDDL">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
<select id="3" name="ddlSales" class="subDDL">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
<input type="submit" value="Submit" name="btnChoose" />
</form>
I want that when I select option "others " from dropdown list then only the text box is active else that box remains inactive... I am attaching the code please help me and change the code according to my required specification.......
<div class="width-qrtr">
<label>Type of event</label>
<select name="" id= "select">
<option value="1">Select Type</option>
<option value="2">Golf Day</option>
<option value="3">Dinner</option>
<option value="4">Dinner and Golf Day</option>
<option value="5">Other</option>
</select>
</div>
<div class="width-qrtr">
<label>If you choose 'Other'</label>
<input type="text" value="" name=""/>
</div>
Here's how you do it with pure javascript...
<select name="" id= "select" onchange="onSelectChange()">
<option value="1">Select Type</option>
<option value="2">Golf Day</option>
<option value="3">Dinner</option>
<option value="4">Dinner and Golf Day</option>
<option value="5">Other</option>
</select>
<input type="text" id="yourTextBox" disabled="disabled"/>
Then in your script:
function onSelectChange(){
var sel = document.getElementById('select');
var strUser = sel.options[sel.selectedIndex].text; //getting the selected option's text
if(strUser == 'Other'){
document.getElementById('yourTextBox').disabled = false; //enabling the text box because user selected 'Other' option.
}
}
<div class="width-qrtr">
<label>Type of event</label>
<select name="selectdrop" id= "selectdrop" onchange="return Sbox();">
<option value="1">Select Type</option>
<option value="2">Golf Day</option>
<option value="3">Dinner</option>
<option value="4">Dinner and Golf Day</option>
<option value="5">Other</option>
</select>
<input type="text" id="tbox" name="tbox" disabled />
</div>
<script lanaguage="javascript">
function Sbox()
{
if(document.getElementById("selectdrop").value=='5')
{
document.getElementById("tbox").disabled=false;
}
}
</script>
Running code : http://jsfiddle.net/cvb82wtq/
<div class="width-qrtr">
<label>Type of event</label>
<select name="" id="select">
<option value="1">Select Type</option>
<option value="2">Golf Day</option>
<option value="3">Dinner</option>
<option value="4">Dinner and Golf Day</option>
<option value="5">Other</option>
</select>
</div>
<input type='text' name='othertext' id="other" disabled='disabled'/>
Script-
$(document).ready(function () {
$("#select").change(function () {
if ($(this).find("option:selected").val() == "5") {
$("#other").removeAttr("disabled")
} else {
$("#other").attr("disabled","disabled")
}
});
});
Here's the fiddle http://jsfiddle.net/vikrant47/gywg9hue/1/
Bind an event listener to the dropdown menu. When it changes, if the option selected is "Other" (value=5), enable the textbox. Otherwise, disable the textbox.
HTML:
<div class="width-qrtr">
<label>Type of event</label>
<select name="" id= "select">
<option value="1">Select Type</option>
<option value="2">Golf Day</option>
<option value="3">Dinner</option>
<option value="4">Dinner and Golf Day</option>
<option value="5">Other</option>
</select>
</div>
<div class="width-qrtr">
<label>If you choose 'Other'</label>
<input id="textbox" disabled="true" type="text" value="" name=""/>
</div>
JS:
document.getElementById('select').addEventListener('change', function() {
if (this.value == 5) {
document.getElementById('textbox').disabled = false;
} else {
document.getElementById('textbox').disabled = true;
}
});
Here's a fiddle.