|
JavaScript - Dynamically Add To A List With Javascript. No Page Refreshing.
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, Similar TutorialsHow 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 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>
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 ? 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. 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. 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! 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/ 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>
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> Hi, please tell how to dynamically insert items in list box in javascript.That is . When ever new element in stored in oracle that should be listed in listbox Sorry for the title- i'm doing my best to describe my problem. So this is basically it: I have some javascript onmouseover events that change the content of an iframe. The problem is that within the javascript calls, I have some url's attached to rollover buttons INSIDE the parent div's that are being manipulated by javascript. So the iframe refreshes properly when its supposed to, but it ALSO refreshes as each of the links inside the effected div are rolled over as well. So there is too much extra refreshing and lots of clicking noises because of the Internet Explorer default noise settings. The easiest way to see what im talking about is to go to: http://maybetheworldisending.com/fre...HOMEPAGE_jan4/ An example of the problematic code is as follows: Code: <div class="beachcomberoff" target="mainbox" onmouseover="ShowPage('frame1_slider');this.className='beachcomberon'" onmouseout="this.className='beachcomberoff';">
<div id="turquoise1"><a href="#"></a></div><div id="coral1"><a href="#"></a></div><img src="HOMEPAGE_jan4_web/beachcomber.png" width="453" height="330" border="0"></div>
The prob is that the div's named turquoise1 and coral1 are being effected by the javascript on the containing div. How do i make it unaffected by that js? Is there something like a "onmouseover=do nothing" or something of the sort? 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 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> Hi, I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now. The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again? I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution: 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">
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//<![CDATA[
function store(element) {
// store values
var cl = element;
var text_list = new Array();
var value_list = new Array();
var length = cl.length;
for (var foo=0; foo<length; foo++) {
text_list[foo] = cl.options[foo].text;
value_list[foo] = cl.options[foo].value;
alert("text array " + foo + " " + text_list[foo]);
alert("value array " + foo + " " + value_list[foo]);
}
populate(cl, text_list, value_list);
}
function populate(element, text, value) {
// populate options with previously stored values
var cl = element;
var length = cl.length;
cl.options.length=0;
for (var bar=0; bar<length; bar++) {
cl.options[bar]= new Option(text[bar], value[bar], false, false);
}
}
function crafty_set_country(code) {
var cl = document.getElementById('select');
store(cl);
for (var i=0; i<cl.length; i++) {
if (cl.options[i].value == code) {
alert(cl.options[i].value + " found");
var value = cl.options[i].value;
var text = cl.options[i].text;
cl.options.length=0;
cl.options[0]=new Option(text, value, true, true);
/*
for (var j=0; j<cl.length; j++) {
alert("second loop " + cl.options[j].text);
if (cl.options[i].value != code) {
cl.options[j]
}
}
*/
} else {
alert(cl.options[i].value);
}
}
}
//]]>
</script>
</head>
<body>
<form>
<select id="select">
<option value="10">ten</option>
<option value="20">twenty</option>
<option value="30">thirty</option>
<option value="40">fourty</option>
<option value="50">fifty</option>
<option value="60">sixty</option>
</select>
<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">
</form>
</body>
</html>
Many thanks! Martin hi i am totally frustrated !! i have been using this on my webpage. http://www.barelyfitz.com/projects/tabber/ if u see under the advanced section there is a code for changing tabs dynamically. Code: document.getElementById('mytab1').tabber.tabShow(0);
this doesn't work. basically i have a webpage internet.htm. which has a menubar with loads of menu items. if i click one of the submenu items this code should change the dynamic tabs in admin.htm. the code i have defined for the submenu click is: Code: <li><a href="admin.htm" onClick="document.getElementById('Admin').tabber.tabShow(0)" >Forms</a></li>
the full code is: Code: <ul id="QualityMenuBar" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#"><strong>Admin</strong></a>
<ul>
<li><a href="AdminDocuments.htm" onClick="document.getElementById("Admin").tabber.tabShow(0)" >Forms</a></li>
<li><a href="AdminDocuments.htm" >Guidance</a></li>
<li><a href="AdminDocuments.htm" onClick="document.getElementById("Admin").tabber.tabShow(2)" >Organisation Chart</a></li>
<li><a href="AdminDocuments.htm">Plans</a></li>
<li><a href="AdminDocuments.htm">Procedures</a></li>
</ul>
</li>
this is what the admindocuments.htm contains, based on the website link i have borrowed the code from. Code: <div class="tabber" id="admin">
<div class="tabbertab">
<h2>Forms</h2>
<script type="text/javascript" src="adminForms.js"></script>
</div>
<div class="tabbertab">
<h2>Guidance</h2>
<script type="text/javascript" src="adminGuidance.js"></script>
</div>
<div class="tabbertab">
<h2>Org. Chart</h2>
<script type="text/javascript" src="adminOrg.js"></script>
</div>
<div class="tabbertab">
<h2>Plans</h2>
<script type="text/javascript" src="adminPlans.js"></script>
</div>
<div class="tabbertab">
<h2>Procedures</h2>
<script type="text/javascript" src="adminProc.js"></script>
</div>
</div>
whenever i click the submenu they all point to the first tab only. it doesn't change inspite of the code. what am i doing wrong here? please advice. Many thanks. I've done some googling and have come across some information, but I'm not quite sure how to apply it to my problem. I have a PHP page saturna.php with six frames on it using the frameset commands. I would like to somehow make it so that when I click on something in one frame (with one PHP page loaded in it - game.php), it automatically/dynamically updates one of the other PHP pages (inventory.php) in another frame. What will happen is when the thing is clicked on in game.php, an entry will be added to the database, and the second PHP page (which retrieves information from the database) will notice that there is a new relevant record, and will add it to the inventory.php page in the table I have constructed there. From my googling it seems I need to use JavaScript to do this, but I'm not quite sure how - any ideas ? Thanks very much! I'm attempting to run a small piece of code that will execute one of two source js files on my server. I have no problem creating the proper DOM script object with the proper type and conditional src value. However, when i add it to the document it does not seem to execute. I've tried adding it in two places, both using .appendChild(); myLocation.parentNode.appendChild(newScript); and document.getElementsByTagName("head")[0].appendChild(newScript); (myLocation is a calculated element representing the current script tag) In both these cases, the script tag is added to the document where I intended, but it does not appear to execute. The src has some doc writes in it and the tags the new script should generate right after itself are not there, as they are when I hard code the new sourced script tag into the document. All in all, my confusion comes from the fact that when I write a <script ... src="mysrc.js"></script> into my document, it behaves differently than when I have a script write an identical tag into the document in the same location. Also, fyi, I'm currently using Chrome (though I will require a multi-platform solution). Thanks for your time. I'm new here and this is my first post, I hope I can find help here. How can i dynamically generate this type of form element in javascript, including the table rows and columns enclosing the form elements and whenever that 'Add More' button is clicked, a new instant of the same form will generated and select drop down list populated. I have try to google for solution, but without success. I code in PHP, but i need it to integrate in my code. Thanks for your help. |
|||||||