|
JavaScript - Javascript Captcha Form Issue
Hello,
I've been having a maddening issue with a CAPTCHA javascript math problem validation blocking the correct information from going to my contact form. I feel like I am overlooking something obvious. Basically I just want to create a simple javascript function that when the incorrect CAPTCHA code is entered an alert comes up saying "incorrect code" and then the form is not sent. The way it is working now, the form is passing through (due to document.write) but it is NOT allowing the PHP script to execute correctly, probably because document.write is bypassing the fields somehow. When I remove "return false;" the form goes through all the time, even after the alert comes up. When I keep "return false;" it goes through but the message is not sent correctly. Is there an easy way to make this work? Here is the javascript code: Code: <script type="text/javascript">
var a = Math.ceil(Math.random() * 10);
var b = Math.ceil(Math.random() * 10);
var c = a + b;
function DrawBotBoot()
{
document.write("What is "+ a + " + " + b +"? ");
document.write(" <input type='text' id='BotBootInput' name='Math' style='background-image: url(images/main/footer_math_problem_bknd.gif); width: 32px; height: 18px; padding: 5px; border: none; color: #fff;' /> ");
}
function ValidBotBoot(){
var d = document.getElementById('BotBootInput').value;
if (d == c) {
window.location = "sendmail.php";}
else {
alert("Incorrect CAPTCHA code");
}
}
</script>
And here is the HTML form: Code: <form method="POST" action="sendmail.php"> <label for="FirstName"><p style="width: 120px; line-height: 0.4em;">Name:</p> </label> <input type="text" id="FirstName" name="FirstName" style="background-image: url(images/main/footer_text_field.gif); border: none; height: 26px; width: 216px; padding-left: 5px; color: #fff;" /> <label for="Emailaddress"><p style="width: 120px; line-height: 0.4em;">Email:</p></label> <input type="text" id="Emailaddress" name="Emailaddress" style="background-image: url(images/main/footer_text_field.gif); border: none; height: 26px; width: 216px; padding-left: 5px; color: #fff;" /> <legend><p style="line-height: 0.4em;">Your Message:</p></legend> <textarea name="QuestionComment" id="txt" style="background-image: url(images/main/footer_text_area.gif); width: 211px; height: 73px; padding: 5px; color: #fff; border: none;"></textarea><br /> <p style="width: 221px;"><script type="text/javascript">DrawBotBoot()</script> <input type="image" name="submit" id="submit" value="Submit" src="images/main/footer_submit.gif" height="28" align="right" onclick="ValidBotBoot(); return false;" /> </p> </form> Similar TutorialsHi guys, I'm having an issue with a my form total, I'm getting the same result no matter what positive number I enter. Every other aspect of the code seems to be working ok apart from this. eg. If I enter the number 4, the factorial number should read 24 but it's reading 1, its reading 1 no matter what number goes in there. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type= "text/javascript">
function calcFactorial(factorialNumber) {
var factorialResult = 1;
for (; factorialNumber > 0; factorialNumber --){
factorialNumber = factorialResult * factorialNumber;
}
return factorialResult;
}
</script>
</head>
<frameset cols="100%,*">
<frame name = "fraCalcFactorial" src="calcFactorial.htm" />
<frame src="UntitledFrame-4"></frameset><noframes></noframes>
</html>
I believe the issue is in here somewhere but I'm not sure where. Ironically I'm learning from a book and this is from the Error handling/Debugging chapter. I'm going well on this book so far and really don't want to have to move forward without fully understanding whats going on. Any help/comments would be greatly received. Sara I have taken lots of programming classes, but am now taking my first web programming class and I am getting sooooo frustrated. I have done lots of looking on the web, but am still unable to figure out why I can not make this simple assignment work. I just need some help with getting something to happen when the user hits submit. What I really want is for a new page to appear with the message using the user inputs, but I would be very happy with just getting the input to appear in the text area that I put in or even for the alert box to pop up with the input. I can work on validation code after I can get some kind of output to work..... I posted everything (due to it's small size), including my attempts to see what is working. Here is the code I have written: Code: <html>
<head>
<title>Name and Age</title>
<script type="text/javascript">
<!--
function Submit()
{
alert("Does this do anything?");
var name = document.forms['NameAge'].elements[0];
var year = document.forms['NameAge'].elements[1];
var date = new Date();
var curr_yr = date.GetFullYear();
var age = (curr_yr - year)
alert("<h3>Hello, " + name + ", you are " + age + " years old."</h3>");
document.close()
/*if (year > curr_yr)
{
alert("You must enter a valid year!");
}
else
{
document.writeln("<h3>Hello, " + name + ", you are " + age + " years old."</h3>");
document.close()
}*/
document.forms['NameAge'].output.value = "<h3>Hello, " + name + ", you are " + age + " years old."</h3>";
}
-->
</script>
</head>
<body>
<h1>Name and Age</h1>
<form name="NameAge" onsubmit="Submit()">
<p align="left">Please Enter Your Name:
<input id="name" maxlength="32" size="24" />
</p>
<p align="left">Please Enter the Year You Were Born:
<input id="year" maxlength="4" size="24" />
</p>
<input type="submit" value="Submit" /><br />
<textarea cols="10" rows="3" name="output"></textarea>
</form>
</body>
</html>
Hello, On my client's site: www.twdcycling.com he wanted a place where people could make suggestions for his blog. I accomplished the simple form using a textarea field and even put a little text that clears on clicks and reappears on blur. When you go there--go to the bottom left. It also actually works. The problem is that (besides the fact that so far no one has cared to make a suggestion) somehow the form is (this is what I believe) being submitted automatically. I don't believe a human is clicking submit. When I click submit w/o clicking in the field the default text that I have in the field already gets submitted in the generated email. So I now need to work on my validation in my php file that sends the email. For background I obtained my php file from html-form-guide.com here the file is in its entirety: Code: <?php
if(!isset($_POST['submit']))
{
//This page should not be accessed directly. Need to submit the form.
echo "error; you need to submit the form!";
}
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$message = $_POST['message'];
//Validate first
if(empty($name)||empty($visitor_email))
{
echo "Name and email are mandatory!";
exit;
}
if(IsInjected($visitor_email))
{
echo "Bad email value!";
exit;
}
$email_from = 'tom@amazing-designs.com';//<== update the email address
$email_subject = "New Form submission";
$email_body = "You have received a new message from the user $name.\n".
"Here is the message:\n $message".
$to = "tom@amazing-designs.com";//<== update the email address
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done. redirect to thank-you page.
header('Location: thank-you.html');
// Function to validate against any email injection attempts
function IsInjected($str)
{
$injections = array('(\n+)',
'(\r+)',
'(\t+)',
'(%0A+)',
'(%0D+)',
'(%08+)',
'(%09+)'
);
$inject = join('|', $injections);
$inject = "/$inject/i";
if(preg_match($inject,$str))
{
return true;
}
else
{
return false;
}
}
?>
It does have some validation code, and it also is set up to handle more parameters than I needed. I tried to just pare it down to the one simple thing (I just need the user to type anything they want into my text area) My reasoning is that I should be able to go get some simple validation snippet to make it so that if there is the possibility something is causing the form to just "fire off" w/o a human clicking, the validation shouldn't allow it to send, cause the text field is empty. But one would think if that is happening my default text would allow it to send, but oddly enough, no! when I get the email (last one at 5:49 am) it was a blank email! So its like some robot is doing two things: clicking in the field to empty it and THEN clicking submit! Weird, I know. But the validation code would fix this if only I knew how. (But on another note, if I try to send an empty box my default text pops back in when I click submit--proving that its happening automatically. I tried all morning yesterday to implement a snippet from several sources. Here's a couple of examples of what I added: Code:
function emptyvalidation(entered, alertbox)
{
// Emptyfield Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines above.
with (entered)
{
if (value==null || value=="")
{if (alertbox!="") {alert(alertbox);} return false;}
else {return true;}
}
}
I didn't modify this code at all....maybe where I went wrong here. Should "value" correspond to text area name "message"? (about the only thing I didn't try) Here's another one --this one from W3 schools: Code: function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
this is how it was on the source site, all I changed was "myForm" and "fname" to "blog_suggestion" But when testing both these snippets separately what happened is that on submit I just go to my php page (which is just blank) I'm assuming code I'm adding is crashing the script somehow. And then of course no thank you page and no email sent. Finally here is my current php page in its entirety, followed by the form code on the home page... Code: <?php
if(!isset($_POST['submit']))
{
//This page should not be accessed directly. Need to submit the form.
echo "error; you need to submit the form!";
}
$message = $_POST['message'];
//Validate first
if(empty($message))
{
echo "Please enter a suggestion before clicking submit.";
exit;
}
$email_from = 'f7digitaldesign@gmail.com';//<== update the email address
$email_subject = "SOMEONE HAS SUBMITTED A SUGGESTION FOR THE BLOG!";
$email_body = "\n $message".
$to = "f7digitaldesign@gmail.com";//<== update the email address
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done. redirect to thank-you page.
header('Location: thank-you.html');
// Function to validate against any email injection attempts
function IsInjected($str)
{
$injections = array('(\n+)',
'(\r+)',
'(\t+)',
'(%0A+)',
'(%0D+)',
'(%08+)',
'(%09+)'
);
$inject = join('|', $injections);
$inject = "/$inject/i";
if(preg_match($inject,$str))
{
return true;
}
else
{
return false;
}
}
?>
I tried to modify the validation I got w/ this to produce the "echo" message "Please enter a suggestion before clicking submit." But let's be honest, by now you know I don't know what in the heck I'm doing (it doesn't seem to matter). Form code: Code: <form name="blog_suggetion" method="post" action="send_form_blogidea.php">
<span class="bloginfotext" ><textarea name="message" rows="14" cols="12" onfocus="clearValue(this, 'Please submit ideas for our blog here—we’d love to hear from you!')" onclick="this.value='';" onblur="if (this.value == '') {this.value = 'Please submit ideas for our blog here—we’d love to hear from you!';}" ></textarea></span>
<div style="font-size:6px; color:#FFF;">sdsadfds</div>
<input type="submit" name='submit' value="submit">
</form>
Any time spent and help offered for this is greatly appreciated!! Also if you need to/want to test the field, I don't care--send me a message. I'll know someone cares! Brian When user answers correctly (on key up AND key down), text field (CAPTCH) should become disabled, and span of id=correct should change to "√ Correct".. What is wrong with my code? No errors are returned. It just doesnt work. Please excuse my novice knowledge of javascript. Im just starting. Could someone please explain to me my error rather than solve it? I wanna learn, not be handed the answer. Thanks in advance, Robert PHP 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Captcha</title> <script type="text/javascript"> var x = 44; var y = document.getElementById('CAPTCHA'); function correct() { if (y = x.value) { document.getElementById("correct").innerHTML = "√ Correct"; document.getElementById("CAPTCHA").innerHTML.disabled = "disabled"; } else {} } </script> </head> <body> 11 x 4 = <input type="text" id="CAPTCHA" onkeyup="correct()" onkeydown="correct()" /> <span id="correct">.....</span> </body> </html> Hello, I was using http://www.captcha.cc to generate free and easy captcha for my forms. None of them are working today. I don't know if the site has been removed or it is a temporary thing. Does anyone know? Do you know of a really easy and free captcha generator I can use instead? Thank you for your help. Also, we cannot use PHP. hello, I got this javascript code to avoid bots to fill out with trash the forms I have in my website: <script type="text/javascript"> var a = Math.ceil(Math.random() * 10); var b = Math.ceil(Math.random() * 10); var c = a + b function DrawBotBoot() { document.write("Cuanto es "+ a + " + " + b +"? "); document.write("<input id='BotBootInput' type='text' maxlength='2' size='2'/>"); } function ValidBotBoot(){ var d = document.getElementById('BotBootInput').value; if (d == c) return true; return false; } </script> <P>Are you human?<br /> <script type="text/javascript">DrawBotBoot()</script> <P> <INPUT id="Button1" name="SUBMIT" TYPE="SUBMIT" VALUE="ENVIAR" onclick="alert(ValidBotBoot());"/> <INPUT name="RESET" TYPE="RESET" VALUE="BORRAR"> My problem is that the form sends itself even if you dont type the correct answer, I would like to Validate first and then allow me to send the form after validation. You can see the form he http://www.futuros.com/mercados_calientes.html feel free to play with it, i know is the only way to actually see what i'm trying to accomplish. Thanks, Alan Hello, When I have email validation and captcha in the same form, simply passing the captcha allows the form to be sent without an email address. When I remove the captcha, the form will not send without the email address. I want to have both. What am I missing? http://jaxpubliclibrary.org/lib/websiteform-test.html Code: <script>
function validateForm()
{
var x=document.forms["WebsiteQuestion"]["Email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
function clearForms()
{
var i;
for (i = 0; (i < document.forms.length); i++) {
document.forms[i].reset();
}
}
</script>
Code: <div align="center"> <script language="javascript" src="http://www.captcha.cc/cap.js?cap_k=tocsoLPahVjmEHJZWtenaJEDoJXfrQaa" type="text/javascript"> </script> <input type=hidden name=cap_h id=cap_h value=""> <img border=1 id=cap_i src="http://www.captcha.cc/img.cgi?cap_k=tocsoLPahVjmEHJZWtenaJEDoJXfrQaa" align=middle><img align=middle style="margin-left: 4px;" id=cap_r onload="return cap_showReload(event);" src="http://www.captcha.cc/blank.png"><br> <input id=cap_t name=cap_t type=text value="" style="margin-top:4px;"> <input type=submit value="Submit Form" onclick="return cap_valid(event);"> </div> I appreciate any help. Thank you, Elbee 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> So we need script like that http://userscripts.org/scripts/show/38736 But i dont know how to make it to that captcha http://one.lt/captcha Any1 have idea? :SSSSSSSSS I'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);
}
}
}
Hi guys, Been stuck for a few days with this scenario. Any help? The alert box appears on an error. But the submitting won't stop. The details are submitted and the form is processed. Any help is greatly appreciated... Code: <html>
<head>
<script type="text/javascript" src="email_helper/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "simple"
});
</script>
<script language="javascript">
function MM_openBrWindow(theURL,winName,features) {
window.open(theURL,winName,features);
}
function err_check(){
var email = document.getElementById('to_email').value;
if(email.length==0){
alert('Please Enter Email Address');
return false;
}
var AtPos = email.indexOf("@")
var StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
alert("Please Enter Valid Email Address");
document.getElementById('email').focus();
return false;
}
email = document.getElementById('cc_email').value;
if(email.length != 0){
var AtPos = email.indexOf("@")
var StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
alert("Please Enter Valid Email Address");
document.getElementById('email').focus();
return false;
}
}
var answer = confirm ("Send E-Mail?");
if (!answer){
return false;
}
}
</script>
<!-- /TinyMCE -->
<style type="text/css">
body, table, td, th{
background-color:#CCCCCC;
font-family: Arial;
font-size:14px;
}
.que{
font-weight:bold;
}
</style>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<?php
include 'library/database.php';
include 'library/opendb.php';
$query = mysql_query("SELECT email,contact,mobile FROM users WHERE user_id='$uid'") or die(mysql_error());
$row = mysql_fetch_row($query);
$from_email = $row[0];
$from_person = $row[1];
$from_mobile = $row[2];
$query = mysql_query("SELECT customer_id FROM campaign_summary WHERE camp_id='$camp_id'") or die(mysql_error());
$row = mysql_fetch_row($query);
$cusid = $row[0];
$query = mysql_query("SELECT email FROM client_info WHERE comp_id='$cusid'") or die(mysql_error());
$row = mysql_fetch_row($query);
$toer = $row[0];
include 'library/closedb.php';
?>
<table width="100%" border="0">
<tr><td rowspan="4"><input type="submit" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" /><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr>
<tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" value="<?php echo $toer;?>"/></td></tr>
<tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr>
<tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr>
<tr><td rowspan="1" colspan="2"> </td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" checked /> PDF Quotation</td><td> </td><td> </td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td>
</tr>
<tr>
<td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td>
<td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr>
<tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td>
<td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr>
<tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments <input id="upload_file" name="upload_file" type="file"/> </td></tr>
<tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3">
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">
<?php
echo "<br><br><br>" . $from_person . "<br>" . $from_mobile;
?>
</textarea>
</td></tr>
</table>
</form>
</body>
</html>
hi, i am trying to get some javascript working on a website i am making. the javascript changes the background image behind a photo. this simulates a user selecting a different frame from the drop down list http://jimpicot.com/shop/index.php?m...&products_id=3 below is the link to another forum it have been using to get most of the website working. http://www.zen-cart.com/forum/showthread.php?t=173765 Hi All, I am using a script that hides / shows a cell row depending on whether a form checkbox has been ticked. The HTML, CSS and JS code is below: CSS & HTML (simplified and normally in head / body tags etc.): Code: #lastRow { display: none;}
<table>
<tr>
<td>Events Xtra:</td>
<td><input class="text" type="Checkbox" name="upcoming" id="upcoming" value="checked"></em></td>
</tr>
<tr id="lastRow">
<td>Xtra Description:</td>
<td><textarea name="event_description" cols="60" rows="5" id="event_description"></textarea></td>
</tr>
</table>
JS: Code: function showHideRow(obj){
oLastRow.style.display = (obj.checked)? 'block' : 'none';
}
window.onload=function(){
var oChkBox = document.getElementById('upcoming');
oLastRow = document.getElementById('lastRow');
oChkBox.onclick=function(){showHideRow(this);}
showHideRow(oChkBox);
}
Now, the above works absolutely perfectly in Internet Explorer - when the checkbox is ticked, it displays the bottom row exactly as I want it to - i.e. as the next row in the table. However, in Chrome, Safari and Firefox it seems to display the whole row as a cell on it's own so distorting the entire table structure. I suspect it is something to do with the use of the id="lastRow", but I am not sure. The strange thing is that the HTML source is of course the same for both. Can anyone shed any light here? For convenience I have uploaded two images: IE (working fine): Firefox (distorting across page) Regards, Neil Happy Star Wars Day! Hopefully someone is strong in the force and can help. I have a HTML form and I need to get the user to select one of 350 options. I have broken down the options into "Major Group", "Sub-Major Group", "Minor Group" and "Unit" I'm looking to create 4 dynamically changing drop down lists to point the user to their final choice. All 350 options are in one database table with the following headings: [Major Group][Major Group Title][SubMajor Group][SubMajor Group Title][Minor Group][Minor Group Title][Unit][Unit Title] The 'groups' are numeric, and the title's alphanumeric. I have used the MySQL database to achieve this as it makes it easier to update the 350 options in the future should I need to. As far as the tutorial over at W3Schools.com has advised I need to use the following process: HTML Form - <Select> onclick run Javascript function Javascript function connects to server via PHP PHP runs query on the MySQL database and returns results Javascript then populates the 2nd drop down. and so on through to the final drop down. There are never more than 9 options in each drop down. Please can someone help me set this up. I have been using the code examples from W3Schools.com to put the following together. I use the alerts to check it's progress. It seems to be getting stuck when checking that the "if (xmlhttp.readystate==4)" line. Using Safari's built in Debug console the error I get back is that the php file cannot be found and there is a "500 Internal Server Error" - although I think (read as: assume) this is because the "if (xmlhttp.readystate==4)" isn't working. Any help would be much appreciated. Code: function selectMajor(str)
{
// an alert box to show that both a value has passed and it is the right type
alert(SOC_Major.value);
// enable the next drop down - SOC_SubMajor
document.getElementById('SOC_SubMajor').disabled=false;
// clear the next select box?
document.Add_Vacancy.SOC_SubMajor.options.length=0
// POST to the php script
// AJAX goes here
if (str=="")
{
document.getElementById('SOC_SubMajor').innerHTML=" ";
alert("str is empty");
return;
}
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, opera, Safari
xmlhttp=new XMLHttpRequest();
alert("new XMLHttpRequest created");
}
else
{ // code for IE6, IE5
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readystate==4)
{
alert("xmlhttp.readystate = 4");
if(xmlhttp.status==200)
{
alert("xmlhttp.status = 200")
document.getElementById('SOC_SubMajor').innerHTML=xmlhttp.responseText;
}
else
{
alert("There was a problem while using XMLHTTP:\n");
}
}
}
xmlhttp.open("POST","scripts/SOCSubMajorSelect.php?q="+str,true);
xmlhttp.send();
}
I am very new to coding, I am currently working on this design as my very first: http://img822.imageshack.us/img822/6533/unled1pd.jpg. I am currently working on the Image slider which is on the left side next to the login bar and headlines. I don't know where to start with this. If someone could walk me through or help me in anyway i would greatly appreciate it. Here is my current project LIVE: http://visionarycreativegrp.com/Demos/ForSale%20RED/# I have a big issue. I am doing this: I have a menu and when you click tje linsk it loads content using jquery post into a div. It alway loads javascript with it. But I find when they click another menu item it loads a different section into the div along with different javascript. But the dom is still keeping the old javascript. After about 40 clicks the site wants to stop working. How can I resolve this? Thanks Hey everyone, I've got this slight problem with my code in javascript and I cant solve it to save my life and I don't really want to mess more things around incase it makes it worse. For some reason, when I click "get age" it just doesnt run, but the if statements seem to be running, any help would be appreciated Code:
<script type = "text/javascript">
function dIM(Y, M) {
with (new Date(Y, M, 1, 12)) {
setDate(0);
return getDate();
}
}
function dateDifference(birthdate1, birthdate2)
{
var year1 = birthdate1.getFullYear(), month1 = birthdate1.getMonth(), day1 = birthdate1.getDate(),
year2 = birthdate2.getFullYear(), month2 = birthdate2.getMonth(), day2 = birthdate2.getDate();
if (day1 < day2){
month1--;
day1 += dIM (year2, month2);day
};
if (month1 < month2) {
year1--;
month1 += 12;
}
return [year1 - year2, month1 - month2, day1 - day2];
}
function ageCalculator() {
var day = document.age.inputdate.value;
var month = (document.age.inputmonth.value - 1);
var year = document.age.inputyear.value;
var now = new Date();
thisday = now.getDate();
thismonth = now.getMonth();
thisyear = now.getFullYear();
var first = new Date(thisyear, thismonth - 1, thisday);
var second = new Date(year, month - 1, day);
var yourage;
var datediff;
if (day == "" || month == "" || year == "")
{
alert ("Please fill in all of the boxes before getting your age");
}
else if ((day != parseInt(day)) || (month != parseInt(month)) || (year != parseInt(year)))
{
alert ("Please only enter digits in the day, month or year boxes"); return false;
}
datediff = dateDifference(first,second);
if ((thismonth < month) || (thismonth == month & thisday<=day)) {thisyear--;}
yourage = thisyear-year;
var next = parseInt(year)+datediff[0]+1;
var difference = Date.UTC(next, month, day, 0, 0, 0) - Date.UTC(thisyear, thismonth, thisday, 0, 0, 0);
var daysleft = difference/1000/60/60/24;
document.age.daysremaining.value = daysleft+" days left for your next birthday";
document.age.ageoutput.value = yourage;
}
function clear(form){
form.Result.value = "";
}
</script>
<center>
<p>
<form name = age>
<p>Day of birth
<input type="text" id="inputdate" size="2"><br/>
Month of birth
<input type="text" id="inputmonth" size="2"><br/>
Year of birth
<input type="text" id="inputyear" size="4" ><br/>
<input name="button" type="button" id="button2" onClick="ageCalculator()" value = "Get Age"/>
<input type="reset" name="Reset" id="button" value="Reset" />
</p>
<p> You are
<input type = "text" name = "ageoutput" size = "4" value = "0"> years old
<input type = "text" name = "daysremaining" value = "0" />
</p>
</form>
Hi I am trying to build an application which has 6 small input fields and one numeric key pad. Initially the focus should be on the first inputfield and after entering the number from the numeric key pad, it should shift the focus to third input field and the user should be able to enter the number from the numeric key pad and then shift the focus to fifth input field and user should be able to enter the number in fifth through the key pad. I have achieved till gaining the focus on the first input field and i could enter the number through the key pad and i was able to shift the focus to third input field but however whatever i enter the number is getting changed in first and third input field. the code i wrote is below Code:
<html>
<head>
<script type="text/javascript">
function displaymessage(val)
{
document.getElementById('first').value = val;
alert(document.getElementById('first').value);
if(document.getElementById('first').value!=null)
{
alert("yes");
document.getElementById('third').focus();
document.getElementById('third').value = val;
}
}
</script>
</head>
<body onload="document.getElementById('first').focus();">
Enter your pin:
<input type="text" id="first" size="1" maxlength="1"></>
<input type="text" id="second" size="1" maxlength="1" />
<input type="text" id="third" size="1" maxlength="1" />
<input type="text" id="fourth" size="1" maxlength="1" />
<input type="text" id="five" size="1" maxlength="1" />
<input type="text" name="six" size="1" maxlength="1" />
<table border="1">
<tr>
<td width="30px" align="center"><input type="button" value="1" onclick="displaymessage(1)"/> </td>
<td width="30px" align="center"><input type="button" value="2" onclick="displaymessage(2)"/> </td>
<td width="30px" align="center"><input type="button" value="3" onclick="displaymessage(3)"/> </td>
</tr>
<tr>
<td width="30px" align="center"><input type="button" value="4" onclick="displaymessage(4)"/> </td>
<td width="30px" align="center"><input type="button" value="5" onclick="displaymessage(5)"/> </td>
<td width="30px" align="center"><input type="button" value="6" onclick="displaymessage(6)"/> </td>
</tr>
<tr>
<td width="30px" align="center"><input type="button" value="7" onclick="displaymessage(7)"/> </td>
<td width="30px" align="center"><input type="button" value="8" onclick="displaymessage(8)"/> </td>
<td width="30px" align="center"><input type="button" value="9" onclick="displaymessage(9)"/> </td>
</tr>
</tr>
<tr>
<td width="30px" align="center"><input type="button" value="0" onclick="displaymessage(0)"/> </td>
<td width="30px" align="center"><input type="button" value="Reset"/> </td>
</tr>
</table>
</body>
</html>
I know thats because I am filling the val variable again in the third input field and that is the reason it is getting changed in first and third. However I am not aware of what other best methods we could use on this. Pleasee helpp.. |
|||||||