I am trying to clone a row from a template, with selected values. I also want to reset the template row after the clone.
$("CloneButton").click(function() {
var clonedRow = $('#rowtemplate').clone();
clonedRow.html($(clonedRow).html().replace(/#/g, index));
clonedRow.find('.project').text(project);
clonedRow.find('.billingcodeCssId').val(timeCodeID);
clonedRow.find('.billingcodeCss').text(timeCode);
$('#Maintable').append(clonedRow.find('tr'));
});
When I try to clone the table row JS Fiddle, the selector is not picking up the selector.
Whats wrong with selector, and how to clone the row with drop down with the selected values?
Try This
There will be many changes needed in your code ..
you wrote $("CloneButton").click(function() { - it misses the # ID selector - so your button click will not fire. You need to write $("#CloneButton").click(function() {
You need to set selectd attribute for both dropdown before you clone and append. You can set selected attribute using .attr("selected", true)
Below code is working fine for me. Check Working Code Snippet
$("#CloneButton").click(function() {
var drp1Value = $('#rowtemplate tr').find('select').eq(0).val();
$("option[value=" + drp1Value + "]", $('#rowtemplate tr').find('select').eq(0))
.attr("selected", true).siblings()
.removeAttr("selected");
var drp2Value = $('#rowtemplate tr').find('select').eq(1).val();
$("option[value=" + drp2Value + "]", $('#rowtemplate tr').find('select').eq(1))
.attr("selected", true).siblings()
.removeAttr("selected");
var clonedRow = $('#rowtemplate tr').clone();
$('#Maintable').append(clonedRow);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h4 >Main Table</h4>
<table id="Maintable" >
<th>Client</th><th>Heading</th><th>Heading</th><th>Total</th><th>Delete?</th>
<tr>
<td>
<span class="project"> <select class="form-control projectcodeid" id="Records_0__SelectedProjectFromList" name="Records[0].SelectedProjectFromList"><option value="">Modeling</option>
<option value="1">Ventosanzap</option>
<option value="2">Modeling</option>
<option value="3">Xilinx ISE</option>
</select>
</span>
</td>
<td>
<input type="hidden" name="Records.Index" value="0">
<span class="billingcodeCss"> <select class="form-control timecodeDdlId" id="Records_0__SelectedBillingCodesFromList" name="Records[0].SelectedBillingCodesFromList">
<option value="">Budget-070</option>
<option selected="selected" value="5">Budget-070</option>
<option value="6">Budget-784</option>
<option value="7">Cost Center-027</option>
</select></span>
</td>
<td>
<input name="Records[0].TimeRecords[0].ID" type="hidden" value="">
<input class="meters" name="Records[0].TimeRecords[0].Meters" type="text" value="">
</td>
<td class="rowtotal">10.00</td>
<td>
<input class="bs-checkbox mt-checkbox mt-checkbox-outline deleteRow" name="Records[0].DeleteRow" type="checkbox" value="true"><input name="Records[0].DeleteRow" type="hidden" value="false">
</td>
</tr>
<tr>
<td><span class="project">
<select class="form-control projectcodeid" id="Records" name="Records[1].SelectedProjectFromList"><option value="">Xilinx ISE</option>
<option value="1">Ventosanzap</option>
<option value="2">Modeling</option>
<option value="3">Xilinx ISE</option>
</select></span>
</td>
<td>
<input type="hidden" name="Records.Index" value="1">
<span class="billingcodeCss"> <select class="form-control timecodeDdlId" id="Records_1__SelectedBillingCodesFromList" name="Records[1].SelectedBillingCodesFromList"><option value="">Bill-727 </option>
<option value="1">TIME CODE A </option>
<option selected="selected" value="2">Bill-727 </option>
<option value="3">Bill-561 </option>
<option value="4">Bill-281 </option>
</select></span>
</td>
<td>
<input name="Records[1].TimeRecords[0].ID" type="hidden" value="">
<input class="meters" name="Records[1].TimeRecords[0].Meters" type="text" value="">
</td>
<!-- added row totals rowtotalmeters-->
<td class="rowtotal">
0.00
</td>
<td>
<input class="bs-checkbox mt-checkbox mt-checkbox-outline deleteRow" name="Records[1].DeleteRow" type="checkbox" value="true"><input name="Records[1].DeleteRow" type="hidden" value="false">
</td>
</tr>
</table>
<!--*********** End Main Table-->
<hr />
<h4>Row template</h4>
<button type="button" id="CloneButton">Add Clone Row to table!</button>
<table id="rowtemplate">
<tr>
<td>
<span class="project"> <select class="form-control projectcodeid" id="Records_0__SelectedProjectFromList" name="Records[0].SelectedProjectFromList"><option value="">Default</option>
<option value="0">Null</option>
<option value="1">Ventosanzap</option>
<option value="2">Modeling</option>
<option value="3">Xilinx ISE</option>
</select></span>
</td>
<td>
<input type="hidden" name="Records.Index" value="0">
<span class="billingcodeCss"> <select class="form-control timecodeDdlId" id="Records_0__SelectedBillingCodesFromList" name="Records[0].SelectedBillingCodesFromList">
<option value="">Default</option>
<option value="0">Null</option>
<option value="">Budget-070</option>
<option value="5">Budget-070</option>
<option value="6">Budget-784</option>
<option value="7">Cost Center-027</option>
</select></span>
</td>
<td>
<input name="Records[0].TimeRecords[0].ID" type="hidden" value="">
<input class="meters" name="Records[0].TimeRecords[0].Meters" type="text" value="">
</td>
<td class="rowtotal">0.00</td>
<td>
<input class="bs-checkbox mt-checkbox mt-checkbox-outline deleteRow" name="Records[0].DeleteRow" type="checkbox" value="true"><input name="Records[0].DeleteRow" type="hidden" value="false">
</td>
</tr>
</table>
Please check the code snippet
Related
$(function() {
$('#Yes_smoke').hide();
$('#smoke').change(function() {
if ($('#smoke').val() == 'Yes') {
$('#Yes_smoke').show();
} else {
$('#Yes_smoke').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ex_smoker">
<tr>
<td class="prop">Are you an ex-smoker?</td>
<td>
<select name="smoke" id="smoke">
<option value="" selected="selected">Choose</option>
<option VALUE=""> </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select name="smoke" id="smoke">
<option value="" selected="selected">Choose</option>
<option VALUE=""> </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</tr>
</div>
<div class="ex_smoker" id="Yes_smoke">
<tr class="Yes_smoke">
<td class="prop" width="20%">When did you last smoke?</td>
<td>
<INPUT TYPE="date" NAME="medical_smoker_es_when" VALUE="">
</td>
<td>
<INPUT TYPE="date" NAME="medical_smoker_es_whenb" VALUE="">
</td>
</tr>
</div>
This is my jquery code as well as a part of my html form. I'm trying to make 'When did you last smoke' appear when the user selects 'Yes' from the selection above, and be hidden until then. But it is currently not working and i'm unsure why, any help would be appreciated. Thank you.
As Lelio pointed out, you have two identical select boxes doing the same thing. Removing the duplication seems to do the trick - see this JSFiddle.
Also, make sure you are loading JQuery before your custom script i.e. ensure the line
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
or similar, referencing a local library for example, is above your script in your HTML page.
It is also good practice to add your scripts just before the end of your <body> element.
you should write a function code inside window load -- for the purpose of assign change event on DOM generate
<script type="text/javascript">
$(window).load(function() {
$('#Yes_smoke').hide();
$('#smoke').change(function(){
if($('#smoke').val() == 'Yes') {
$('#Yes_smoke').show();
} else {
$('#Yes_smoke').hide();
}
});
});
</script>
You are duplicating the id's.
<div class="ex_smoker">
<tr>
<td class="prop">Are you an ex-smoker?</td>
<td>
<select name="smoke" id="smoke">
<option value="" selected="selected">Choose</option>
<option VALUE=""> </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</tr>
</div>
<div class="ex_smoker" id="Yes_smoke">
<tr class="Yes_smoke">
<td class="prop" width="20%">When did you last smoke?</td>
<td>
<INPUT TYPE="date" NAME="medical_smoker_es_when" VALUE="">
</td>
<td>
<INPUT TYPE="date" NAME="medical_smoker_es_whenb" VALUE="">
</td>
</tr>
</div>
I have to display list of values in table format. I pass id in input textbox value future I will hide it, and my question is how to get textbox value when I changed the dropdown value.When I changed dropdown it's will update on particular id. Here I have attached my screenshot. Thanks in Advance. i have tried this below code but its will take first id only.
<td>
<select name="type" id="type" class="form-control">
<option value="general">General</option>
<option value="coin">Coin</option>
<option value="token">Token</option>
</select>
</td>
<td>
<input type="hidden" id="comp_id" value="<?php echo $row['company_id']; ?>">
</td>
<script>
$(document).ready(function() {
var type_val;
$('#type').on('change', function() {
var fav = $('#comp_id').val();
alert(fav);
type_val = $('#type').val();
console.log(type_val);
});
});
</script>
expected output
<td>
<select name="type" id="type" class="form-control">
<option value="general">General</option>
<option value="coin">Coin</option>
<option value="token">Token</option>
</select>
</td>
<td>
<input type="hidden" id="comp_id" value="<?php echo $row['company_id']; ?>">
</td>
<script>
$(document).ready(function() {
var type_val;
$('#type').on('change', function() {
// find parent tr then find #comp_id inside it
var fav = $(this).closest('tr').find('#comp_id').val();
alert(fav);
type_val = $('#type').val();
console.log(type_val);
});
</script>
You can use parent and next like this.
$(document).ready(function() {
$('#type').on('change', function() {
$(this).parent().next('td').find('input').val()
});
});
Note: Don't use repeated ID. Its a rule violation. Use class instead
of id to find input.Its take only 1st id because duplicate id is not allowed.
Working snippet.
$('#type').on('change', function() {
console.log($(this).parent().next('td').find('input').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select name="type" id="type" class="form-control">
<option value="general">General</option>
<option value="coin">Coin</option>
<option value="token">Token</option>
</select>
</td>
<td>
<input type="hidden" class="comp_class" value="Your Value From Php">
</td>
</tr>
</table>
Never use multiple id's of same name on single page.
Generate your id's dynamically like type1, type2 ... and comp1, comp2 ...
<table>
<tr>
<td>
<select name="type1" id="type1" class="form-control sel">
<option value="general">General</option>
<option value="coin">Coin</option>
<option value="token">Token</option>
</select>
</td>
<td>
<input type="hidden" id="comp_id1" value="1">
</td>
</tr>
<tr>
<td>
<select name="type2" id="type2" class="form-control sel">
<option value="general">General</option>
<option value="coin">Coin</option>
<option value="token">Token</option>
</select>
</td>
<td>
<input type="hidden" id="comp_id2" value="2">
</td>
</tr>
</table>
<script>
$('.sel').change(function(){
var select_id = $(this).attr('id');
var offset = select_id.substring(4);
var type = $(this).val();
alert(type);
var comp = $('#comp_id'+offset).val();
alert(comp);
});
</script>
Here is jsfiddle link:
jsFiddle
I am working on this form with several select elements with options Yes, No or Not applicable. It was required that whenever the user select yes option a separate date field appears next to it. I used HTML DOM document.getElementById("id").innerHTML for this date field. Everything went well but I was not able to pass the value of date to the form action page using POST method. Check this code:
<!-- javascript code -->
<script type="text/javascript">
function credit_check(name){
if(name=='YES')document.getElementById('div2').innerHTML='Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div2').innerHTML='';
}
function employment_check(name){
if(name=='YES')document.getElementById('div3').innerHTML='Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div3').innerHTML='';
}
</script>
</head>
<body>
<?php include("menu.inc"); ?>
<div id="main">
<table>
<form method="post" action="checkinfo.php">
<tr><td colspan=2><hr/><input type="hidden" name="consultant_id" value="<?php echo $consult_id; ?>"> </td>
</tr>
<tr align="center">
<td><b>Credit Check </b></td>
<td>
<select name="2" onchange="credit_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div2"> </div></td>
</tr>
<tr align="center">
<td><b>Employment Check :<font color='red'>*</font></b></td>
<td>
<select name="3" onchange="employment_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div3"> </div></td>
</tr>
</form>
</table>
Demo - Change function credit_check(name) to window.credit_check = function(name)
window.credit_check = function(name){
if(name=='YES') document.getElementById('div2').innerHTML='Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div2').innerHTML='';
}
window.employment_check = function (name){
if(name=='YES') document.getElementById('div3').innerHTML='Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div3').innerHTML='';
}
You're script wasn't loading properly,
Uncaught ReferenceError: credit_check is not defined in your console shows the error. The functions were not being defined. You can set your functions like above or reposition your code.
Put the inputs into the HTML at loading, then simply hide/show them.
<!-- javascript code -->
<script type="text/javascript">
function credit_check(name){
if(name=='YES')document.getElementById('div2').style.display = 'block';
else document.getElementById('div2').style.display = 'none';
}
function employment_check(name){
if(name=='YES')document.getElementById('div3').style.display = 'block';
else document.getElementById('div3').style.display = 'none';
}
</script>
</head>
<body>
<?php include("menu.inc"); ?>
<div id="main">
<table>
<form method="post" action="checkinfo.php">
<tr><td colspan=2><hr/><input type="hidden" name="consultant_id" value="<?php echo $consult_id; ?>"> </td>
</tr>
<tr align="center">
<td><b>Credit Check </b></td>
<td>
<select name="2" onchange="credit_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div2" style="display: none;">
Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />
</div></td>
</tr>
<tr align="center">
<td><b>Employment Check :<font color='red'>*</font></b></td>
<td>
<select name="3" onchange="employment_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div3" style="display: none;">
Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />
</div></td>
</tr>
</form>
</table>
It's also a good idea to check out jQuery, it makes this kind of stuff a lot easier to do.
Your code is already working. See http://jsfiddle.net/2wg4u6ut/
Make sure your JavaScript is in the head section of your document.
There were some minor issues in your formatting where the <form> tag belongs around the table.
You also were missing the submit button, but then it's already working.
Suppose there is a link (two links, actually), each supposed to be doing something similar and each doing something different.
<a style="cursor:pointer;" name="A">#</a>
<a style="cursor:pointer;" name="A">Product A</a>
<a style="cursor:pointer;" name="B">#</a>
<a style="cursor:pointer;" name="B">Product B</a>
etc.
When the # anchor is clicked, it needs to open a popup, prompt for a number, then on submit, autoselect the option and set textarea value to the number entered.
<select>
<option selected="selected" value="0"></option>
<option value="A">Spies</option>
<option value="B">Militia</option>
</select>
</td>
<td><input value="0" type="text"></td>
But when the Product anchor is clicked, it needs to do the same thing, but just set the selected element to the corresponding value (Product A autoselects the selects to A, etc.)
I have some stuff in JavaScript to make this work, but I'd like it to be in jQuery, and am having a hard time figuring it out.
Some JS:
The anchors have onclick="var newNumUnits=prompt('How many of Product X do you want to default to? 'Enter amount here'); quickFill(1111115,newNumUnits);", which takes care of a lot of the stuff, but it gets "large" and "complicated", and I'd really like to see the code be rendered easier (if possible) in jQuery.
function quickFill(ProdID, num) {
for(i=0; i<document.myForm.elements.length; i++) {
fieldname = document.myForm.elements[i].name;
fieldvalue = document.myForm.elements[i].value;
if (fieldname.indexOf("_") != -1) {
fieldNameArray = fieldname.split("_");
smallFieldName = fieldNameArray[0];
myPUID = fieldNameArray[1];
if (smallFieldName == "ProdID") {
selectfield = document.myForm.elements[i];
for (var j=0; j<selectfield.options.length;j++) {
if (selectfield.options[j].value == ProdID) {
selectfield.options[j].selected=true;
textinputfield = document.getElementById("num_"+myPUID);
textinputfield.value=num;
}
}
}
}
}
updateStatus();
}
Any help would be appreciated.
EDIT: The actual, unedited code that I'm currently working with:
<tr class="L1">
<td></td>
<td>1898, 2018
</td>
<td>9</td>
<td>Combat Outpost
</td>
<td>
<select name="struct[213][str]">
<option selected="selected" value="0"></option>
<option value="U2" data-price="4000">Blackshirts</option>
<option value="U3" data-price="6000">Spies</option>
<option value="U4" data-price="8000">Partisans</option>
<option value="U7" data-price="15000">Rebels</option>
<option value="U11" data-price="80000">Oerlikon Cannons</option>
</select>
</td>
<td>
<input size="2" maxlength="4" class="txt" name="struct[213][numUnits]" value="0" type="text">
</td>
</tr>
<tr class="L2">
<td></td>
<td>1900, 2018
</td>
<td>9</td>
<td>Combat Outpost
</td>
<td>
<select name="struct[329][str]">
<option selected="selected" value="0"></option>
<option value="U2" data-price="4000">Blackshirts</option>
<option value="U3" data-price="6000">Spies</option>
<option value="U4" data-price="8000">Partisans</option>
<option value="U7" data-price="15000">Rebels</option>
<option value="U11" data-price="80000">Oerlikon Cannons</option>
</select>
</td>
<td>
<input size="2" maxlength="4" class="txt" name="struct[329][numUnits]" value="0" type="text">
</td>
</tr>
<tr class="L2">
<td></td>
<td>1901, 2018
</td>
<td>9</td>
<td>Military Installation
</td>
<td>
<select name="struct[330][str]">
<option selected="selected" value="0"></option>
<option value="U1" data-price="1200">K-9 Corps</option>
<option value="U5" data-price="9000">Riflemen</option>
<option value="U6" data-price="11000">Sappers</option>
<option value="U8" data-price="24000">Jägers</option>
<option value="U9" data-price="27000">Commandos</option>
<option value="U10" data-price="33000">Red Berets</option>
<option value="U12" data-price="110000">Ford GPW</option>
<option value="U13" data-price="222000">M3 Half-tracks</option>
<option value="U14" data-price="350000">7TP</option>
</select>
</td>
<td>
<input size="2" maxlength="4" class="txt" name="struct[330][numUnits]" value="0" type="text">
</td>
</tr>
<tr class="L2">
<td></td>
<td>1901, 2017
</td>
<td>9</td>
<td>Light Airfield
</td>
<td>
<select name="struct[331][str]">
<option selected="selected" value="0"></option>
<option value="U15" data-price="155000">PZL.23 Karaś</option>
<option value="U16" data-price="175000">R-4 Hoverfly</option>
<option value="U17" data-price="650000">PZL P.11</option>
<option value="U18" data-price="1050000">P-39 Airacobra</option>
<option value="U19" data-price="1500000">C-46 Commando</option>
</select>
</td>
<td>
<input size="2" maxlength="4" class="txt" name="struct[331][numUnits]" value="0" type="text">
</td>
</tr>
Some stuff that I experimented with before, in JavaScript, that works (goes with the the quickFill function posted above:
<a style="cursor:pointer;" onclick="var newNumUnits=prompt('How many units do you want to default to? \nClick the unit name instead of the number sign to skip this step.','Enter amount here'); quickFill(U3,newNumUnits);">#</a>
<a style="cursor:pointer;" onclick="quickFill(U3);">Spies</a>
<br>
<a style="cursor:pointer;" onclick="var newNumUnits=prompt('How many units do you want to default to? \nClick the unit name instead of the number sign to skip this step.','Enter amount here'); quickFill(U2,newNumUnits);">#</a>
<a style="cursor:pointer;" onclick="quickFill(U2);">Blackshirts</a>
That style of anchors then continues for about 30 more combos, different U#'s, different names. What needs to happen is that when the anchor with text is clicked, all selects that contain that same U# are then auto-selected to it, and when the # anchor is clicked, the same thing happens, but also changes the corresponding textarea to the number entered in the prompt.
You will need to do some changes to the HTML <a> tags first:
<a style="cursor:pointer;" name="A" data-type="hash">#</a>
<a style="cursor:pointer;" name="A" data-type="product">Product A</a>
<a style="cursor:pointer;" name="B" data-type="hash">#</a>
<a style="cursor:pointer;" name="B" data-type="product">Product B</a>
<select>
<option selected="selected" value="0"></option>
<option value="A">Spies</option>
<option value="B">Militia</option>
</select>
<input value="0" type="text">
Now in jQuery you will need to listen for the click event of the <a> tag:
$(document).ready(function(){
$('a').on('click', function (e) {
e.preventDefault();
var a_name = $(this).attr('name');
if ($(this).data('type') === 'hash') {
var answer = prompt('Type your selection', '');
$('select option').prop('selected', false);
$('select option[value="' + a_name + '"]').prop('selected', true);
$('input').val(answer);
} else if ($(this).data('type') === 'product') {
$('select option').prop('selected', false);
$('select option[value="' + a_name + '"]').prop('selected', true);
}
});
});
JSFIDDLE DEMO
Update since you showed me full code =)
HTML
<table id="someID">
<tr class="L1">
<td></td>
<td>1898, 2018
</td>
<td>9</td>
<td>Combat Outpost
</td>
<td>
<select name="struct[213][str]">
<option selected="selected" value="0"></option>
<option value="U2" data-price="4000">Blackshirts</option>
<option value="U3" data-price="6000">Spies</option>
<option value="U4" data-price="8000">Partisans</option>
<option value="U7" data-price="15000">Rebels</option>
<option value="U11" data-price="80000">Oerlikon Cannons</option>
</select>
</td>
<td>
<input size="2" maxlength="4" class="txt" name="struct[213][numUnits]" value="0" type="text">
</td>
</tr>
<tr class="L2">
<td></td>
<td>1900, 2018
</td>
<td>9</td>
<td>Combat Outpost
</td>
<td>
<select name="struct[329][str]">
<option selected="selected" value="0"></option>
<option value="U2" data-price="4000">Blackshirts</option>
<option value="U3" data-price="6000">Spies</option>
<option value="U4" data-price="8000">Partisans</option>
<option value="U7" data-price="15000">Rebels</option>
<option value="U11" data-price="80000">Oerlikon Cannons</option>
</select>
</td>
<td>
<input size="2" maxlength="4" class="txt" name="struct[329][numUnits]" value="0" type="text">
</td>
</tr>
<tr class="L2">
<td></td>
<td>1901, 2018
</td>
<td>9</td>
<td>Military Installation
</td>
<td>
<select name="struct[330][str]">
<option selected="selected" value="0"></option>
<option value="U1" data-price="1200">K-9 Corps</option>
<option value="U5" data-price="9000">Riflemen</option>
<option value="U6" data-price="11000">Sappers</option>
<option value="U8" data-price="24000">Jägers</option>
<option value="U9" data-price="27000">Commandos</option>
<option value="U10" data-price="33000">Red Berets</option>
<option value="U12" data-price="110000">Ford GPW</option>
<option value="U13" data-price="222000">M3 Half-tracks</option>
<option value="U14" data-price="350000">7TP</option>
</select>
</td>
<td>
<input size="2" maxlength="4" class="txt" name="struct[330][numUnits]" value="0" type="text">
</td>
</tr>
<tr class="L2">
<td></td>
<td>1901, 2017
</td>
<td>9</td>
<td>Light Airfield
</td>
<td>
<select name="struct[331][str]">
<option selected="selected" value="0"></option>
<option value="U15" data-price="155000">PZL.23 Karaś</option>
<option value="U16" data-price="175000">R-4 Hoverfly</option>
<option value="U17" data-price="650000">PZL P.11</option>
<option value="U18" data-price="1050000">P-39 Airacobra</option>
<option value="U19" data-price="1500000">C-46 Commando</option>
</select>
</td>
<td>
<input size="2" maxlength="4" class="txt" name="struct[331][numUnits]" value="0" type="text">
</td>
</tr>
</table>
<hr />
<div id="quickChoice"> <a style="cursor:pointer;">#</a>
<a style="cursor:pointer;">Spies</a>
<br>
<a style="cursor:pointer;">#</a>
<a style="cursor:pointer;">Blackshirts</a>
<br>
<a style="cursor:pointer;">#</a>
<a style="cursor:pointer;">Riflemen</a>
<br>
<a style="cursor:pointer;">#</a>
<a style="cursor:pointer;">Sappers</a>
<br>
<a style="cursor:pointer;">#</a>
<a style="cursor:pointer;">R-4 Hoverfly</a>
</div>
jQuery
$(document).ready(function(){
$('div#quickChoice').on('click', 'a', function (e) {
// dont allow the <a> to perform its default functionality
e.preventDefault();
// get content of <a> tag
var contents = $(this).text();
// user clicked hash symbol
if (contents === '#') {
// get the contents of next available <a> tag
var select_choice = $(this).next('a').text();
// promp for number
var answer = prompt('Type your selection', '');
// go through table
// find any <selects> that have <options>
// filter options based on <a> contents next to hash
// make it selected
// for each matching <option> go to parent <td> and find the next <td> because we need to populate the <input> tag
// populate the <input>
$('table#someID')
.find('select')
.find('option')
.filter(function () {
if ($(this).text() === select_choice) {
return true;
} else {
return false;
}
}).prop('selected', true)
.each(function () {
$(this)
.parents('td')
.first()
.next('td')
.find('input[type="text"]')
.val(answer);
});
} else {
// user did not click hash but rather the text value
var select_choice = $(this).text();
// same as above but we don't have to populate the <input> at all
$('table')
.find('select')
.find('option')
.filter(function () {
if ($(this).text() === select_choice) {
return true;
} else {
return false;
}
}).prop('selected', true);
}
});
});
JSFIDDLE DEMO
I have created a script for partial season ticket package sales on my music group's website. A user would select 4 concert programs and then select a date for each concert program selected. All of these selections need to post to Paypal for processing/purchasing. My "Add to Cart" button does route to Paypal, but the concert programs and dates are not being picked up. The box office people need this information. You can see the code I have here: http://jsfiddle.net/saraswati/v6Pur/66/
Here is the HTML:
<form target="paypal" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post"><strong><a name="Partial">Partial</a> subscription (4 concerts), Regular Price: $87.00 (a savings of 13%)</strong>
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="business" value="temp_1344946752_biz#me.com">
<input type="hidden" name="item_name" value="Partial subscription (4 concerts), Regular Price">
<input type="hidden" name="amount" value="87.00">
<input type="hidden" name="currency_code" value="USD">
<table width="90%" cellspacing="0" cellpadding="0" border="1">
<CAPTION>Please select the desired concert program and then the desired date from the pull-down menus. Then click the "Add to Cart" button.</CAPTION>
<tr id="row1" align=center>
<td><font color="#990000">Concert 1:</font></td>
<td><font color="#990000">Concert 2:</font></td>
<td><font color="#990000">Concert 3:</font></td>
<td><font color="#990000">Concert 4:</font></td>
</tr>
<tr id=row2>
<td><input type="hidden" name="os0" value="Concert 1"><body onload="ChangeDateDropList ();">
<select id="program1" onchange="ChangeDateDropList(1);">
<option value="" selected="selected">Select a Program</option>
<option value="TUDORS">The Tudors</option>
<option value="NOCHES">Noches, Noches</option>
<option value="CHRISTMAS">Christmas Eurotour</option>
<option value="CELTIC">Celtic Trinity</option>
<option value="UNREQUITED">Unrequited Love</option>
<option value="SECRET">Secret No More</option>
</select>
<select id="date1">
</select>
</body>
</td>
<td><input type="hidden" name="os1" value="Concert 2"><body onload="ChangeDateDropList ();">
<select id="program2" onchange="ChangeDateDropList(2);">
<option value="" selected="selected">Select a Program</option>
<option value="TUDORS">The Tudors</option>
<option value="NOCHES">Noches, Noches</option>
<option value="CHRISTMAS">Christmas Eurotour</option>
<option value="CELTIC">Celtic Trinity</option>
<option value="UNREQUITED">Unrequited Love</option>
<option value="SECRET">Secret No More</option>
</select>
<select id="date2">
</select>
</body>
</td>
<td><input type="hidden" name="os2" value="Concert 3"><body onload="ChangeDateDropList ();">
<select id="program3" onchange="ChangeDateDropList(3);">
<option value="" selected="selected">Select a Program</option>
<option value="TUDORS">The Tudors</option>
<option value="NOCHES">Noches, Noches</option>
<option value="CHRISTMAS">Christmas Eurotour</option>
<option value="CELTIC">Celtic Trinity</option>
<option value="UNREQUITED">Unrequited Love</option>
<option value="SECRET">Secret No More</option>
</select>
<select id="date3">
</select>
</body>
</td>
<td><input type="hidden" name="os3" value="Concert 4"><body onload="ChangeDateDropList ();">
<select id="program4" onchange="ChangeDateDropList(4);">
<option value="" selected="selected">Select a Program</option>
<option value="TUDORS">The Tudors</option>
<option value="NOCHES">Noches, Noches</option>
<option value="CHRISTMAS">Christmas Eurotour</option>
<option value="CELTIC">Celtic Trinity</option>
<option value="UNREQUITED">Unrequited Love</option>
<option value="SECRET">Secret No More</option>
</select>
<select id="date4">
</select>
</body>
</td>
</tr>
</table>
<br>
<center>
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</center>
And here is the Javascript:
var progamsAndDates = {};
progamsAndDates.TUDORS = ['Sept. 15', 'Sept. 16'];
progamsAndDates.NOCHES = ['Oct. 20', 'Oct. 21'];
progamsAndDates.CHRISTMAS = ['Dec. 14', 'Dec. 15', 'Dec. 16'];
progamsAndDates.CELTIC = ['Jan. 26', 'Jan. 27'];
progamsAndDates.UNREQUITED = ['Mar. 02', 'Mar. 03'];
progamsAndDates.SECRET = ['Apr. 20', 'Apr. 21'];
function ChangeDateDropList (id) {
var programDropList = document.getElementById ("program"+id);
var dateDropList = document.getElementById ("date"+id);
var selProgram = programDropList.options[programDropList.selectedIndex].value;
// remove all dates
while (dateDropList.options.length) {
dateDropList.remove (0);
}
// add new dates
var dates = progamsAndDates[selProgram];
if (dates) {
for (var i=0; i < dates.length; i++) {
var date = new Option (dates[i], i);
dateDropList.options.add (date);
}
}
}
Again, when I click on the "Add to Cart" button, it goes to Paypal and the description reads "Partial subscription (4 concerts), Regular Price" and it picks up the Item Price, etc. However, the description should also show the selections, such as "Tudors, Sept. 15; Celtic, Jan.27; etc." I query the wisdom of you all in getting this to work. Thank you!
The variables you are passing over are not correct. You are passing over variables such as on0, os0, on1, os1. These would be correct for add to cart buttons or buy now buttons, but since you are using the cart upload method they need to be passed over like on0_1, os0_1, on1_2, and os1_2. This will correct your issue, and they should then show up.
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="business" value="my_email#my_site.com">
<input type="hidden" name="item_name_1" value="Football T-Shirt">
<input type="hidden" name="amount_1" value="1.00">
<input type="hidden" name="on0_1" value="Color">
<input type="hidden" name="os0_1" value="Red">
<input type="hidden" name="on1_1" value="Size">
<input type="hidden" name="os1_1" value="Small">
<input type="hidden" name="item_name_2" value="Notebook">
<input type="hidden" name="amount_2" value="2.00">
<input type="hidden" name="on0_2" value="Number of Pages">
<input type="hidden" name="os0_2" value="200">
<input type="hidden" name="on1_2" value="Type">
<input type="hidden" name="os1_2" value="3 Ring">
<input type="submit" value="PayPal">
</form>