|
JavaScript - Clear Font Selections Without Refreshing Page
I have the below code i been trying to figure out how to reset the font changes made without having to refresh the website (f5).
Currently I have created a button that onClick uses history.go(0) which refreshes the page removing the font changes. I would like help with figuring out a solution to reset (remove font) step1-5 without having to refresh the page. Thanks. Preview of Code Code: <html>
<head>
<title>My Title Page</title>
<script type="text/javascript">
function selectTextArea()
{
document.FormTextArea.TextAreaBox.select();
document.FormTextArea.TextAreaBox.focus();
}
function changeStepColor(id)
{
document.getElementById(id).style.font="italic bold 15px arial,serif";
}
function inputPrompt(String , msg)
{
String=prompt(msg, "");
if (String!=null && String!="")
{
document.FormTextArea.TextAreaBox.value=document.FormTextArea.TextAreaBox.value + msg + ' ' + String + '\r' +
'----------------------------------' + '\r'
}
else
{
document.FormTextArea.TextAreaBox.value=document.FormTextArea.TextAreaBox.value + msg + ' N/A' + '\r' +
'----------------------------------' + '\r'
}
}
</script>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td width="50%" align="center" valign="top">
<form name="FormTextArea">
<textarea name="TextAreaBox" cols="40" rows="12" wrap="virtual"></textarea>
</form>
</td>
<td width="50%" valign="top">
<font size="2" id="step1">1. Step One</font>
<input type="button" value="Input" onclick="inputPrompt('a', 'Step 1:'); changeStepColor('step1');" /><br />
<font size="2" id="step2">2. Step Two</font>
<input type="button" value="Input" onclick="inputPrompt('a', 'Step 2:'); changeStepColor('step2');" /><br />
<font size="2" id="step3">3. Step Three</font>
<input type="button" value="Input" onclick="inputPrompt('a', 'Step 3:'); changeStepColor('step3');" /><br />
<font size="2" id="step4">4. Step Four</font>
<input type="button" value="Input" onclick="inputPrompt('a', 'Step 4:'); changeStepColor('step4');" /><br />
<font size="2" id="step5">5. Step Five</font>
<input type="button" value="Input" onclick="inputPrompt('a', 'Step 5:'); changeStepColor('step5');" />
</td>
</tr>
<tr>
<td width="50%" align="center" valign="top">
<input type="button" value="Select Text Area" onClick="selectTextArea()" />
<input type="button" value="Clear Text Area" onClick="document.FormTextArea.TextAreaBox.value=''; history.go(0)" />
</td>
<td width="50%" align="center" valign="top">
 
