|
JavaScript - Change Href Based On Textfield - Ajax?
Hi guys
I have a little problem. I have 2 textfields and I need to change a link href based on whatever is in those textfields. The link has to be in this format: Code: <a class="display" href="test.php?test1=textfield1&test2=textfield2">test</a> The reason for this is I need to launch fancybox and as far as im aware this is the best way to call it. So what im hoping is when I add type something in textfield1 this will be reflected in the url. And same for textfield2. I know this can be done easily if I submit the page but I dont want that. Hopefully some javascript/ajax can help me out? I hope im being clear but let me know if im not. Thanks so much! Similar TutorialsHello! I'm currently working on trying to target an anchor based on what the contents of their 'title' attribute is, then apply a href to that anchor. Here is what I have so far Code: function(j){
$meh = $('a#mapThisLocation');
if ($meh.attr('title' == '192-dodge')){
$meh.attr('href', 'http://www.google.com')
}
};
the current html of that anchor when the page loads follows. Code: <a id="mapThisLocation" title="192-dodge"> any thoughts? I want to add a small but informative weather widget to one of my web sites. Having searched around, most are either too big or too simple. I did find "one" that I liked but it links to a lame page. I would rather have no link rather than the one provided. The widget I like is a simple javascript "include file" similar to this one: http://www.gooplusplus.com/external_wx._js Code: // This javascript file is normally dynamically CRON generated
// but for this test, we will just use static values.
document.write(''+
'<a href="http://www.gooplusplus.com/g5.php?p=X&s=box#FAKE-WEATHER-SITE">'+
'<div class="wxbox"> <img class="wximg" alt="Clear" title="Clear"'+
' src="http://newcityvegas.com/pics/nightmoon.png" /> '+
' <div class="wxtemp" title="Temperatu 73°F (23°C)">73°F</div>'+
' <div class="wxvis" title="Visibility: 10 miles">10 miles</div>'+
' <div class="wxother"'+
' title="Wind: Calm, Pressu 1008 hPa (29.76 in Hg), Humidity: 47%">'+
'Wind: Calm<br />Pressu 29.76 in<br />Humidity: 47%'+
'</div></div>'+
'</a>');
I tried to change the (first and only) HREF URL to a NULL value like this: document.getElementsByTagName('a')[0] = null; It did not work and I have not figured out an alternate method. My working test page is he http://www.newcityvegas.com/weatherbox.html with source code below. Any suggestions? Code: <html><head>
<link rel="STYLESHEET" type="text/css" href="weatherbox.css">
</head><body>
<script type="text/javascript"
src="http://www.gooplusplus.com/external_wx._js"></script>
<div style="position:absolute;top:150px;left:0px;margin-left:20px">
<script type="text/javascript">
{
// trying to reassign HREF url
var firstHREF;
var newURL='http://intellicast.com/Local/Weather.aspx?location=USNV0049#subnav';
firstHREF = document.getElementsByTagName('a')[0];
document.write("<font color=red>document.getElementsByTagName\('a'\)\[0\] \=\= </font>");
document.write(firstHREF);
document.write("<br><br>");
document.write("<font color=red>Try to change HREF URL value to NULL \=\= </font>");
document.getElementsByTagName('a')[0] = null;
firstHREF = document.getElementsByTagName('a')[0];
document.write(firstHREF);
document.write("<br><br>");
document.write("<font color=red>Try to set HREF URL value to NEW URL \=\= </font>");
document.getElementsByTagName('a')[0] = newURL;
firstHREF = document.getElementsByTagName('a')[0];
document.write(firstHREF);
document.write("<br><br>");
}
</script>
</div></body></html>
Hello, I am just creating a blog (with blogspot) and the basis is the Lockheart template: http://lockheart-dzignine.blogspot.co.uk/ Problem: I want the thumbnails on the main page to link to the post instead of opening in the shadowbox. I have no clue of javascript, so I hope someone can help me. I think I found the spot where to change it (see bold below), but I need to know what to type in there... How are the BlogPosts named in Blogspot? This is how the Javascript looks like: ______________________________________________ <script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 400; summary_img = 430; img_thumb_height = 150; img_thumb_width = 150; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<div class="crop"><a href="'+img[0].src+'"><img src="'+img[0].src+'" width="270px;" /></a></div>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script> _________________________________ Thanks for your help. 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. Hi Guys, I am looking for a script to change text on a page based on the time of day. From 9am - 5pm weekdays I would like the page to display 'Open', and outside of that window to display 'Closed'. I am using HTML & PHP. Any help would be greatly appreciated. Thanks, Matt I am trying to change a character limit based on items changed in a drop down menu. To do this I have one function that will change the posted count based on the currently selected option and another function that is a commonly used char count with a few tweaks. The main issue is getting the value of the currently selected option. I know that selectedIndex will return the position of the selected element rather than the actual value. I tried to code around that. I've tried every method I could find on google and nothing works. So, I may have a bigger problem on a higher level that I just don't understand. If any of you can take a look at my code and give me your thoughts I would be most appreciative. Thanks! Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript">
function checkTextArea(fromto){
var textstring = "textarea";
var id = textstring + fromto;
var destination = document.forms["form1"].[id.selectedIndex].text;
if (destination=="1") {
var limit = "500";
}
else {
var limit = "1000";
}
if (document.getElementById(id)){
var txt = document.getElementById(id).value;
if (txt.length>limit){
document.getElementById(id).value = txt.substr(0,limit);
}
len = document.getElementById(id).value.length;
span_id = "span" + id;
if (document.getElementById(span_id)){
document.getElementById(span_id).innerHTML = (limit-len);
} // if
} //if
} //function
function chardisplay(fromto) {
var deststring = "dest";
var identifier = deststring + fromto;
// no idea how to make this work...seems to stop working whenever I try to assign it to any kind of variable
// I have also tried assigning .value and .text
// I have also tried naming it with document.forms["form1"].[identifier.selectedIndex]
// also using .value and .text
var harmless = document.getElementById('identifier').selectedIndex;
alert("value="+document.getElementById('identifier').value);
alert("text="+document.getElementById('identifier').options.[harmless].text);
var spanstring = "spantextarea";
var spanidentifier = spanstring + fromto;
if (harmless=="1") {
document.getElementById(spanidentifier).innerHTML = "500";
}
else {
document.getElementById(spanidentifier).innerHTML = "1000";
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="POST" action="myurl">
<p><span id="spantextareafrSOMENUMBER">500</span> characters left </p>
<select name="destfrSOMENUMBER" onchange="javascript:chardisplay('frSOMENUMBER');\" onfocusout="javascript:chardisplay('frSOMENUMBER');\" onblur="javascript:chardisplay('frSOMENUMBER');\">
<option value="opt1">display option 1</option>
<option value="opt2">display option 2</option>
<option value="opt3">display option 3</option>
</select>
<textarea onkeyup="checkTextArea('textareafrSOMENUMBER');" name="mesgfrSOMENUMBER" id="textareafrSOMENUMBER" cols=50 rows=4></textarea>
</form>
</table>
</body>
</html>
I have a list of thumbnails generated by Wordpress. I've been trying to piece together a script that would change the ID of the parent element based on the image inside of it I can't seem to get anywhere, does anyone have a simple solution? I need the id of the li to be "sm" or "smp" depending on the width of the image inside of it (landscape or portrait) Code: <li class="frame" id="sm">
<div class="frm" id="frame1">
<img src="image.jpg">
</div>
</li>
Hello, I am trying to change the value of #name and #category inputs based on the value of select. A friend gave me the code below, but I can't get it to work. Thanks so much for your help Code:
<script type="text/javascript">
$('#Gift_Type').change(function(){
if ($(this).val() == 'Monthly'){
$('#name').val('Partnership')
$('#category').val('Partnership')
} else {
$('#name').val('Donation')
$('#category').val('Donations')
}
})
</script>
Code: <SELECT NAME="sub_frequency" ID="Gift_Type" onchange="OnSelectionChanged (this)"> <OPTION VALUE="1m">Monthly</OPTION> <OPTION VALUE="">One Time</OPTION> </SELECT> Code: <input type="text" id="name" name="name" value="Partnership" /> <input type="text" id="category" name="category" value="Partnership" /> I'm new to coding and recently undertook the position as my school district's webmaster. We use a six day schedule where the days are labeled A-F. I want to be able to display the Today is...A graphic based on the date. I tried some scripts from other forums, but it does not appear to be working. Any suggestions? TY <code> <script language="javascript"> <!-- var picture=''; mytime=new Date(); mymonth=mytime.getMonth()+1; mydate=mytime.getDate(); if (mymonth==9 && mydate==13){picture="<img src=/images/d.gif>"; } if (mymonth==9 && mydate==14){picture="<img src=/images/e.gif width=150 height=150 alt=E>"; } if (mymonth==9 && mydate==15){picture="<img src=/images/f.gif width=150 height=150 alt=F>"; } if (mymonth==9 && mydate==16){picture="<img src=/images/A.gif width=150 height=150 alt=A>"; } if (mymonth==9 && mydate==19){picture="<img src=/images/B.gif width=150 height=150 alt=B>"; } if (mymonth==9 && mydate==20){picture="<img src=/images/c.gif width=150 height=150 alt=C>"; } //--> </script></code> thanks anyway
Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction. I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely. If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks. Hi All, I have a form that captures member registration details. In the admin section .. I would like to change the Status field of a record/s from NEW to PAYMENT DUE after 14 days from the data of submission. The status change should automatically trigger on the 15th day. So when the admin checks the list page he/she should be able to view the updated status field. Any pointers how to accomplish this? Thanks in advance. Vinny Hi there, Where I work there are certain dates where nothing can be done, certain times where work can be done with caution, and dates where work can be done. I want to put on the site a traffic light that would change colours based on the calendar dates where work can/can't be done. For example, if April 11th there is stuff to do, the traffic light would be green. But April 12th, there isn't work to do, it would turn red. Do you know how I would go about doing this? Hi, what would be the best way to have a hidden array of possible text directed at a textarea and then if something is not within that array "onfocus", a certain select option is chosen within that form? Thanks Hi friends, What I have been trying to achieve is, On my index.htm, I have a horizontal cell named "memberarea" which originally shows username & password input fields. After the user logs in, this area changes itself to a "Welcome Name, Lastname" field. I want that this cell displays again the username and password input fields in case of the session of the user has expired. I have tried it with the following code (within the Iframe in index.htm): ----------------------------------------- <script> if ("<%=session("LoginFirstName")%>" == "") { var m = " <p align="center"> <font style="font-size: 8pt; font-weight: 700" face="arial"> Username:</font> <span style="font-size: 1pt"> <input type="text" name="uid" id="uid" size="14" style="width: 65; height: 17; font-size: 8pt"></span><font face="arial" style="font-size: 8pt"> </font><font style="font-size: 8pt; font-weight: 700" face="arial">Password:</font><font face="arial" style="font-size: 8pt"> </font><span style="font-size: 1pt"> <input type="password" name="pwd" id="pwd" maxlength="10" size="14" style="width: 65; height: 17; font-size: 8pt"></span><span style="font-size: 1px"> </span> <input type="submit" value="Enter" name="B1" style="width: 35; height: 17; font-size:9px" onclick="return login()">"; window.parent.document.getElementById('memberarea').innerHTML=m; } </script> -------------------------------------------------- This code gives me the error that on the 12xx'the line (which does not exist-the whole code is 5xx lines). there is a ";" missing which I could not found. Any ideas how to achieve this? Thank you for your comments I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code:
function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}
function valChange(){
var firstList = document.getElementById("emailaddress");
var secondList = document.getElementById("subject");
while(secondList.hasChildNodes())
secondList.removeChild(secondList.childNodes[0]);
switch(firstList.value){
case "1":{
secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
secondList.appendChild(createOption("Other", Other));
break;
}
case "2":{
secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
secondList.appendChild(createOption("Report Spam", Report Spam));
secondList.appendChild(createOption("Report Harassment", Report Harassment));
secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
break;
}
// ....
default:{
secondList.appendChild(createOption("Please select from the first list", ""));
break;
}
}
}
window.onload = valChange;
this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ Hi, I'm using the following Javascript code to show a div layer depending on the URL Code: <script type="text/javascript">
if (location.href.match(/folder/)) {
document.getElementById("div-layer").style.display="block";
}
</script>
This works perfectly when I visit http://www.domain.com/folder but I do not want it to match any subfolders beneath /folder, for example: http://www.domain.com/folder/sub-folder http://www.domain.com/folder/sub-folder2 etc. Does anyone know how I can modify the code to only match /folder or /folder/ and no subfolders beneath it? Thank you in advance. Hi JS Experts, I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data 1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table) 2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103). How can I accomplish the above? Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2. For Example: If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100. If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200 Any help would be really appreciated. Thanks Vinny Hey folks, I have a little problem here, I have two textfield and a botton Text fields: Code:
<input name="rate" type="hidden" id="rate" value="<%= rs_rating.Fields.Item("rate").Value %>" />
<input name="plus" type="hidden" id="plus" value="1" />
<input name="total" type="hidden" id="total" />
<input type="Submit" name="Submit" id="Submit" value="Course Rating " />
Now what I want is something like this input "rate" value + input "plus" value which means if for example if rate (with dynamic value which could be any number) is 4 it will be 4+1 (1 is the static value of input "plus") which will be 5 and that 5 would be the value of input "total" that is the only text field which submit to DB. Just need the JS for that math problem. Thanks folks. anyone would you help me I have some problem to calculate PHP Code: <table width="415" cellspacing="1" cellpadding="1"> <tr> <th width="151" scope="col">Price</th> <th width="189" scope="col">qty</th> <th width="63" scope="col">total</th> </tr> <tr> <td><label> <input name="price" type="text" id="price" value="2000"> </label></td> <td><label> <input name="qty" type="text" id="qty" value="2"> </label></td> <td><label> <input name="total" type="text" id="total" value="4000"> </label></td> </tr> <tr> <td><input name="price" type="text" id="price" value="2000"></td> <td><input name="qty" type="text" id="qty" value="4"></td> <td><input name="total" type="text" id="total" value="8000"></td> </tr> <tr> <td> </td> <td>Total</td> <td><label> <input name="gtotal" type="text" id="gtotal" value="12000"> </label></td> </tr> </table> How to calucate it from price * qty = Total and gtotal=sum of total, in the first rows. Ican do it if there is one row, but i dont know how to calculate samae name of text field like in 2nd or more rows |
|||||||