|
JavaScript - Can't Change Radio Selection, Ajax Loaded Form
I'm trying to write a progressively enhanced web application. I have an index page and a form with some select boxes and some radio buttons on a different php page. Before enhancement occurs, the form is accessible via regular links and everything works as expected. No issues.
In the enhanced version of the application, the form is AJAXed into the index page. When this occurs, the select boxes in the form work perfectly. The radio buttons are initially unchecked and I can check one option as usual. However, once one is checked, clicking the other radio options does nothing. I am unable to check a different option. Anybody got a clue what the problem is? Using Chrome by the way. Firefox is the same as Chrome. In IE I can't even check a radio button the first time. Here's the code that's ajaxed in: Code: <label>First Time Buyer Status <!--These values can't be 1/0 because 0 stands for not set--> <input type="radio" name="FTB" id="FTBYes" value="1" <?php $M->checkFTBValue(1); ?> title=""/>First Time Buyer <input type="radio" name="FTB" id="FTBNo" value="2" <?php $M->checkFTBValue(2); ?> title=""/>Not First Time Buyer </label> The PHP script you see there checks if the value on the server matches the value of the radio button and echo's checked="checked" if true. I thought this could be causing the problem initially but the exact same code is used in the non-enhanced version and it works fine. I tried commenting it out anyway but it makes no difference. The only thing I can think of is that some javascript is preventing me from selecting a different radio option. That would explain why it works ok in the non-enhanced version because there is no JS there. I can't find anything that I've written that might cause this effect I'm using jQuerys form plugin on my pages. I'm going to try writing it out and see if that fixes anything. Any body ever experience a similar problem with this? In the mean time, is there a way I can check if any JS functions when I click on the radio button? Sorry if this is in the wrong forum, there's so many different languages involved, I hadn't a clue where to put it. Similar TutorialsHello I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: http://www.watphotos.com/introductio...otography.html And here is the code in question: Code: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var initial = 0
var total = 0;
var services = 0;
function addServices()
{
initial = 150
total = initial
services = 0;
$("input:checked").each(function(){
value = $(this).attr("value");
services += parseInt(value);
});
}
$(function()
{
addServices();
total += services;
$("form").before('<p class="price"></p>')
$("p.price").text("Total Price: US$" + total);
});
$("input:radio, input:checkbox").click(function () {
addServices();
total += services
$("p.price").text("Total Price: US$" + total);
});
});
</script>
I have two questions... Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this? Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document? Thanks in advance! Please help with the code details as to how this would be possible. Thanks. <form method="post" name="validate" action="internet_marketing_and_email_blasting_signup.php" enctype="multipart/form-data" onmouseover="change(event,'../images/submit1.png')" onmouseout="change(event,'../images/submit.png')" onkeyup="highlight(event)" onclick="highlight(event)"> Can somebody help me to find the problem with the below given code, its not working. $(document).on('keyup', ".add_commi", function() { typingTimer = setTimeout(doneTyping, doneTypingInterval); var pro = $(this).attr('id'); var selectvalue = $(this).html(); var id = pro.slice(-2); var amount = $('#amount'+id).html(); var rate = $('#v_rate'+id).html(); //alert('working'); var data = 'cur_amount='+cur_amount +'&cur_rate='+cur_rate+'&commision='+selectvalue; $.ajax({ type: "POST", dataType: "json", url: "http://localhost/agent/buy-currency-calculations/", data: data, success: function(output){ var cus_rate = output.cus_rate; var total = output.total; var tot_commision = output.commision; alert(cus_rate, total, tot_commision); $('#curr_rate'+id).html(cus_rate); $('#tot'+id).html(total); $('#tot_commi'+id).html(tot_commision); } }); return false; }); Reply With Quote 01-09-2015, 02:53 PM #2 Dormilich View Profile View Forum Posts Senior Coder Join Date Jan 2010 Location Behind the Wall Posts 3,532 Thanks 13 Thanked 372 Times in 368 Posts cur_amount, cur_rate and selectvalue are supposedly primitive values (like numbers) but you fetch them as HTML code which the interpreting server script certainly can’t process. (if it should be indeed primitives, you should rather consider using form elements for that). despite that jQuery has a method to fetch values off a form, which might be easier to implement, but that depends on the used HTML code. additionally, in your browser’s dev tools you can check the network pane for what values are sent/received in the AJAX call. The project I am working on involves a flash piece that communicates with a iframe. Currently the flash piece just calls on javascript functions. I want the buttons in the flash piece to be able to change the src of the iframe. PHP Code: <script type="text/javascript"> document.getElementById('video').setAttribute('src',address2); function closeVideo() { document.getElementById('video').style.height='0px'; return false; document.getElementById('video').setAttribute('src', address2); } function openVideo() { document.getElementById('video').style.height='391px'; return false; document.getElementById('video').setAttribute('src', address); } </script> So the way the code works now is when the page loads it sets the iframe with the id of 'video' to the variable address2 which it pulls from an XML file. In the flash piece when a button is hit, it calls openVideo() which "opens" the iframe and I want it to change the contents to address. This does not work though. It opens the frame but will not change the src. I've tried a bunch of different things now such as make the flash target the iframe using navigateToURL(request1, 'video'); but in Firefox and IE is opens it stills as if I had _blank in there. It does strangely work in Safari. Any ideas how to get this to work? I'm new to javascript so it could be something basic I'm overlooking Im very new to java scripting so any help would be truly appreciated. I have a single web page that loads several iframes. One of the iframe pages has to be logged in first. I have that taken care of but once the page is loaded I need to change the source to a link with in the page. My guess is I need something to execute the code like a onload or something. This is what Ive been trying to get to work but like I said a newb! The iframe in question is named "cad" the initial source once loaded is 'https://urlname.com/mainmenu.asp' the source I need to change to is 'https://urlname.com/UnitStatusF.asp?agency_id=28' [CODE] function ChangesSrc() { var iframeid = document.getElementById(cad); var unitstatus = 'https://urlname.com/UnitStatusF.asp?agency_id=28' if (iframeid.src = 'https://urlname.com/mainmenu.asp') iframeid.src = unitstaus; return false; } [[CODE] Hi, I am trying to use the radio button to display the information for the users. For example, when I click radio button "1", the form should display 1 text box each for first name, last name and so on. When the user clicks on radio button 2, there should be text boxes displayed for user 1 and user 2 to enter their info(first name, last name and so on). I looked at the forum, but couldn't find something similiar.Please advise. Something like ================================ Number of Users 1 2 3 # if radio button 2 is selected then User 1 First Name Last Name User 2 First Name Last Name ================================ The code is as below: <html> <head> <script type="text/javascript"> function showUser() { for(i=0;i<document.form.users.length;i++) { if (document.form.users[i].checked) val=parseInt(document.form.users[i].value); for(j=0;j<=val;j++) { document.form.write("<table cellSpacing=1 cellPadding=0 width=600 border=0>"); document.form.write("<tr> <td width='20%' align='right'><font color="#660000"><b>First Name: </b></font></td>"); document.form.write("<td><input type='text' name='fname1' size='25' maxlength='25'></td></tr>"); document.form.write("<tr><td width='20%' align='right'><font color="#660000"><b>Last Name: </b></font></td>"); document.form.write("<td><input type='text' name='lname1' size='25'maxlength='25'></td></tr>"); document.form.write("</table>"); } } } </script> </head> <form> Check the number of users to display additional input fields.<br><br> <input type="radio" name="users" value="1" onclick = "showUser()"/> 1<br/> <input type="radio" name="users" value="2" onclick = "showUser()"/>2 <br/> <input type="radio" name="users" value="3" onclick = "showUser()"/>3 <br/> </form> </html> ======================================================== Thanks in advance. I doubt this is possible, but I have no idea what actually happens when a page loads, so I thought I would give it a shot... if a js file that is loaded externally has parameters, is it possible to turn those parameters into variables, giving the user the option to select the variable's value after the page has loaded? maybe a concrete example would be better... in google maps, the api is loaded like this: Code: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> but if you wanted to specify that you want the api to function in Spanish, you load it like this: Code: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=es"></script> and that language=es is the one that I want to change. But I can't seem to make it into a variable on page load, like this: Code: <script type="text/javascript"> var lang="es"; </script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=lang"></script> much less make it changeable once the page has loaded. I have a feeling that this is a really dumb question, but can it be done without reloading the entire page? I've got a function that returns the value of a radio button group. However the application allows to "hide" some groups on others responses and that effectively make the radio groups not exist. This causes issues with calculations using the total value of the groups combined. I need a way to return a value of '0.00' IF the function does not find the group/returns an error.This is what I currently got to but doesnt work. The function does not work at all. Code: function funcRadioCalc(RadioName)
{
var chkList1= document.getElementById (RadioName);
var arrayOfCheckBoxes= chkList1.getElementsByTagName("input");
var bob;
try {
for( var i=0;i<arrayOfCheckBoxes.length;i++){
if (arrayOfCheckBoxes[i].checked) {
bob= arrayOfCheckBoxes[i].value;
if (bob!=undefined||bob!=""){
throw "yep";
}else{
throw "nope";
}
}
}
catch (er){
if(er=="nope")
{
return "0.00";
}
if(er=="yep")
{
return bob;
}
}
}
hello im attempting to display the output of the radio selection into the textbox. For example, if the user selects 0-15 then display "Your age group is 0-15 years" in the text area. i get the basic logic. i just dont understand how to display the value in the textbox. heres what i have so far if it will clarify my issue. Code: <html>
<head>
<title>lab 8</title>
<script language="javascript">
function textbox()
{
var i;
for(i = 0; i < form1.agegroup.length; i++)
{
if (form1.agegroup[i].checked)
alert("you picked " + form1.agegroup[i].value);
}
}
</script>
</head>
<body>
What is your age group?<br>
<form name="form1">
<input type="radio" name="agegroup" value="0-15" checked>0-15<br>
<input type="radio" name="agegroup" value="16 to 20">16 to 20<br>
<input type="radio" name="agegroup" value="21 to 25">21 to 25<br>
<input type="radio" name="agegroup" value="26 to 35">26 to 3<br>
<input type="radio" name="agegroup" value="36 and up">36 and up<br>
<input type="button" value="submit" onclick="textbox();">
<form name="form2"><textarea rows ="2">
</textarea>
</body>
</html>
btw i know the alert part is wrong. its there because im taking the code i previously had and changing it to display in a textbox instead of an alert. thanks form is .asp scenario: I have 3 radio buttons above number of boxes (dropdown). I want the dropdown selection box greyed out on selecting Electronic (radio button) Physical (radio button) Image (radio button) Electronic (radio button) Number of Boxes [dropdown box] Thanks for your help I am new to coding. Codes for Dropdown menu based on radio buttons selection needed!? I need urgent help with this: I need codes for a dropdown menu that is altered by radio buttons. I want to insert the value selected from the dropdown menu into a table. Dear Javascript programmers, Do you have an example of a Javascript something like this: A dropdownlist with values "one" and "two". The radio button is not visible (as a start). - If you have selected "one" from the dropdown list, then a radio button will appear. - If you have selected "two" from the dropdown list, then a radio button will NOT appear. Thanks, Cornelis Gouda - The Netherlands I am very inexperienced with javasciprt. I am designing a form in coldfusion, and want some dynamic action to take place. My users will be offered 2 selections via radio buttons. Depending on which radio button they select, they will get a few more radio buttons to choose from. I have been told that this can be handled in javascript. So I am appealing to the javascript programmer nation for some assistance in this endeavor. Any help would be greatly appreciated, Thanks. hi again i m making an asp page in which user select 1 radio button and on its selection other selection visible, i m typing here example how it will work provience * District * Taluka* here are 3 radio buttons, now if user click on profience, a querly will execute and will show data according to provience data, and if user click on district a list of district will show and user click district and can get data according to district, same on clicking user have district list and then correspondingly tehsil lists so user can get data according to tehsil. http://rapidshare.com/files/437311384/website.gif I also want when use click on provience other buttons wil invisible, and then ueser click on district, provience button wil dissable. plz help me thanks zami Hi all.This is part of my code which I am using to edit the record from database.Initially the input boxes show the values from database and if any one of the value is changed, I want to reflect the change according to the changes made in the fields.The code works fine but if I change values in qty,rate or amount, the other values are not changing.Can experts over here tell me why?Here is my code: Code:
<html>
<head>
<script type="text/javascript">
function tot() {
var d=document.getElementById("total").value;
var st=Number(d);
var e=document.getElementById("vat_amt").value;
var tx=Number(e);
var f=document.getElementById("cash_discount").value;
var ad=Number(f);
var g=document.getElementById("vat").value;
var vat=Number(g);
var h=(st+tx)-ad;
document.getElementById("amount").value = Math.ceil(h);
var z=vat+100;
var y=(st*100)/z;
var i=st-y;
var result=Math.round(i*100)/100; //returns 28.45
document.getElementById("vat_amt").value =result;
}
var total = 0;
function getValues() {
var qty = 0;
var rate = 0;
var obj = document.getElementsByTagName("input");
for(var i=0; i<obj.length; i++){
if(obj[i].name == "qty[]"){var qty = obj[i].value;}
if(obj[i].name == "rate[]"){var rate = obj[i].value;}
if(obj[i].name == "amt[]"){
if(qty > 0 && rate > 0){obj[i].value = qty*rate;total+=(obj[i].value*1);}
else{obj[i].value = 0;total+=(obj[i].value*1);}
}
}
document.getElementById("total").value = total*1;
total=0;
}
</script>
</head>
<body>
<table width="23%" cellpadding="0" cellspacing="0" class="normal-text" border="0" style="margin-top:0px; padding-top:0px; margin-bottom:0px; padding-bottom:0px;">
<tr>
<td>Qty</td>
<td>Rate</td>
<td>Amount</td>
</tr>
<tr>
<td class="forhead"><input type="text" name="qty[]" onkeyup="getValues()" style="width:120px;" value="<?PHP echo "$row3[qty]" ?>" class="text medium"></td>
<td class="forhead"><input type="text" name="rate[]" onKeyUp="getValues()" style="width:120px;" value="<?PHP echo "$row3[rate]" ?>" class="text medium"></td>
<td class="forhead"><input type="text" name="amt[]" style="width:120px;"
onKeyUp="getValues()" class="text medium" value="<?PHP echo "$row3[amt]" ?>"></td>
</tr>
<tr>
<td class="dt" colspan="2">Sub Total:</td>
<td class="forhead"><input type="text" id="total" name="total" style="width:120px;" value="<?PHP echo "$row[total]" ?>" class="text medium"></td>
</tr>
<tr>
<td class="dt" colspan="2">Vat:</td>
<td class="forhead"><?PHP
$query5=mysql_query("SELECT * FROM vat");
echo "<select name='vat' id='vat' style='width:120px; border: 1px solid #BFBFBF;' onChange='tot()'>";
echo "<option value='0'>
Select</option>";
while($row5=mysql_fetch_array($query5))
{?>
<option value= <?PHP echo $row5[vat]; ?> <?PHP echo($row5[vat]==$row[vat])?'selected':''?>> <?PHP echo $row5[vat]; ?> </option>
<?PHP }
echo "</select>";
?></td>
</tr>
<tr>
<td class="dt" colspan="2">Vat Amt :</td>
<td class="forhead"><input type="text" id="vat_amt" name="vat_amt" style="width:120px;" value="<?PHP echo "$row[vat_amt]" ?>" class="text medium" onKeyUp="tot()"></td>
</tr>
<tr>
<td class="dt" colspan="2">Cash Discount :</td>
<td class="forhead"><input type="text" id="cash_discount" name="cash_discount" style="width:120px;" value="<?PHP echo "$row[cash_discount]" ?>" class="text medium" onKeyUp="tot()"></td>
</tr>
<tr>
<td class="dt" colspan="2">Total :</td>
<td class="forhead"><input type="text" name="amount" id="amount" style="width:120px;" class="text medium" onKeyUp="tot()" value="<?PHP echo "$row[amount]" ?>"></td>
</tr>
</table>
</body>
</html>
in my php page i have two text field i have to get the value by ajax/java script then by clickin radio button add or multy ply i have to show the result. how cain i do it?
Hello. The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text. Here is the code. Code: <html>
<head>
<style type='text/css'>
#txt {background-repeat:no-repeat;width:200px;height:200px;}
</style>
<script type='text/javascript'>
function div_bg(team){
document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)";
}
</script>
</head>
<body>
<select name='team' onChange='div_bg(this.value);'>
<option name='arsenal' value='arsenal'>Arsenal</option>
<option name='liverpool' value='liverpool'>Liverpool</option>
</select>
<div id='txt'></div>
</body>
Thanks in advance!! I have a form with three fields. When the user changes the value of field1, the form displays either field2 or field3. This works fine for NEW records. However, I'm running into a problem when trying to EDIT an existing record. When the form is loaded, I need to test the value of field1 and display either field2 or field3. I've tried using the form onload event, but do not know how to access the value of field1. I'm using Javascript and div tags. This is what I have so far. <script type="text/javascript"> function hide(obj) obj1 = document.getElementById(obj); obj1.style.display = 'none'; } function show(obj) { obj1 = document.getElementById(obj); obj1.style.display = 'block'; } function show_other(optionValue) { if(optionValue=='C') { show('divClass');} else{hide('divClass'); } if(optionValue=='W') { show('divWorkshop');} else{hide('divWorkshop'); } } </script> /* Field1 - is a drop down list */ <select name="ClassType" size="1" onchange="show_other(this.value)"> ... </select> /* Field2 */ <div id="divClass"> ... </div> /* Field 3 */ <div id="divWorkshop"> ... </div> Appreciate any assistance. Thanks Peter I'm trying to use an onclick function in a radio button to change the value of a hidden input in another form. What I want to happen is, when the user changes the value of the radio button (0 or 1), the value of the input named 'repeat' is set to 0 or 1 accordingly. The goal being that when I submit the form with input name='repeat' it will send the number indicated by the radio button. (Due to the structure of my page the radio button and the hidden input need to be two separate forms, but I don't think that should be a problem.) The code below isn't working -- the alert("changerepeat called") never even appears. It seems like the problem is that the onclick isn't even activating at all. Any ideas? Code: <script type="text/javascript">
function changerepeat(theval) {
alert("changerepeat called");
document.forms[0].elements[0].value = theval;
}
function tellme() {
alert("repeat = "+document.forms[0].elements[0].value);
}
</script>
<form>
<input type='hidden' name='repeat' value=''>
<input type='button' value='tellme' onclick='tellme()'>
</form>
<form>
<input type='radio' name='changerepeat' onclick='changerepeat(\'0\')'> 0
<input type='radio' name='changerepeat' onclick='changerepeat(\'1\')'> 1
</form>
Thanks very much for reading! Hey guys, I Should have the textbox value as my radio button value. For example, if I type "5" in the textbox, then the radio button value would change to "5". by the way I have three radio buttons and one textbox and if I select one of those and type something in the text box the value would replace to radio button which is selected and all this have to happen before the page submitted or in the process of submitting. I hope I could find answers here (It's so important for me to solve this problem, For see the form please go to this page, Its above the news frame where you can see three radio buttons and one textbox named shipment tracking ...). thanks so much!!!
|
|||||||