ameliabob Posted October 31, 2014 Share Posted October 31, 2014 I have created an HTML page that will not allow me to move on to a second page. It loads correctly; but when I click on a button it goes though the routine but then reloads the original page. I have tried a number of deletions to pin this down but I am hoping a fresh pair of eyes will see the problem. <!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" lang="en-US"><script type="text/javascript"> function SetStation(whichSta){ stationID = whichSta; document.getElementById("thisFunction").value = "Input Family Name"; s = "<div id='keyNames'> "; s += "<input style='font-size:20px'id='thisFunction' /> "; s += "</div>";alert(s); document.getElementById("myForm").innerHTML = s; } </script><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Barnabas Family Usage</title><!-- <link rel="stylesheet" type="text/css" href="barnabas.css" /> --></head><body width='100%'><div id='header'><div id="hdgline" align='center' style >Barnabas Usage</div><table width='100%' align='center' style="background:blue; color:white;"> <td width='10%'><button>Reset</button></td> <td style='font-size:24px' id="functionToDo" width='80%' align='center'>Function To Do: <input style='font-size:24px'id='thisFunction' value="Select Station" /></td> <td width='10%'><button>Help</button></td></table></div><form width='100%'; style="background:#d5dcef;position:absolute; top: 85px; left:0; right:0; bottom:0;"><form id='myForm' ><div style="position:relative; left:40em;"><p class="legend">Select Station</p><fieldset align='center' id="stations"><p id="buttons"><button onclick="SetStation('11')">Crisis</button></p><p id="buttons"><button onclick="SetStation('12')">Dental</button></p><p id="buttons"><button onclick="SetStation('13')">Food Pantry</button></p><p id="buttons"><button onclick="SetStation('14')">Medical</button></p><p id="buttons"><button>Reports (Needs Password)</button></p></fieldset></div></form> <!-- end of 'myForm' --></form> <!-- end of main form --></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted October 31, 2014 Share Posted October 31, 2014 One solution is to not wrap the buttons in a form, they're casuing the form to be submitted. Forms are only intended to submit data to other pages, since you're not doing that you don't need a form. I'd recommend using HTML 5 rather than XHTML Transitional. Using a Transitional doctype was a bad practice even 10 years ago. Validate the HTML When the HTML isn't valid you can't be sure that Javascript will work right. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now