|
JavaScript - Page Refreshing?
I 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>
Similar TutorialsHi, 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, 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> 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>
is it possible to refresh a select list on it's own without refreshing the whole page?
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, 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. 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.
hers the site i am working onhttp://merucabs.com/cabvertise as you can see on this page. there are two main div(left,right) when a user clicks a link on left div accordingly an external page is loaded in the right div problem is when you click a link in IE the entire page is refreshed. I don't want to refresh entire page. i want to refresh the div (on the right) not the entire page. How should i go about it Please its urgent. any help would be grateful. Here's the link to script that i have used http://www.dynamicdrive.com/dynamici...tent/index.htm hi there. i have a classic asp page that is using the winhttprequest object to get the contents of website from a different server. Then i modify the html i get to suit my needs.. save it to a file, and then finally, i display this stuff in an IFRAME. (i wrapped a div tag around the iframe so technically, i'm doing something like: "divtabframe.innerHTML = '<IFRAME SRC='myserver/somepage.html'></IFRAME>) My problem is that when i refresh the main page, i want the iframe to also display the latest data. It does get the latest data from the external site and its saved in "somepage.html". But the iframe isn't updated unless i explicitly right-click inside the frame and manually select refresh. I have added a <meta http-equiv="refresh" content="30"> line to make it auto refresh on it's own. But the users find it annoying that the page refreshes while they're working on it. They prefer to have their own button that will refresh both the main page that gets the data, and the iframe to read the new file. I tried to use document.getElementById(FrameID).contentDocument.location.reload(true); in various spots but it's not happy. i keep getting an error message that the object is null or doesn't exist. I also tried using contentWindow instead of contentDocument. made no difference. Any ideas? I'm using this code to force a PHP form to redirect. I already inserted a header for PHP and for whatever reason it's not working. This code works like a dream in Firefox, but it continuously loops in IE and makes it impossible to enter anything into the PHP form <body onload="javascript: self.location.href = 'index.html';"> </body> Does anyone know how to make this code not refresh IE literally every second? Thanks. I embedded the following into my blog; Code: <br><script language="javascript" src="http://www.quotedb.com/quote/quote.php?action=random_quote&=&=&"></script> <br> It works fine, but I'm trying to find a way to refresh only the script on my blog, instead of having to reload the entire page. Coding a refresh button, for instance. How would I go about doing this? Thank you in advance. Hi, In page load of an asp.net, I am creating some dynamic checkboxes.. How can I use the javascript to refresh these checkboxes without loading the whole page? Regards, batool Hey everyone, I'm just trying to figure out if it is possible to swap the pages background image when a button is clicked without refreshing the page? I've looked around and can't really find anything helpful. Any tips or pointers in the right direction would be much appreciated Thanks YD While these questions have probably been asked before, separately, I'd like to know how to put them together. What I want to do, is create a link, that goes to an url that I decide, after which, the page goes back to the previous page and refreshes. It would be ideal, if that could be done with AJAX, but that's probably asking too much. Especially if I want to use it for wordpress. Hello, First post here. I have the need to create a popup after a delay. The problem I'm getting is that the parent page is refreshing automatically from the action of creating the popup. I don't want the parent page to refresh! This is what I currently have: Code: $popupScript = '
<script language="JavaScript">
setTimeout("window.open(\'index.php?do=renew\',\'Popup1\',\'toolbar=0, width=500, height=500\')",' . $delay . ');
</script>';
The page is in php, so that's why I have it as a string, which I later pass to a template page. This would simply be: Code: <script language="JavaScript">
setTimeout("window.open('index.php?do=renew','Popup1','toolbar=0, width=500, height=500')",6000);
</script>
... if it was placed straight into the HTML. Incidentally, it's included into the HTML HEAD area, not the body, as the original source of the script suggested: http://www.itechies.net/tutorials/js...op-delayed.htm $delay is the delay before the popup opens, in microseconds (so 6000 would be 6 seconds). What can I do to have the same delayed auto-popup functionality, but without it automatically refreshing the parent page where the above code resides? As some background to what I'm achieving: The issue with not wanting the parent page to refresh is that each time it does, the login session gets extended. The popup itself (which I already have working ok) provides a 'continue working' function, or close and refresh the parent is nothing has been done after a short period. Any help very welcome. Hi, Having worked out how to send one input data using ajax, I then needed to send a form with multiple inputs. I believe I can't do this with AJAX so have tried to implement it using JQuery. The problems I am having is that my page is refreshing when I click on submit and the data is not being sent. I am more than happy to look at other ways to do this if JQuery is not the answer. All I want is a page that doesn't refresh or redirect but does submit a form. My form is: Code:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".submit.contents").click(function(){
var para1 = $('#para1').val();
var para2 = $('#para2').val();
var para3 = $('#para3').val();
var para4 = $('#para4').val();
var para5 = $('#para5').val();
var para6 = $('#para6').val();
var dataString = ('para1='+ para1)+('para2='+ para2)+('para3='+ para3)+('para4='+ para4)+('para5='+ para5)+('para6='+ para6);
var data = 'datastring='+encodeURI(document.getElementById('datastring').value);
$.ajax ('insertcontents.php',data,function(data){
$('.result').html(data);}
});
});
</script>
</head>
<body>
<form action="" name="contents" id="contents" method="post"/>
<div class="standard">
<div class="scroll">
<textarea rows="6" cols="60" class="input" name="para1" id="para1" >
Insert Paragraph 1
</textarea>
</div>
<br />
<br />
<div class="scroll">
<textarea rows="6" cols="60" class="input" name="para2" id="para2" >
Insert Paragraph 2
</textarea>
</div>
<br />
<br />
<div class="scroll">
<textarea rows="6" cols="60" class="input" name="para3" id="para3" >
Insert Paragraph 3
</textarea>
</div>
<br />
<br />
<div class="scroll">
<textarea rows="6" cols="60" class="input" name="para4" id="para4" >
Insert Paragraph 4
</textarea>
</div>
<br />
<br />
<div class="scroll">
<textarea rows="6" cols="60" class="input" name="para5" id="para5" >
Insert Paragraph 5
</textarea>
</div>
<br />
<br />
<div class="scroll">
<textarea rows="6" cols="60" class="input" name="para6" id="para6" >
Insert Paragraph 6
</textarea>
<br />
</div>
<br />
</div>
<br />
<br />
<input type="submit" value="Submit" id="contents" name="contents" />
</form>
My insertcontents.php is: PHP Code: <?php $con = mysql_connect("localhost","user","password"); if (!$con) { die('Could not connect ' . mysql_error()); } mysql_select_db("mydb", $con); //mysql_real_escape $sql="INSERT INTO content (PId,para1,para2,para3,para4,para5,para6,date) VALUES ('{$_SESSION['Id']}','{$_POST['para1']}','{$_POST['para2']}','{$_POST['para3']}','{$_POST['para4']}','{$_POST['para5']}','{$_POST['para6']}',NOW())"; $result=mysql_query($sql) or die('Error: ' . mysql_error()); echo "Thank you for your post"; mysql_close($con); ?> |
|||||||