</td>
</tr>
</table>
</body>
</html>
Similar TutorialsI am a music geek. I am also a Javascripter who doesn't know much, but enough to get around the language. Anyways, I wrote a script to construct chords to make writing music easier for me. The script works, it shows there are no errors, and it does what I want it to do, but the page keeps refreshing almost immediately after the Alert box goes away. I have no idea whats going on. I don't know if it's the JS or the HTML part of the page. If you have any ideas that would be great. Code: <head>
<script>
function calc()
{
var type, note, root, third, fifth, seven, ans;
var notess, notesb;
type=document.f1.type.value
note=document.f1.note.value*1
notess=["A","A#","B","C","C#","D","D#","E","F","F#","G","G#"]
notesb=["A","Bb","B","C","Db","D","Eb","E","F","Gb","G","Ab"]
if(type=="maj")
{
root=notess[note]
third=notess[(note+4)%12]
fifth=notess[(note+7)%12]
seven=notess[(note+11)%12]
ans=root+", "+third+", "+fifth+", "+seven;
alert(ans)
}
if(type=="min")
{
root=notess[note]
third=notess[(note+3)%12]
fifth=notess[(note+7)%12]
seven=notess[(note+11)%12]
ans=root+", "+third+", "+fifth+", "+seven;
alert(ans)
}
document.getElementById("here").innerHTML=ans
}
</script>
</head>
<body>
<h1>Chord Builder</h1><p>
<form name="f1">
Make a:<br>
<select name="note">
<option value="0">A<br>
<option value="1">A#/Bb<br>
<option value="2">B<br>
<option value="3" selected>C<br>
<option value="4">C#/Db<br>
<option value="5">D<br>
<option value="6">D#/E<br>
<option value="7">E<br>
<option value="8">F<br>
<option value="9">F#/Gb<br>
<option value="10">G<br>
<option value="11">G#/Ab<br>
</select>
<select name="type">
<option value="maj" selected>Major<br>
<option value="min">Minor<br>
</select>
<br>
<button onClick="calc()">Make my Chord!</button></br>
</form>
<span id="here">-chords will be here soon-</span>
<p>
</body>
Hi, Im not sure if im going about this the right way but what I'm trying to achieve is to have my webpage seperated into two main div's. The first div contains a media player so it cant be refreshed or the media stops. The second div is used to view content. I've used innerHTML to change the content of the second div from links in the first. The problem is the URL displayed doesn't reflect the change in content of the second div. I want to be able to load content into the second div using innerHTML while changing the URL so people can link directly to that content. Any help or alternative ideas are greatly apprectiated. Thanks. My URL is: http://localhost/testproject/product.html#catId=155 I want to URL: http://localhost/testproject/product.html without refreshing the page. Is this possible using javascript/jquery or not ? Hello! I have been designing a schedule website which will be displayed on several computers throughout the building, I would like to be able to edit the JS during the day but I do not want to be going all through the building refreshing every computer to make sure it has the latest JS version. I also do not want use the meta HTML tag to refresh because that is too noticeable with the images reloading. Basically I would like to only refresh the JS file. I found this link, but it has a button which defeats the purpose. Any way of doing this without the button? FYI, I have the javascript setTimeout("driver()",1000); already so that the clock stays up to date. Not sure if that will make things easier or more complicated... EDIT: not sure why the ICODE tags are not working EDIT 2: Forgot the website! http://www.philnicholas.com/2009/05/...ing-your-page/ D.I.C Head ** Joined: 29 Jan, 2009 Posts: 94 Thanked: 1 times My Contributions Hello, I am teaching myself javascript and in the course of my experimentation have run into this roadblock: I want to display a styled navigation bar with a button beneath it. When the button is clicked, an onclick event will be triggered and the response of the browser should be to print the word "test" right beneath the button. However, what actually happens is the page blanks out and the word 'test' appears in the upper left corner of the screen. I'm hoping someone would be kind enough to fix this code and explain to me where I've gone wrong here. CODE <html> <head> <title>JavaScript Navanimation Example</title> <style type="text/css"> #navsite h5 { display: none; } #navsite ul { padding: 3px 0; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif; } #navsite ul li { list-style: none; margin: 0; display: inline; } #navsite ul li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none; } #navsite ul li a:link { color: #448; } #navsite ul li a:visited { color: #667; } #navsite ul li a:link:hover, #navsite ul li a:visited:hover { color: #000; background: #AAE; border-color: #227; } /* #navsite ul li a#current { background: white; border-bottom: 1px solid white; } */ </style> </title> <script language="JavaScript" type="text/javascript"> function navanimate() { document.write("test"); return false; } </script> </head> <body language="JavaScript" type="text/javascript"> <div id="navsite"> <h5>Site Navigation</h5> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/archives/">Archives</a></li> <li><a href="/writing/">Writing</a></li> <li><a href="/speaking/">Speaking</a></li> <li><a href="/Contact/">Contact</a></li> </ul> </div> <input type="button" name="button" value="Drop Down" onclick="return navanimate()"> </body> </html> Thanks! Hi Everyone I'll explain the situation first: I need to build a website that allows students to select from a drop down list and then hit an 'Add button'. From there, that value will go to another part of the screen and display as bullets. Once that list is built, they can hit a final submit button that sends an email to someone with everything they selected. More Detail: LEFT SIDE OF SCREEN: [DROP DOWN LIST] <- this will have all the courses listed that we offer. Once once is selected. [ADD] <- add button that puts the values from the dropdown list to an array. RIGHT SIDE OF SCREEN: My Courses: * TEST1001 * TEST1002 This is being updated dynamically so that whenever the add button is hit, this lists grows. [SEND] <- Send button Thank you, hi everyone, Here's part of the codes I got from our website. Right now, when someone wants to register on our website, they have to put into the Captcha after they finish all the other information. If the captcha is empty, there would be an alert; if it's wrong, the page would be refreshed, and there would be another alert, and at the same time, all the information would be lost and they have to fill them again. Now the question is, how can I stop the page refreshing itself? All I need is an alert and then you could retype the captcha without losing the other information. Thank you in advance for your advice! <script type="text/javascript"> function ltrim(stringToTrim) { return stringToTrim.replace(/^\s+/,""); } function validateForm() { var okSoFar=true with (document.practitioner_profile) { if (firstname.value=="" && okSoFar) { okSoFar=false alert("Please enter your first name.") firstname.focus() } if (lastname.value=="" && okSoFar) { okSoFar=false alert("Please enter your last name.") lastname.focus() } //some other things here... if (verify_code.value=="" && okSoFar) { okSoFar=false alert("Please enter your security code.") verify_code.focus() } if (okSoFar==true) submit(); } } //here's the submit button in the html code, <div class="practsubmit"> <div class="signupform"><h4>* Security Code:</h4> <p>Please type in what you see in the box below and press submit. Characters are case-sensitive.</p></div> <div class="signupform"><img id="captcha" src="index.php?option=com_egbcaptcha&width=150&height=50&characters=5" /><br /><input id="verify_code" name="verify_code" type="text" /></div> <input type="button" class="button" value="Send" name="B1" ONCLICK="javascript:validateForm()"> <input type="reset" class="button" value="Clear" name="clear"> </div> How can I execute this: From the dropdown list build up from mysql database (say a list of fruits). I select "Add New Fruit". This triggers it to either have a modal form to add new fruit or a table form. Once submitted, Select dropdown list RELOADS including the newly added data (fruit) without reloading the whole page which contains other form control such as textbox. is it possible to refresh a select list on it's own without refreshing the whole page?
I have home page with session close button and 10 child window link and i am opening all child window.All child windows should close after clicking on session close button. Code bellow <html> <script type="text/javascript"> openWins = []; curWin = 0; function openWin(page) { openWins[curWin++] = window.open(page,'_blank'); } function closeAll() { for(var i=0; i<openWins.length; i++) if (openWins[i] && !openWins[i].closed) openWins[i].close(); } window.onunload = closeAll; </script> <body > <input type="button" onClick="openWin('http://www.google.com');" value="Open PopUps"> <input type="button" onClick="closeAll('http://www.google.com');" value="Close PopUps"> </body> </html> how could i save radio buttons choices especially when i have many groups of radio buttons. i mean when refreshing the page they stay as they are.
I have a search form and added the "Clear All" Button functionality...but it clears the last part of the search form display preferences....how do I only clear the checkboxes at the top of the form only and not at the bottom of the form between the <DIV> tags? I have attached a copy of the JSP page. I have a vertical menu in which the sub menu is a box that pops out to the right and the user can click boxes to make selections (input check boxes). I would like some way to indicate to the user after they have left the sub menu, that they have made selections within that sub menu. Perhaps a number after the menu item name, in which the number of sub menu selections are indicated in parenthesis? Is this possible? Dear all, Below the html and java code. After viewing using Internet Explorer, I did a selection from the autodropdown. Then I click on Click here to go to other page . You will see a quite different webpage. Then I click on the back button, in the left upper corner of IE window, so I see the previous webpage but.... the autodropdown does not remember my selection . How can we solve this? <html> <Head> <Script Language=JavaScript> Level1 = new Array("Ceramics","Chemicals") Ceramics = new Array("ELECTRONICS","ENVIRONMENTAL") Chemicals = new Array("METALLIC_SOAPS","OLEOCHEMICAL_DERIVATIVES") ELECTRONICS = new Array("Solder mask") ENVIRONMENTAL = new Array("Catalysts") METALLIC_SOAPS = new Array("Soap","Translucent soaps","Liquid soa[") OLEOCHEMICAL_DERIVATIVES = new Array("FA-pos","FA polfaideriv") function fillSelect(isValue,isNext){ isNext.style.display = ""; isNext.length = 1; curr = eval(isValue); for (each in curr) { isData = new Option(curr[each],curr[each]); isNext.add(isData,isNext.options.length); } } function getValue(isValue){ } </Script> </Head> <body> <center> <h4>Dependent Select List, within a form</h4> <Form name='Categories'> <p>Segment <Select name='List1' onChange="fillSelect(this.value,Categories.List2)"> <option selected>Make a selection</option> </Select> </p> <Select name='List2' onChange="fillSelect(this.value,Categories.List3)"> <option selected>Make a selection</option> </Select> <p></p> <Select name='List3' onChange="getValue(this.value)"> <option selected >Make a selection</option> </Select> </Form> </center> <Script> fillSelect('Level1',Categories.List1) Categories.List2.style.display = "none"; Categories.List3.style.display = "none"; </Script> <p>Click <a href="http://www.hetnet.nl">here</a> to go to other page</p> </body> </html> Hi, I'm learning javascript and not sure what the script language is capable of. Is there a way to make radio button selections appear in a second popup window? Example: user selects various options from a page then clicks button to open a second window with select options showing up in list. Thanks for reading this. I had a different question that no one seemed to be able to answer here, so I found a different way of approaching the situation. I need to make an element in JS, then display it in a place (preferably in a position right after the selected text on the page using getSelection) or, in a fixed position. For some reason, this code won't work in FF3.5 (Win7) or Chrome although the basic stuff was taken straight from Mozilla's website: Code: function showSelectBox(){
var textlength = text.length;
var element = document.createElement('div');
element.setAttribute('id','select');
element.innerHTML = textlength+"/140<div id=\"t-icon\"><a href=\"#\" onclick=\"emptySelection();\"><img src=\"imgs/t-icon.gif\" /></a></div>";
}
Hello, I need some help! I have some code that has a comments box and 2 radio buttons that ask if you want to be contacted about your comments. If you select "Yes", you get another set of radio buttons that ask you to choose a method of contact. When you choose a method, that selected methods value is parsed to the top of the textarea field, placing the comment below. I pretty much have it working, however, if I enter a comment in the "Comments" field, select "Yes", then select "email" and change to "Phone Morning", it concatnates the values in the textarea box instead of replacing the contact method value while still retaining the comment entered below. Also, if at all possible, I wanted to clear only the contact method value out of the textarea field and leave only the comment when you go back and click the "No" radio button. Can anyone please help? Thanks in advance! Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript'>
function showContactType(obj){
if(document.storeCodeFeedbackForm.contact[1].checked == true){
document.getElementById("contactType").style.display = 'inline';
}else if(document.storeCodeFeedbackForm.contact[0].checked == true){
for(i=0;i<document.storeCodeFeedbackForm.contactType.length;i++){
document.storeCodeFeedbackForm.contactType[i].checked = false;
}
document.getElementById("contactType").style.display = 'none';
}
}
function printContactType(src)
{
if(src.checked)
document.storeCodeFeedbackForm.customerMessage.value = src.value + "\n" + "------------------------" + "\n\n" + document.storeCodeFeedbackForm.customerMessage.value;
document.storeCodeFeedbackForm.customerMessage.focus();
}
</script>
</head>
<body>
<form name="storeCodeFeedbackForm">
<table>
<tr>
<td>Comments:<br />
<textarea id='textArea' name="customerMessage" cols="30" rows="10"></textarea>
<br />
</td>
</tr>
<tr>
<td> Would you like to be contacted about your comments? <span style="color:#990000; font-weight:normal">*</span>
<input type="radio" name="contact" value="no" onclick="showContactType(this);disableField(this);">
No
<input type="radio" name="contact" value="yes" onclick="showContactType(this)">
Yes </td>
</tr>
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" width="100%" id="contactType" style="display:none">
<tr>
<td class="tir" style="border-top:1px dashed #cccccc; padding-top:5px;">(Choose One)<span style="color:#990000">*</span>
<input type="radio" name="contactType" value="Contact me by: e-Mail" onClick='printContactType(this);'>
e-Mail
<input type="radio" name="contactType" value="Contact me by: phone in the morning" onClick='printContactType(this);'>
Phone Morning
<input type="radio" name="contactType" value="Contact me by: phone in the afternoon" onClick='printContactType(this);'>
Phone Afternoon
<input type="radio" name="contactType" value="Contact me by: phone in the evening" onClick='printContactType(this);'>
Phone Evening</td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>
Hi all, I am in the process of developing a calculator for some of my colleagues to use. One of the variables within the calculations is called PMH. I want to determine the value of PMH based on which checkboxes are ticked. Each checkbox has a different value. If the checkbox is not ticked, then the value of each option is 1 and obviously more than one checkbox may be ticked. I have created the checbox code: Code: <td><input type="checkbox" name="PMH" value="1.6" /> Smoker<br />
<input type="checkbox" name="PMH" value="0.4" /> CCF<br />
<input type="checkbox" name="PMH" value="0.5" /> Pulmonary Oedema / Cirrhosis<br />
<input type="checkbox" name="PMH" value="0.8" /> COAD<br /></td>
but I have no idea on how to calculate what I need for var PMH. Can someone guide me as to what I need to do please? Cheers, mads Hullo again, CF.com, So, now I have a curious question on arrays, selections, options and the like. My current project is available for perusal in order to assist me at: http://www.projectvoid.co.uk/ As you can see, I make it so that once the product type is selected, you can then select a wattage. This dependent drop-down works, however I want it so that when I select a value in the left-hand side (wattage), then the one on the right will offer a pre-defined value that replaces the wattage I have. For example, a GU-10 in 'Type of Lamp' offers a 50, 35 and 20 watt bulb in 'Current Lighting Products'. In 'Energy Efficient Products', it offers 5 and 3. I wish to make a statement somewhere so that if they select 50 on the left, it selects 5 on the right. If they select 35 on the left, it select 3 on the right. I would also like it to do multiple offers, so that if they select say, a 35 of the MR-16, I want the right hand side to offer both 5 and 3. The only way I can think of doing this is via a lot of 'IF' statements. Is there a quicker way to do this? Please assist and, if it's not too much to ask, could you comment the code? Thank you! Hi everyone, I'm new here, I actually found this site by searching for the code I have a question for. I'm trying to show/hide different drop down selectors, depending on what is chosen in another drop down selector. I modified a script (I found he http://www.codingforums.com/showthread.php?t=98406) in a way that I thought would work, but its not. Can anyone help me with what I'm doing wrong? Here is my page: http://www.leatherexpressonline.com/...er/testing.php Here is my javascript: http://pastie.org/3344253 And my drop downs: http://pastie.org/3344258 Also, I don't want the drop downs (ids: grade1000color, grade1500color, grade2000color, grade2500color, grade3000color, grade5000color) to be shown when the page is first loaded. Only when the correct option is chosen on the drop down. So I'm guessing I should add a display:none style to those drop downs, then have them shown on the javascript? Thanks so much for the help |
|||||||