|
JavaScript - Using Javascript To Submit An Html Form To A Pop-up
I am not familiar with javascript only html, but I have researched this problem and found some solutions, but I am unsure what to do with them.
I have an html checkbox form that lists book titles. The user will click on the checkbox next to the titles that interest them. Then when they click submit, I want a pop-up box to appear with the titles they selected in a printable list. I found this javascript code: Code: <script langauge="javascript" type="text/javascript">
function openPreview() {
var myWin = window.open ("popup.htm","myWindowName","width=500,height=350");
myWin.focus();
}
</script>
Then here is my html form code: Code: <form action="" form id= "myInput">
<table width="523">
<tr><td width="33"> <input type="checkbox" name="product" value="Ironman"></td>
<td width="229"><div align="left">Ironman</div></td>
<td width="174">Chris Crutcher </td>
<td width="56" align="right"> </td></tr>
<tr><td><input type="checkbox" name="product" value="Staying Fat for Sarah Byrnes">
<th><div align="left">Staying Fat for Sarah Byrnes </div></th>
<td>Chris Crutcher </td>
<td align="right"><tt>Realism</tt></td>
</tr>
<tr><td><input type="checkbox" name="product" value="The Watsons Go to Birmingham">
<th><div align="left">The Watsons Go to Birmingham </div></th>
<td>Chrisopher Paul Curtis </td>
<td align="right"> </td>
</tr>
</table>
<input type="button" id="btnPreview" name="btnPreview" value="Preview" onclick="openPreview()" />
</form>
Then on the popup.htm page I have this code Code: <script language="javascript" type="text/javascript">
document.write(window.opener.document.getElementById("myInput").value);
</script>
This code has worked for me when the form is a textarea or a label, but I don't know how to use it with a checkbox form. I know that labeling the form "my input" only works for textarea or labels, so I understand why the pop-up menu says undefined. What do I need to do to get the checkbox data to appear. Similar TutorialsI've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes. I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return. html form: Code: <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
<table cellspacing="5" style="border: 2px solid black;">
<tr>
<td valign="top">
<table cellspacing="5">
<tr>
<td>*First name</td>
<td align="right"><span id="valid_one"></span></td>
<td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
</tr>
<tr>
<td align="left">*Last name</td>
<td align="right"><span id="valid_two"></span></td>
<td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
</tr>
<tr>
<td align="left">*Email address</td>
<td align="right"><span id="result"></span></td>
<td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
</tr>
<tr>
<td align="left">*Phone number</td>
<td align="right"><span id="valid_three"></span></td>
<td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
</tr>
<tr>
<td align="left">*City/Town</td>
<td align="right"><span id="valid_four"></span></td>
<td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<select name="s">
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="MC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming
</select>
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><span id="error"></span></td>
</tr>
<tr>
<td valign="top">*Anti-Spam Verification</td>
<td></td>
<td id="reCaptcha"></td>
</tr>
</table>
</td>
<td valign="top">
<table cellspacing="5">
<tr>
<td align="left">*Affiliation</td>
<td align="right"><span id="valid_five"></span></td>
<td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
</tr>
<tr>
<td align="left">*Research Area:</td>
<td align="right"><span id="valid_six"></span></td>
<td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
</tr>
<tr>
<td valign="top" align="left">*Research Overview</td>
<td align="right"><span id="valid_seven"></span></td>
<td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
<td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
</tr>
<tr>
<td align="left">*Talk Availability</td>
<td></td>
<td>
<input type="radio" name="ta" value="In person">In person
<input type="radio" name="ta" value="Online">Online
<input type="radio" name="ta" value="Both" checked>Both
</td>
</tr>
<tr>
<td align="left" valign="top">Links</td>
<td></td>
<td>
<table id="linkTable" border="0">
<td><input type="text" style="width: 320px;" name="link"></td>
<td><div id="result"></div></td>
</table>
</td>
<td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
</tr>
<tr>
<td></td>
<td><span style="color: red;"></span></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<input type="submit" id="submit" name="submit" value="Submit Form">
</form>
Javascript file: Code: /*
* script.js - ajax and table functions
*/
var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions
var validAjax = new Boolean();
var validCaptcha = new Boolean();
var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();
function init() {
showRecaptcha('reCaptcha');
// Separate booleans for AJAX funcs
validAjax = false;
validCaptcha = false;
// Booleanse for fields that don't require servlet validation
valid_one = false;
valid_two = false;
valid_three = false;
valid_four = false;
valid_five = false;
valid_six = false;
valid_seven = false;
}
function showRecaptcha(element) {
Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}
function validate_form() {
if (valid_one && valid_two && valid_three && valid_four && validEmail) {
startCaptchaRequest();
if (validCaptcha) {
return true;
}
}
else {
alert("Submission contains errors. Please fill out all required fields before submitting.");
return false;
}
}
function validate_one() {
if (document.getElementById("fn").value == 0) {
valid_one = false;
document.getElementById("valid_one").innerHTML = "No";
}
else {
valid_one = true;
document.getElementById("valid_one").innerHTML = "";
}
}
function validate_two() {
if (document.getElementById("ln").value == 0) {
valid_two = false;
document.getElementById("valid_two").innerHTML = "No";
}
else {
valid_two = true;
document.getElementById("valid_two").innerHTML = "";
}
}
function validate_three() {
if (document.getElementById("pn").value == 0) {
valid_three = false;
document.getElementById("valid_three").innerHTML = "No";
}
else {
valid_three = true;
document.getElementById("valid_three").innerHTML = "";
}
}
function validate_four() {
if (document.getElementById("c").value == 0) {
valid_four = false;
document.getElementById("valid_four").innerHTML = "No";
}
else {
valid_four = true;
document.getElementById("valid_four").innerHTML = "";
}
}
function validate_five() {
if (document.getElementById("affl").value == 0) {
valid_five = false;
document.getElementById("valid_five").innerHTML = "No";
}
else {
valid_five = true;
document.getElementById("valid_five").innerHTML = "";
}
}
//
//function validate_six() {
// if (document.getElementById("ra").value == 0) {
// valid_six = false;
// document.getElementById("valid_six").innerHTML = "No";
// }
// else {
// valid_six = true;
// document.getElementById("valid_six").innerHTML = "";
// }
//}
//
//function validate_seven() {
// if (document.getElementById("ro").value == 0) {
// valid_seven = false;
// document.getElementById("valid_seven").innerHTML = "No";
// }
// else {
// valid_seven = true;
// document.getElementById("valid_seven").innerHTML = "";
// }
//}
function addLink(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "link" + rowCount;
element1.style.width = "320px";
cell.appendChild(element1);
}
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
}
else {
limitCount.value = limitNum - limitField.value.length;
}
}
function createXmlHttpRequest() {
if(window.ActiveXObject) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
}
function startRequest() {
createXmlHttpRequest();
var param1 = document.getElementById('mailfield').value;
if (param1 == "") {
validEmail = false;
document.getElementById("result").innerHTML = "Blank";
}
else {
xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.send(null);
}
}
function handleStateChange() {
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
var message =
xmlHttp.responseXML
.getElementsByTagName("valid")[0]
.childNodes[0].nodeValue;
if (message == "Unregistered") {
validEmail = true;
document.getElementById("result").style.color = "green";
}
else {
validEmail = false;
document.getElementById("result").style.color = "red";
}
document.getElementById("result").innerHTML = message;
}
else {
alert("Error checking e-mail address - " + xmlHttp.status +
" : " + xmlHttp.statusText);
}
}
}
function createCaptchaRequest() {
if(window.ActiveXObject) {
xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp2=new XMLHttpRequest();
}
}
function startCaptchaRequest() {
alert('made it to captcha requeswt');
createCaptchaRequest();
var param1 = Recaptcha.get_challenge();
var param2 = Recaptcha.get_response();
xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
xmlHttp2.send(null);
}
function handleStateChangeCaptcha() {
if(xmlHttp2.readyState==4) {
if(xmlHttp2.status==200) {
var message =
xmlHttp2.responseXML
.getElementsByTagName("result")[0]
.childNodes[0].nodeValue;
if (message == "Valid") {
alert("captcha valid");
validCaptcha = true;
}
else {
document.getElementById("error").innerHTML = message;
validCaptcha = false;
}
}
else {
alert("Error checking captcha validity - " + xmlHttp2.status +
" : " + xmlHttp2.statusText);
}
}
}
I have a simple form and am validating onchange and need a final validation onsubmit. I am displaying a message to the right of the inputbox on error. I'm trying to keep this at DOM 1 compatible and not use any framework. HTML Code: <form id = "myForm" action = "" onsubmit = "return validateForm(this);">
<table class = "table-submit" border = "0">
<tr>
<td>
Username:
</td>
<td>
<input type = "text" id = "username"
size = "30" maxlength = "30"
onchange = "validateUsername(this, 'msgUsername')" />
</td>
<td id = "msgUsername">
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<input type = "password" id = "password"
size = "30" maxlength = "30"
onchange = "validatePassword(this, 'msgPassword')" />
</td>
<td id = "msgPassword">
</td>
</tr>
<tr>
<td> </td>
<td>
<input type = "submit" value = "Submit" />
<input type = "reset" value = "Clear" />
</td>
</tr>
</table>
</form>
JavaScript Code: function validateUsername(myItem, myElement) {
var dom = document.getElementById(myElement);
if (myItem.value.length < 3) {
dom.innerHTML = " Username needs to be a minimum of 3 characters! ";
return false;
}
else {
dom.innerHTML = "";
return true;
}
}
function validatePassword(myItem, myElement) {
var dom = document.getElementById(myElement);
if (myItem.value.length < 5) {
dom.innerHTML = " Password needs to be a minimum of 5 characters! ";
return false;
}
else {
dom.innerHTML = "";
return true;
}
}
function validateForm (itm) {
// kind of stuck here...
}
As you may of noticed, I am a bit stuck on my validateForm() function. The code validates on each inputbox onchange event. Not sure what is the best way to go from here. I thought about doing an If for my both single input box validation, but I would need to send each parameters which is what i was trying to avoid by using this. Would like some suggestions. I have created a php script that POSTs to another page sendmail.php which then redirects to a thanks/successful page. Is it possible to have the form submit and return a thank you message on the same page. basically submit the form without reloading. I want to use Javascript to submit a form - without filling the form in physically Is this possible? Let's say a web page has a form that submit First Name and Last Name to the next page Instead of filling in the form and hitting submit, can I submit the data in variables and call the next page somehow using Javascript? Thanks OM My html form code is <html> <head> <script type="text/javascript" src="2.js"></script> </head> <body> <h1 id="remain"></h1> <form action="3.php" method="post" id="form1" name="form1"> <input type="text" name="id"> <input type="submit" name="submit" value="submit"> </form> </body> </html> I need to submit the form after coundown.Here is my countdown script file window.onload=counter; function counter() { var seconds = 5; countDown(); function countDown() { document.getElementById("remain").innerHTML=seconds; if(seconds>0) { seconds=seconds - 1; setTimeout(countDown,1000); } if(seconds == 0) { document.form1.submit(); } } } Countdown is working but form does not submit after countdown.Please help me regarding this.Thanks in advance Is there a way to stop a form submit after hitting submit? Refresh wouldn't realy be an option. Is abort() what I'm looking for?
I have two password fields on a webpage form. If the passwords don't match, I want to display a message. I could use a popup, I could redirect to a page containing the message with another redirect back to the form or, the option I'd like to use, have a hidden table cell in the form containing the message that displays should the form be submitted without matching passwords. If I use the latter, where do I call the javascript function to display the hidden table cell? So in effect, only javascript function would execute if the passwords don't match, the action page itself shouldn't load at all. Can/should this be done on the action page?
I'm trying to understand how forms, data, php, javascript all work together. So 1) I hardcoded some html form fields with values using php using "echo", then 2) I dynamically created some more html form fields with values using javascript using "createElement" and appending to the html form element. When I click on the submit form, the php created form fields still show on the webpage, but the javascript dynamically created form fields disappear. Can anyone shed some light for me? Why are the javascript created form fields disappearing when I click on submit and not the PHP created form fields? Thank you! Code: <form method="post" id="commentform" action="<?php echo $PHP_SELF?>"> hi everyone im here again begging for your help im innocent in this field is there a javascript for setting up a limit in form submit attempts by which someone's attempts can be reset for given time? Shall we say you could try again after 10minutes or tommorow or whatsoever. for example in my form: <form blahblahblah...> <input value=""...blahblahblah/> (then here it goes my problem, if the input value above IS NOT EQUAL to "MYUSERNAME" then limit the form submission attempts to 10 tries, else a warning box will appear saying "You have reach the maximum tries per day") <input type="submit" value="Submit"/> </form> thank you so much and may the God Bless you for your kindness! Hello all I created a form which has a lot of textboxes, checkboxes and select-lists which are getting filled up by the records from a database table. I am basically creating an edit screen for a record. No I want to check all these input elements using javascript validation. I want this to performed when a button "Archive" is pressed. My problem is this "Archive button" needs to be a submit button. This does run the javascript validation but after completing the validation it submits the form. I want that submission should be stopped when the validation is violated. how can I do this? What I want is a button which acts as a default button (triggers the onclick event when I press enter) but submits only if the form is valid. Hey, In the quiz function the form that is generated all compiles correctly, but the submit button only causes the page to refresh. What am I doing wrong? Thank you var c = "1"; //counter var n = [68]; //array that stores unique random numbers var t = "better clear"; var lc = [3]; var uc = [3]; ////////////////////////////////////////////// //The generate() function generates 68 random //unique numbers. ////////////////////////////////////////////// function generate() { var gen = 0; //variable that stores random integer. var j = 1, i = 1; //integers used for loops while (j <= 68) { gen = Math.floor(Math.random()*68+1); for (i = 1; i <= j; i++) { if (n[i] == gen) { break; } else { if (i == j) { n [j] = gen; j++; break; } } } } } ////////////////////////////////////////////// //The rinfo() function reads information that //is pertinent to current question (quality //of triad (t), upper case, and //lower case answers to the question). ////////////////////////////////////////////// function rinfo() { if (n[c] == 1) { t = "a C Major"; lc[3] = "c"; //root uc[3] = "C"; //root lc[2] = "e"; //third uc[2] = "E"; //third lc[1] = "g"; //fifth uc[1] = "G"; //fifth } if (n[c] == 2) { t = "a C Minor"; lc[3] = "c"; //root uc[3] = "C"; //root lc[2] = "eb"; //third uc[2] = "Eb"; //third lc[1] = "g"; //fifth uc[1] = "G"; //fifth } if (n[c] == 3) { t = "a C Augmented"; lc[3] = "c"; //root uc[3] = "C"; //root lc[2] = "e"; //third uc[2] = "E"; //third lc[1] = "g#"; //fifth uc[1] = "G#"; //fifth } if (n[c] == 4) { t = "a C Diminished"; lc[3] = "c"; //root uc[3] = "C"; //root lc[2] = "eb"; //third uc[2] = "Eb"; //third lc[1] = "gb"; //fifth uc[1] = "Gb"; //fifth } if (n[c] == 5) { t = "a F Major"; lc[3] = "f"; //root uc[3] = "F"; //root lc[2] = "a"; //third uc[2] = "A"; //third lc[1] = "c"; //fifth uc[1] = "C"; //fifth } if (n[c] == 6) { t = "a F Minor"; lc[3] = "f"; //root uc[3] = "F"; //root lc[2] = "ab"; //third uc[2] = "Ab"; //third lc[1] = "c"; //fifth uc[1] = "C"; //fifth } if (n[c] == 7) { t = "a F Augmented"; lc[3] = "f"; //root uc[3] = "F"; //root lc[2] = "a"; //third uc[2] = "A"; //third lc[1] = "c#"; //fifth uc[1] = "C#"; //fifth } if (n[c] == 8) { t = "a F Diminished"; lc[3] = "f"; //root uc[3] = "F"; //root lc[2] = "ab"; //third uc[2] = "Ab"; //third lc[1] = "cb"; //fifth uc[1] = "Cb"; //fifth } if (n[c] == 9) { t = "a Bb Major"; lc[3] = "bb"; //root uc[3] = "Bb"; //root lc[2] = "d"; //third uc[2] = "D"; //third lc[1] = "f"; //fifth uc[1] = "F"; //fifth } if (n[c] == 10) { t = "a Bb Minor"; lc[3] = "bb"; //root uc[3] = "Bb"; //root lc[2] = "db"; //third uc[2] = "Db"; //third lc[1] = "f"; //fifth uc[1] = "F"; //fifth } if (n[c] == 11) { t = "a Bb Augmented"; lc[3] = "bb"; //root uc[3] = "Bb"; //root lc[2] = "d"; //third uc[2] = "D"; //third lc[1] = "f#"; //fifth uc[1] = "F#"; //fifth } if (n[c] == 12) { t = "a Bb Diminished"; lc[3] = "bb"; //root uc[3] = "Bb"; //root lc[2] = "db"; //third uc[2] = "Db"; //third lc[1] = "fb"; //fifth uc[1] = "Fb"; //fifth } if (n[c] == 13) { t = "an Eb Major"; lc[3] = "eb"; //root uc[3] = "Eb"; //root lc[2] = "g"; //third uc[2] = "G"; //third lc[1] = "bb"; //fifth uc[1] = "Bb"; //fifth } if (n[c] == 14) { t = "an Eb Minor"; lc[3] = "eb"; //root uc[3] = "Eb"; //root lc[2] = "gb"; //third uc[2] = "Gb"; //third lc[1] = "bb"; //fifth uc[1] = "Bb"; //fifth } if (n[c] == 15) { t = "an Eb Augmented"; lc[3] = "eb"; //root uc[3] = "Eb"; //root lc[2] = "g"; //third uc[2] = "G"; //third lc[1] = "b#"; //fifth uc[1] = "B#"; //fifth } if (n[c] == 16) { t = "an Eb Diminished"; lc[3] = "eb"; //root uc[3] = "Eb"; //root lc[2] = "gb"; //third uc[2] = "Gb"; //third lc[1] = "bbb"; //fifth uc[1] = "Bbb"; //fifth } if (n[c] == 17) { t = "an Ab Major"; lc[3] = "ab"; //root uc[3] = "Ab"; //root lc[2] = "c"; //third uc[2] = "C"; //third lc[1] = "e"; //fifth uc[1] = "E"; //fifth } if (n[c] == 18) { t = "an Ab Minor"; lc[3] = "ab"; //root uc[3] = "Ab"; //root lc[2] = "cb"; //third uc[2] = "Cb"; //third lc[1] = "eb"; //fifth uc[1] = "Eb"; //fifth } if (n[c] == 19) { t = "an Ab Augmented"; lc[3] = "ab"; //root uc[3] = "Ab"; //root lc[2] = "c"; //third uc[2] = "C"; //third lc[1] = "e"; //fifth uc[1] = "E"; //fifth } if (n[c] == 20) { t = "an Ab Diminished"; lc[3] = "ab"; //root uc[3] = "Ab"; //root lc[2] = "cb"; //third uc[2] = "Cb"; //third lc[1] = "eb"; //fifth uc[1] = "Eb"; //fifth } if (n[c] == 21) { t = "a Db Major"; lc[3] = "db"; //root uc[3] = "Db"; //root lc[2] = "f"; //third uc[2] = "F"; //third lc[1] = "a"; //fifth uc[1] = "A"; //fifth } if (n[c] == 22) { t = "a Db Minor"; lc[3] = "db"; //root uc[3] = "Db"; //root lc[2] = "fb"; //third uc[2] = "Fb"; //third lc[1] = "ab"; //fifth uc[1] = "Ab"; //fifth } if (n[c] == 23) { t = "a Db Augmented"; lc[3] = "db"; //root uc[3] = "Db"; //root lc[2] = "f"; //third uc[2] = "F"; //third lc[1] = "a#"; //fifth uc[1] = "A#"; //fifth } if (n[c] == 24) { t = "a Db Diminished"; lc[3] = "db"; //root uc[3] = "Db"; //root lc[2] = "fb"; //third uc[2] = "Fb"; //third lc[1] = "abb"; //fifth uc[1] = "Abb"; //fifth } if (n[c] == 25) { t = "a Gb Major"; lc[3] = "gb"; //root uc[3] = "Gb"; //root lc[2] = "bb"; //third uc[2] = "Bb"; //third lc[1] = "db"; //fifth uc[1] = "Db"; //fifth } if (n[c] == 26) { t = "a Gb Minor"; lc[3] = "gb"; //root uc[3] = "Gb"; //root lc[2] = "bbb"; //third uc[2] = "Bbb"; //third lc[1] = "db"; //fifth uc[1] = "Db"; //fifth } if (n[c] == 27) { t = "a Gb Augmented"; lc[3] = "gb"; //root uc[3] = "Gb"; //root lc[2] = "bb"; //third uc[2] = "Bb"; //third lc[1] = "d"; //fifth uc[1] = "D"; //fifth } if (n[c] == 28) { t = "a Gb Diminished"; lc[3] = "gb"; //root uc[3] = "Gb"; //root lc[2] = "bbb"; //third uc[2] = "Bbb"; //third lc[1] = "dbb"; //fifth uc[1] = "Dbb"; //fifth } if (n[c] == 29) { t = "a B Major"; lc[3] = "b"; //root uc[3] = "B"; //root lc[2] = "d#"; //third uc[2] = "D#"; //third lc[1] = "f#"; //fifth uc[1] = "F#"; //fifth } if (n[c] == 30) { t = "a B Minor"; lc[3] = "b"; //root uc[3] = "B"; //root lc[2] = "d"; //third uc[2] = "D"; //third lc[1] = "f#"; //fifth uc[1] = "F#"; //fifth } if (n[c] == 31) { t = "a B Augmented"; lc[3] = "b"; //root uc[3] = "B"; //root lc[2] = "d#"; //third uc[2] = "D#"; //third lc[1] = "fx"; //fifth uc[1] = "Fx"; //fifth } if (n[c] == 32) { t = "a B Diminished"; lc[3] = "b"; //root uc[3] = "B"; //root lc[2] = "d"; //third uc[2] = "D"; //third lc[1] = "f"; //fifth uc[1] = "F"; //fifth } if (n[c] == 33) { t = "an E Major"; lc[3] = "e"; //root uc[3] = "E"; //root lc[2] = "g#"; //third uc[2] = "G#"; //third lc[1] = "b"; //fifth uc[1] = "B"; //fifth } if (n[c] == 34) { t = "an E Minor"; lc[3] = "e"; //root uc[3] = "E"; //root lc[2] = "g"; //third uc[2] = "G"; //third lc[1] = "b"; //fifth uc[1] = "B"; //fifth } if (n[c] == 35) { t = "an E Augmented"; lc[3] = "e"; //root uc[3] = "E"; //root lc[2] = "g#"; //third uc[2] = "G#"; //third lc[1] = "b#"; //fifth uc[1] = "B#"; //fifth } if (n[c] == 36) { t = "an E Diminished"; lc[3] = "e"; //root uc[3] = "E"; //root lc[2] = "g"; //third uc[2] = "G"; //third lc[1] = "bb"; //fifth uc[1] = "Bb"; //fifth } if (n[c] == 37) { t = "an A Major"; lc[3] = "a"; //root uc[3] = "A"; //root lc[2] = "c#"; //third uc[2] = "C#"; //third lc[1] = "e"; //fifth uc[1] = "E"; //fifth } if (n[c] == 38) { t = "an A Minor"; lc[3] = "a"; //root uc[3] = "A"; //root lc[2] = "c"; //third uc[2] = "C"; //third lc[1] = "e"; //fifth uc[1] = "E"; //fifth } if (n[c] == 39) { t = "an A Augmented"; lc[3] = "a"; //root uc[3] = "A"; //root lc[2] = "c#"; //third uc[2] = "C#"; //third lc[1] = "e#"; //fifth uc[1] = "E#"; //fifth } if (n[c] == 40) { t = "an A Diminished"; lc[3] = "a"; //root uc[3] = "A"; //root lc[2] = "c"; //third uc[2] = "C"; //third lc[1] = "eb"; //fifth uc[1] = "Eb"; //fifth } if (n[c] == 41) { t = "a D Major"; lc[3] = "d"; //root uc[3] = "D"; //root lc[2] = "f#"; //third uc[2] = "F#"; //third lc[1] = "a"; //fifth uc[1] = "A"; //fifth } if (n[c] == 42) { t = "a D Minor"; lc[3] = "d"; //root uc[3] = "D"; //root lc[2] = "f"; //third uc[2] = "F"; //third lc[1] = "a"; //fifth uc[1] = "A"; //fifth } if (n[c] == 43) { t = "a D Augmented"; lc[3] = "d"; //root uc[3] = "D"; //root lc[2] = "f#"; //third uc[2] = "F#"; //third lc[1] = "a#"; //fifth uc[1] = "A#"; //fifth } if (n[c] == 44) { t = "a D Diminished"; lc[3] = "d"; //root uc[3] = "D"; //root lc[2] = "f"; //third uc[2] = "F"; //third lc[1] = "ab"; //fifth uc[1] = "Ab"; //fifth } if (n[c] == 45) { t = "a G Major"; lc[3] = "g"; //root uc[3] = "G"; //root lc[2] = "b"; //third uc[2] = "B"; //third lc[1] = "d"; //fifth uc[1] = "D"; //fifth } if (n[c] == 46) { t = "a G Minor"; lc[3] = "g"; //root uc[3] = "G"; //root lc[2] = "bb"; //third uc[2] = "Bb"; //third lc[1] = "d"; //fifth uc[1] = "D"; //fifth } if (n[c] == 47) { t = "a G Augmented"; lc[3] = "g"; //root uc[3] = "G"; //root lc[2] = "b"; //third uc[2] = "B"; //third lc[1] = "d#"; //fifth uc[1] = "D#"; //fifth } if (n[c] == 48) { t = "a G Diminished"; lc[3] = "g"; //root uc[3] = "G"; //root lc[2] = "bb"; //third uc[2] = "Bb"; //third lc[1] = "db"; //fifth uc[1] = "Db"; //fifth } if (n[c] == 49) { t = "an A# Major"; lc[3] = "a#"; //root uc[3] = "A#"; //root lc[2] = "cx"; //third uc[2] = "Cx"; //third lc[1] = "e#"; //fifth uc[1] = "E#"; //fifth } if (n[c] == 50) { t = "an A# Minor"; lc[3] = "a#"; //root uc[3] = "A#"; //root lc[2] = "c#"; //third uc[2] = "C#"; //third lc[1] = "e#"; //fifth uc[1] = "E#"; //fifth } if (n[c] == 51) { t = "an A# Augmented"; lc[3] = "a#"; //root uc[3] = "A#"; //root lc[2] = "cx"; //third uc[2] = "Cx"; //third lc[1] = "ex"; //fifth uc[1] = "Ex"; //fifth } if (n[c] == 52) { t = "an A# Diminished"; lc[3] = "a#"; //root uc[3] = "A#"; //root lc[2] = "c#"; //third uc[2] = "C#"; //third lc[1] = "e"; //fifth uc[1] = "E"; //fifth } if (n[c] == 53) { t = "a D# Major"; lc[3] = "d#"; //root uc[3] = "D#"; //root lc[2] = "fx"; //third uc[2] = "Fx"; //third lc[1] = "a#"; //fifth uc[1] = "A#"; //fifth } if (n[c] == 54) { t = "a D# Minor"; lc[3] = "d#"; //root uc[3] = "D#"; //root lc[2] = "f#"; //third uc[2] = "F#"; //third lc[1] = "a#"; //fifth uc[1] = "A#"; //fifth } if (n[c] == 55) { t = "a D# Augmented"; lc[3] = "d#"; //root uc[3] = "D#"; //root lc[2] = "fx"; //third uc[2] = "Fx"; //third lc[1] = "ax"; //fifth uc[1] = "Ax"; //fifth } } function first() { alert("W"); } function quiz() { generate(); while (c <= 1) { rinfo(); var output_text = c + ". " + "Enter " + t + " triad."; document.write("<h3>"); document.writeln(output_text); document.write("</h3>"); document.write(" <form align = \"center\">"); document.write(" <input type = \"text\" size = \"2\" name = \"root\" value = \"\" maxlength = \"2\">"); document.write(" <input type = \"text\" size = \"2\" name = \"third\" value = \"\" maxlength = \"2\">"); document.write(" <input type = \"text\" size = \"2\" name = \"fifth\" value = \"\" maxlength = \"2\">"); document.write(" <input type = \"hidden\" name = \"question\" value = 1>"); document.write(" <input type = \"submit\" value=\"Check your answer\" onclick=\"first();\">"); document.write(" <\/form>"); c++; } } I have a web page with two forms, when I click the button on one of the forms, the onclick event goes to a javascript that emails the first form and then the second form. This is correct, this is the way I want this to work. It's simple, it's easy, it works! However, it only works in FireFox and Internet Explorer, it will not work in Google Chrome browser. I've spent many hours trying lots of various ways to implement this so I'm not interested in speculating about possible solutions that might work, I've already tried too many of those. Also, it needs to work this way, not combining the forms, etc. Does anyone have any tried and tested solutions that work with Chrome? Thanks, in advance, for your expert advice. I know I can always rely on EE when all else fails. I know somebody here can solve this problem. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
</head>
<body>
<form id="NameForm" method="post" action="mailto:yourFirstemail@email.com">
Name: <input type="text" size="10" name="name"> <br />
<input onclick=functionCaller() type="button" value="Submit Two Forms">
</form>
<form id="AddressForm" name="DComments" method="post" action="mailto:yourSecondemail@email.com">
Address: <input type="text" size="10" name="address"> <br />
</form>
<script type="text/javascript">
<!--
function functionCaller()
{
document.getElementById('NameForm').submit();
document.getElementById('AddressForm').submit();
}
-->
</script>
</body>
</html>
Hello, I have the following DIV tag Code: <div id = "cbContainer"> </div> The div is initially hidden as the display is set to none. I have one text input in my form. Depending upon the changed text in that textbox, there is a javascript function which creates a list of checkboxes and by using the innerHTML, the above div is filled up with the check boxes like shown in the code below: Code: var chkboxes = '';
for(var r = 0; r < related.length; r++)
{
chkboxes = chkboxes +
'<div class ="versionswidth">'+
'<input type="checkbox" name="version" value = related[r] />'+ related[r] +
'</div>';
}
var div = document.getElementById("cbContainer");
div.innerHTML = chkboxes;
div display is then set as "block" which makes the div visible. The problem is that on form submission, the input of selected checkboxes is not submitting. I will be grateful for any help. Thank you. Hey guys, I've never use JavaScript before so bare with me. But, I have a registration form, and I want to have a location field in it, and then a region field that changes depending on what the user set as their location. But, I cannot get it to work, and I have no idea of how to go about doing it. Here is the JavaScript I have been using so far: Code: function toggleTable(select)
{
if(select.value == "uk")
{
select.value = "uk";
document.getElementById("region2").style.visibility = "collapse";
document.getElementById("region1").style.visibility = "visible";
}
else if(select.value == "usa")
{
select.value = "usa";
document.getElementById("region1").style.visibility = "collapse";
document.getElementById("region2").style.visibility = "visible";
}
}
and it does show the right region depending on what the user inputed, but when the page loads, all the fields show up until the user click on the location field, here is the code for that so you can test it out: Code: <tr><td>Location: </td><td><select name="location" onclick="toggleTable(this);">
<option value="none">Please Select One</option>
<option value="uk">UK</option>
<option value="usa">USA</option>
</select></td></tr>
<tr id="region1"><td>Region: </td><td>
<select name="region">
<option value="uk1">uk1</option>
<option value="uk2">uk2</option>
</select></td></tr>
<tr id="region2"><td>Region: </td><td>
<select name="region">
<option value="usa1">usa1</option>
<option value="usa2">usa2</option>
</select>
</td></tr>
Any help at all please? Hi all, I'm designing something to addon to an existing product. I'm struggling with some javascript problems. I want to submit a hidden field when you click on an image button, rather than it being an actual submit button. It's going to submit the value "1" to a PHP page, but I don't want it to actually have to GO to the PHP page, just submit it within the webpage. Is this possible? Thanks This is the weirdest thing I've come across in awhile. I have some code that formats a input field for a date format. This code runs fine on all browser when the form tag isn't wrapped around the inputs. The second I wrap the form tag around the inputs everything messes up. The Javascript error I'm getting is "Object doesn't support this property or method." on line 45 which is the line of the date input field. I'm totally clueless what I'm doing wrong here. And so I'll leave it up to you the wonderful community to give me some help. Thanks, Jon W Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html leng="en">
<head>
<script type="text/javascript">
function dob(val,e) {
if(e.keyCode != 8) {
if(val.length == 2 || val.length == 5) {
if(val.match(/[\/]$/) != "/") {
document.getElementById('dob').value += "/";
}
}
var regex = /[a-zA-Z]|\+|\-|\&|\\|\(|\)|\%\|\$|\#|\@|\*|\_|\?|\>|\<|\,|\./;
if(val.match(regex)) {
newStr = val.replace(regex,'');
document.getElementById('dob').value = newStr;
}
}
}
</script>
<style type="text/css">@import url(/css/home.css);</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"><a href="/index.php"><img src="/images/logo.png" /></a></div>
</div>
<div id="container-arrow"></div>
<div id="container">
<img src="/images/no_image.png" />
<div id="sign-container">
<span class="sign-header">
Sign Up
</span>
<div id="sign-arrow-up"></div>
<div id="sign-content">
<form method="post" action="/account/index.php" name="sign">
<label for="email">Email</label><input name="email" class="sign-inputs" type="text" />
<p>
</p>
<label for="password">Password</label><input name="password" class="sign-inputs" type="password" />
<p>
</p>
<label for="dob">Date Of Birth</label>
<input type="text" name="dob" style="text-align:center;" maxlength="10" class="sign-inputs" id="dob" value="MM/DD/YYY" onkeyup="dob(this.value,event);" onkeydown="dob(this.value,event);" onfocus="if(this.value=='MM/DD/YYY') this.value='';" title="MM/DD/YYY" />
<p>
</p>
<input name="submit" type="submit" class="sign-submit" value="Sign Up" />
</form>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Is it possible to use JavaScript to send a HTML FORM this way? (By the way, this is a huge guess - I don't know JavaScript very well) Code: <SCRIPT type="text/javascript">
function Cart1Function() {
get.INPUT.quantity.value
send.to.formsubmit1.php
}
function Cart2Function() {
get.INPUT.quantity.value
send.to.formsubmit2.php
}
</SCRIPT>
<FORM action="?" method="post" name="form">
<DIV>
<INPUT type="text" name="quanitity">
<INPUT type="submit" value="CART 1" onClick="Cart1Function">
<INPUT type="submit" value="CART 2" onClick="Cart2Function">
<DIV>
</FORM>
I want to make two forms sharing the same input (quantity). I am very new to javascript and really can't figure out what I am doing wrong. I am trying to make a 1 page store that allows you to type in an item and select the color and size you want for that item. If you don't fill in a field, an alert message should tell you that. If all the fields are filled in, a "thank you for purchasing ____________" message should appear in a text area at the bottom of the page. This is my current code: Code: <html>
<head>
<script>
function processform()
{
if ( document.form1.item1.value == "")
{
alert("No Item Chosen")
}
else
{
chosen = ""
len = document.form1.c1.length
for (i = 0; i <len; i++) {
if (document.form1.c1[i].checked) {
chosen = document.form1.c1[i].value
}
}
if (chosen == "") {
alert("No Color Chosen")
}
}
else {
itemname = document.form1.item1.value;
itemcolor = document.form1.c1.value;
itemsize = document.form1.size.value;
document.form1.txtarea1.value = "Thank you for purchasing a " + itemsize + " " + itemcolor + " " + itemname;
}
}
</script>
</head>
<body>
<h1>Store</h1>
<br/><br/>
<form name="form1">
<h4>What item would you like to buy?</h4>
<input type="text" name="item1" value="" /><br />
<br/><br/>
<h4>Color</h4>
<input type="radio" name="c1" value="blue" /> Blue<br />
<input type="radio" name="c1" value="red" /> Red<br />
<input type="radio" name="c1" value="green" /> Green<br />
<input type="radio" name="c1" value="yellow" /> Yellow<br />
<br/><br/>
<h4>Size</h4>
<select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="extra large">Extra Large</option>
</select>
<br/><br/>
<button onclick="processform()">Purchase</button>
<br/><br/>
<textarea rows="2" cols="40" name = "txtarea1"> </textarea>
</form>
</body>
</html>
When I press the purchase button, no alert message is shown, nor does anything get displayed in the textarea. What am I doing wrong? I am just starting out using Javascript and created a simple knowledge check to give a learner feedback on a question. It will allow the learner to quickly check if they have mastered a topic. The problem that I am having is that if I put two of these knowledge checks on the same webpage than it just posts the same answer when the submit button is clicked. What I have been doing is just pasting the code below twice on the page and changing the question and answer out. When I click "Check Answer" it is the same answer for both questions. Here is my code: Code: <fieldset>
<legend><strong>Question 1</strong></legend>
<SCRIPT LANGUAGE="JavaScript">
function readText (form) {
TestVar =form.inputbox.value;
alert ("You typed: " + TestVar);
}
function writeText (form) {
form.inputbox.value = "The wavelength of the blue light scatters better than the rest, predominates over the other colors in the light spectrum, and makes the sky appear blue to us."
}
</SCRIPT>
<form name="myform" action="" method="GET">
<label for="question">Why is the Sky Blue?</label><br><br>
<input name="inputbox" value="" type="text" style="width: 287px; height: 112px">
<p>
<input id="question" value="Check Answer" onclick="writeText(this.form)" type="button">
</p>
</form>
</fieldset>
Any help would be much appreciated in terms of direction. Thank you. |
|||||||