I'm using this code below to create a GET/Import button on my form. I want to import NAME and AGE for my users.
This is my jQuery script to get values:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.button').click(function() {
$.get('values.php', function(data) {
result = $.parseJSON(data);
$("input[name='nick_name']").val(result.avaname);
$("option[name='age']").val(result.tavaage);
});
});
});
</script>
This is my form with "input field for name" and "select option menu for age":
<tr>
<td><label>Name <span>(nickname)</span></label><input type="text" value="<? echo $nick_name;?>" id="nick_name" class="" name="nick_name" /></td>
<td><label>Age</label><select id="age" class="" name="age" ><option value="<? echo $age; ?>" ><? echo $age; ?></option>
<option value="18" >18</option>
<option value="19" >19</option>
<option value="20" >20</option>
<option value="21" >21</option>
<option value="22" >22</option>
<option value="23" >23</option>
<option value="24" >24</option>
<option value="25" >25</option>
<option value="26" >26</option>
<option value="27" >27</option>
</select>
</td>
</tr>
<input class="button" type="button" value="Get/Import" />
My problem is: When I press this button then the input field for name updates and shows the name as expected but the age select option is still empty?
My question is: How can I updates/add option values for my select menu for age?
(I know in my jQuery script LINE NR 8 is incorrect, but that's what I have tried)
All help will be highly appreciated :D
Try this:
$("#age option[value='"+result.tavaage+"']").attr("selected","selected");
Try these
$('#age').attr('value',result.tavaage);
OR
$("#age").val(result.tavaage);
you need to set the value to select element, not to the option.
$("#age").val(result.tavaage);
Related
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
what I have working is 2 radio buttons and one listbox. When the first radio button is clicked, the listbox is disabled but when the second radiobutton is clicked, the listbox is available. I now have to modify the app to have two listboxes and 3 radiobuttons. If the first radio-button is clicked, I need both listboxes disabled. If the second radiobutton is clicked, I need only the first listbox to be disabled. If the third radio-button is selected, I need only the second listbox to be disabled. I have no idea how to begin to do this in Javascript or JQuery! Any help would be very appreciated!! (I'm working in ColdFusion if that is relevant).
This is the code I have working right now. I have to add one more radiobutton and another listbox to it.
<script type="text/javascript">
function check_radio()
{
if(document.MedicaidResidents.choice[1].checked){
document.getElementById("T1").disabled=true;
}else {
document.getElementById("T1").disabled=false;
}
}
</script>
<form name="MedicaidResidents" action="Medicaid_Residents.cfm" method="post" id='f1'>
<input type="radio" name="choice" value='1' onClick="check_radio()";>States<br><br>
<input type="radio" name="choice" value='2' onClick="check_radio()";>Houses
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>`
if your code is working can you just copy and paste the radio buttons and listbox you already have? if so this could work.
<form name="MedicaidResidents" action="Medicaid_Residents.cfm" method="post" id='f1'>
<input type="radio" name="choice" value='1' onClick="check_radio()";>States<br><br>
<input type="radio" name="choice" value='2' onClick="check_radio()";>Houses
<input type="radio" name="choice" value='3' onClick="check_radio()";>Foo
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
<select name="stateprompt2" multiple="multiple" size="10" id="T2">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
<script type="text/javascript">
function check_radio()
{
if(document.MedicaidResidents.choice[1].checked)
{
document.getElementById("T1").disabled=true;
document.getElementById("T2").disabled=true;
}
else if (document.MedicaidResidents.choice[2].checked)
{
document.getElementById("T1").disabled=true;
document.getElementById("T2").disabled=false;
}
else if (document.MedicaidResidents.choice[3].checked)
{
document.getElementById("T1").disabled=false;
document.getElementById("T2").disabled=true;
}
}
</script>
Please find the below jsfiddle as well as the code.
http://jsfiddle.net/Manoj85/3jy0crdx/
There are many solutions for this.
My solution is using JQuery to disable based on radio button selection. And highlight with red background when the list box is disabled.
HTML Code:
<form name="myForm" action="Medicaid_Residents.cfm" method="post" id='f1'>
<div>
<input type="radio" name="choice" value="1" checked> States
<input type="radio" name="choice" value="2"> Houses
<input type="radio" name="choice" value="3"> Other
</div>
<div>
<p> List Box 1 </p>
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
</div>
<div>
<p> List Box 2 </p>
<select name="stateprompt2" multiple="multiple" size="10" id="T2">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
</div>
</form>
JS:
$(document).ready(function() {
var all_radio_buttons = document.myForm.choice;
var prev = null;
var selected_radio_value = "1";
doRefresh(selected_radio_value);
for (var i = 0; i < all_radio_buttons.length; i++) {
all_radio_buttons[i].onclick = function() {
console.log(this.value);
selected_radio_value = this.value;
doRefresh(selected_radio_value);
};
CSS Code:
form#f1 > div {
border: solid 1px red;
margin-bottom: 10px;
}
form#f1 > div > select {
width: 200px;
height: 100px;
}
form#f1 > div > select[disabled] {
background: red;
}
Hope this helps.
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.
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>
Hi I have an HTML page which has a text box and a dropdown box. When the page is loading for the first time, then depending upon the value in the drop down(Selected) the text box needs to be enabled or disabled. I want to do this using javascript or jquery. I need a little help.
<table>
<tr>
<td class="td">
<input type="text" size="3" name="length21" value="0" disabled="disabled"/>
</td>
<td class="td">
<div class="type">
<select name="type1" id="field_type">
<option value="TEXT" SELECTED="">TEXT</option>
<option value="TEXTAREA" >TEXTAREA</option>
<option value="DROPDOWN" >DROPDOWN</option>
<option value="DATE" >DATE</option>
<option value="CHECKBOX" >CHECKBOX</option>
<option value="SEPARATOR" >SEPARATOR</option>
<option value="DATETIME" >DATETIME</option>
<option value="HIERARCHY" >HIERARCHY</option>
</select>
</div>
</td>
</tr>
<tr>
<td class="td">
<input type="text" size="3" name="length21" value="0" disabled="disabled"/>
</td>
<td class="td">
<div class="type">
<select name="type2" id="field_type">
<option value="TEXT" >TEXT</option>
<option value="TEXTAREA" >TEXTAREA</option>
<option value="DROPDOWN" SELECTED="">DROPDOWN</option>
<option value="DATE" >DATE</option>
<option value="CHECKBOX" >CHECKBOX</option>
<option value="SEPARATOR" >SEPARATOR</option>
<option value="DATETIME" >DATETIME</option>
<option value="HIERARCHY" >HIERARCHY</option>
</select>
</div>
</td>
</tr>
</table>
Now what I want is, when the page loads, for the row where the drop down is having TEXT selected, the text box will get enabled. But not for the other. I would really appreciate any kind of help.
In jQuery:
$(document).ready(function(){
$('select').on('change',function(){
if($('select').val() == "TEXT") {
$(this).parents('td').siblings('td').children('input').removeAttr('disabled');
}
});
});
Changed Scott's code a bit so that it works on your load:
$(document).ready(function() {
$('select').each(function() {
var comboBox = $(this);
checkValue(comboBox);
comboBox.on('change', function() {
checkValue(comboBox);
});
});
});
function checkValue(comboBox) {
if (comboBox.val() == "TEXT") {
comboBox.parents('td').siblings('td').children('input').removeAttr('disabled');
}
else {
comboBox.parents('td').siblings('td').children('input').attr('disabled','disabled');
}
}
Here's a fiddle btw: http://jsfiddle.net/BbStP/1