how do i add javascript to a form that i made that is all php?

Question

SKANK!!!!! 5 Posting Pro in Training

15 Years Ago

i have this form that is php and it has some required fields.
that get checked with php .
but i know that javascript can be disabled so i want to keep the php code because it does all the error checking but i want to add javascript to look nice and i want to make it so the form doesnt have to submit to a new page or even reload!
right now i have a script that i put together. that has these things on it that are all
on the same pae im making it reload the page to submit. its an email verifying form meaning it sends and email witht he verification code to actually be a member.
here is the code: how can i make it so it becomes a form that never reloads the page?
thats what i want.

<?php session_start(); ?>
<html>

<?php







if ($_POST['form_submitted'] == '1') {


 ## Form submitted, user registering!

include_once $_SERVER['DOCUMENT_ROOT'] . '/securimage/securimage.php';

$securimage = new Securimage();
if ($securimage->check($_POST['captcha_code']) == false) {
  // the code was incorrect
  // handle the error accordingly with your other error checking

  // or you can do something really basic like this
  die('The code you entered was incorrect. go back and try again.');}


  mysql_connect("localhost", db, xxxx) or die(mysql_error());

mysql_select_db("xxxxxx") or die(mysql_error());


##User is registering, insert data until we can activate it
$activationKey =  mt_rand() . mt_rand() . mt_rand() . mt_rand() . mt_rand();
$username = mysql_real_escape_string($_POST[username]);
$password = mysql_real_escape_string($_POST[password]);
$email = mysql_real_escape_string($_POST[email]);
$sex = mysql_real_escape_string($_POST[sex]);
$age = mysql_real_escape_string($_POST[age]);
$location = mysql_real_escape_string($_POST[location]);
$ethnicity = mysql_real_escape_string($_POST[ethnicity]);
$marital = mysql_real_escape_string($_POST[marital]);
$sexuality = mysql_real_escape_string($_POST[sexuality]);
$haircolor = mysql_real_escape_string($_POST[haircolor]);
$name = mysql_real_escape_string($_POST[name]);
$eye = mysql_real_escape_string($_POST[eye]);
$hairtype = mysql_real_escape_string($_POST[hairtype]);
$weight = mysql_real_escape_string($_POST[weight]);
$height = mysql_real_escape_string($_POST[height]);
$ip = mysql_real_escape_string($_POST[ip]);
$date = mysql_real_escape_string($_POST[date]);






if($username == "") {
   die ("You must fill username. ");
}
if($password == "") {
   die ("You must fill password. ");
}
if($email == "") {
   die ("You must fill email. ");
}
if($sex == "") {
   die ("You must fill sex. ");
}
if($age == "") {
   die ("You must fill age. ");
}
if($location == "") {
   die ("You must fill location. ");
}





$sql="INSERT INTO users (username, password, email, sex, age, location, ethnicity, marital, sexuality, haircolor, name, eye, hairtype, weight, height, ip, date, activationkey, status) VALUES ('$username', '$password', '$email', '$sex', '$age', '$location', '$ethnicity', '$marital', '$sexuality', '$haircolor', '$name', '$eye', '$hairtype', '$weight', '$height', '$ip', '$date', '$activationKey', 'verify')";

if (!mysql_query($sql))

  {

  die('Error: ' . mysql_error());

  }

echo "An email has been sent to $_POST[email] with an activation key. Please check your mail to complete registration.";

##Send activation Email

$to      = $_POST[email];

$subject = " socialemo.com Registration";

$message = "Welcome to our website!\r\rYou, or someone using your email address, has almost completed registration at socialemo.com. You can complete registration by clicking the following link:\rhttp://www.socialemo.com/register.php?$activationKey\r\rIf this is an error, ignore this email and your email will be removed from our database.\r\rRegards, socialemo.com";

$headers = 'From: noreply@ socialemo.com' . "\r\n" .

    'Reply-To: noreply@ socialemo.com' . "\r\n" .

    'X-Mailer: PHP/' . phpversion();

mail($to, $subject, $message, $headers);




  }
  else {
  ##User isn't registering, check verify code and change activation code to null, status to activated on success

mysql_connect("localhost", xxxxx, xxxxxxx) or die(mysql_error());

mysql_select_db("xxx") or die(mysql_error());

$queryString = $_SERVER['QUERY_STRING'];

$query = "SELECT * FROM users";

$result = mysql_query($query) or die(mysql_error());

  while($row = mysql_fetch_array($result)){

    if ($queryString == $row["activationkey"]){

       echo "Congrats! " . $row["username"] . " is a member of socialemo.com.";

       $sql="UPDATE users SET activationkey = '', status='activated' WHERE (id = $row[id])";


       if (!mysql_query($sql))

  {

        die('Error: ' . mysql_error());

  }
  }
  }
}



?>

 <head>
   <title>Social Emo - Register</title>
   <link href="style/style.css" rel="stylesheet" type="text/css" /><link rel="shortcut icon" href="http://www.socialemo.com/favicon/favicon.ico">
</head>
 <body> <center>
 <span style="text-transform:none;font-size:32px;line-height:33px;letter-spacing:-2px;font-weight:bold;font-family:arial;word-spacing:2px;font-variant:small-caps">Requ</span><span style="font-size:32px;line-height:33px;letter-spacing:-2px;font-weight:bold;font-family:arial;word-spacing:2px;font-variant:none;text-transform:lowercase">i</span><span style="text-transform:none;font-size:32px;line-height:33px;letter-spacing:-2px;font-weight:bold;font-family:arial;word-spacing:2px;font-variant:small-caps">red Informat</span><span style="font-size:32px;line-height:33px;letter-spacing:-2px;font-weight:bold;font-family:arial;word-spacing:2px;font-variant:none;text-transform:lowercase">i</span><span style="text-transform:none;font-size:32px;line-height:33px;letter-spacing:-2px;font-weight:bold;font-family:arial;word-spacing:2px;font-variant:small-caps">on</span><br>
<form action="register.php" method="post" name="register">
    <table width="500px" cellspacing="0">
    <tr><td>Username: </td><td><input type="text" name="username" /></td></tr>
    <tr><td>Password: </td><td><input type="password" name="password" /></td></tr>
    <tr><td>Email: </td><td><input type="text" name="email" /></td></tr>
    <tr><td>Sex: </td><td><input type="radio" name="sex" value="male" />m<input type="radio" name="sex" value="female" />f<input type="radio" name="sex" value="other" />other</td></tr>
    <tr><td>Age: </td><td><select name="age">
    <option value=""></option>
<option value="youngest">0-12</option>
<option value="young">13-17</option>
<option value="adult">18-30</option>
<option value="older">31-50</option>
<option value="oldest">51+</option>
</select></td></tr>
    <tr><td>Location: </td><td><input type="text" name="location" /></td></tr>
    </table>
     <br>
      <span style="text-transform:none;font-size:32px;line-height:33px;letter-spacing:-2px;font-weight:bold;font-family:arial;word-spacing:2px;font-variant:small-caps">Other Prof</span><span style="font-size:32px;line-height:33px;letter-spacing:-2px;font-weight:bold;font-family:arial;word-spacing:2px;font-variant:none;text-transform:lowercase">i</span><span style="text-transform:none;font-size:32px;line-height:33px;letter-spacing:-2px;font-weight:bold;font-family:arial;word-spacing:2px;font-variant:small-caps">le Informat</span><span style="font-size:32px;line-height:33px;letter-spacing:-2px;font-weight:bold;font-family:arial;word-spacing:2px;font-variant:none;text-transform:lowercase">i</span><span style="text-transform:none;font-size:32px;line-height:33px;letter-spacing:-2px;font-weight:bold;font-family:arial;word-spacing:2px;font-variant:small-caps">on</span><br>

    <table width="500px" cellspacing="0">
    <tr><td>Ethnicity: </td><td><input type="text" name="ethnicity" /></td></tr>
    <tr><td>Marital Status: </td><td><input type="text" name="marital" /></td></tr>
    <tr><td>Sexuality: </td><td><select name="sexuality">
<option value="str8">str8</option>
<option value="gay">gay</option>
<option value="bi">bi</option>
<option value="not interested">not interested</option>
<option value="other">other</option>
</select></td></tr>
    <tr><td>Hair Color: </td><td><input type="text" name="haircolor" /></td></tr>
    <tr><td>1st Name: </td><td><input type="text" name="name" /></td></tr>
    <tr><td>Eye Color: </td><td><input type="text" name="eye" /></td></tr>
    <tr><td>Hair Type: </td><td><input type="text" name="hairtype" /></td></tr>
    <tr><td>Weight: </td><td><input type="text" name="weight" /></td></tr>
    <tr><td>Height: </td><td><input type="text" name="height" /></td></tr>

    <tr><td></td><td><input type="hidden" name="ip" value="<?php echo $_SERVER['REMOTE_ADDR'] ?>" />
    <input type="hidden" name="date" value="<?php
echo date("n/d/y");
$time = date("|h:i:s",time());
echo $time ?>" /><input type="hidden" name="form_submitted" value="1"/></td></tr>
<tr><td><img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" /></td><td><input type="text" name="captcha_code" size="10" maxlength="5" /> </td></tr>
<tr><td><a href="#" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">Reload Image</a></td></tr>
  <table width="500px" cellspacing="0"><tr><td><center><input type="submit" value="submit" /></center></td></tr></table>
  </form>
  </table>
  </center>
 </body>

</html>

javascript php

3 Contributors
10 Replies
150 Views
1 Month Discussion Span
Latest Post 15 Years Ago Latest Post by SKANK!!!!!

Airshow 416 WiFi Lounge Lizard

15 Years Ago

It's quite simple. You need to learn how to return true/false from event handlers in order to determine whether natural HTML actions are performed or not. Write your checking function(s) to return false for each error condition, and true (typically at the very botttom of the function) if no error is trapped.

I like your belt-and-braces approach of checking server-side too.

That's good practise.

Make sure to keep the JS and PHP adjacent in your code such that you can easily see that the two sets of code are performing the same checks.

Start here:
http://www.w3schools.com/jS/js_form_validation.asp

No need to employ an iFrame.

Airshow

Airshow 416 WiFi Lounge Lizard

15 Years Ago

Mmmm, BaburajSNS seems to think this is about iFrames where I think it's about return true/false in Javascript.

Two solutions to the same problem? <respect>BaburajSNS</respect> and I certainly appear to have completely different mindsets. I have to ask myself, did I misread the original post?

SKANK, is this about client-side (JavasCript) form checking, such that the page containing a form does not need to be refreshed as would be the case with server-side checking?

If so, could someone explain how placing a CAPTCHA image in an iFrame helps. I'm sure it's me being thick.

Airshow

Airshow 416 WiFi Lounge Lizard

15 Years Ago

OK, you need more help. Try this. It's just an incomplete test page (save it as testForm.html, don't overwrite your original file) but should get you undeway.

Notice how checkForm()returns either true or false and that this result is itself returned (to the underlying browser code) at the point where checkForm()" is called in the <form> tag's onsubmit property.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
[INDENT]Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">[/INDENT]
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body { font-size:10pt; }
form { margin:0; }
#message { height:20px; color:#000000; }
.inputField { color:#000000; }
</style>

<script language="JavaScript" type="text/javascript">
function checkForm(){
	var errorMsg = 'Error: Missing/incorrect fields highlighted in red.'
	var rtnVal = true;
	//Hair color
	if(document.getElementById('hairColorInput').value == ''){
		highlight('hairColor', false);
		rtnVal = false;
	}
	else { highlight('hairColor', true); }
	//Eye color
	if(document.getElementById('eyeColorInput').value == ''){
		highlight('eyeColor', false);
		rtnVal = false;
	}
	else { highlight('eyeColor', true); }
	if(!rtnVal){
		document.getElementById('message').innerHTML = errorMsg;
		document.getElementById('message').style.color = '#FF0000';
	}
	return rtnVal;
}
function highlight(id, state){
	document.getElementById(id).style.color = (state) ? '#000000' : '#FF0000';
}
</script>
</head>

<body>

<div>Complete the form then click "Submit"</div>
<div id="message"></div>
<form method="post" action="formCheck.html" onsubmit="return checkForm()">
	<div id="hairColor" class="inputField">Hair Color&nbsp;<input id="hairColorInput" name="hairColor"></div>
	<div id="eyeColor" class="inputField">Eye Color&nbsp;<input id="eyeColorInput" name="eyeColor"></div>
	<div><input type="submit" value="Submit"></div>
</form>

</body>
</html>

With a bit of work you will be able to convert your page to work like this. No need for jquery plugins.

Of course, you might like your checks to be more sophisticated than simply checking for an empty string but you will have to develop such tests yourself.

Good luck

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

BaburajSNS 0 Newbie Poster · Answer 1 · 2009-04-21T13:47:44+00:00

Hi

Why don't you can keep Captcha code in Iframe
when you submit each time it will not be refreshed
at the same time Error message also be displayed

BaburajSNS
Securenext

SKANK!!!!! 5 Posting Pro in Training · Answer 2 · 2009-04-21T14:26:18+00:00

SKANK!!!!! 5 Posting Pro in Training

15 Years Ago

how would i keep a captcha code in iframe?

BaburajSNS 0 Newbie Poster · Answer 3 · 2009-04-21T18:37:09+00:00

<table>
<tr>
<td>
<img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" />
</td>
</tr>
</table>

Save File as A.php
Call the File in Iframe

<iframe frameborder="0" src="A.php"></iframe>

SKANK!!!!! 5 Posting Pro in Training · Answer 4 · 2009-04-22T04:04:20+00:00

i dont know what client side means really all i know is that my captcha is working fine for the most part it reloads when i click the reload button but it doesnt reload the whole page just gets a new image.
but the rest has php checking so people dont subbmit and not fill in the required feilds. it actually submits to the page again where only "fill in username" and ect... is the text that is shown, unstyled and yeah. i was wondering if i could keep those things but use javascript maybe jquery or ajax or whatever it is to make the form not reload the page ever unless the person had javascript turned off then the php i have now would make sure they didnt submit the form and it get put in the datasbase without filling the required fields.

i still dont know how to do this ive added a few things to the code thatbeing "jquery plugins" that give the optional questions a defualt value & another tooltip by the email. thats about it. here is the link of wha i haave so far
http://www.socialemo.com/register.php

SKANK!!!!! 5 Posting Pro in Training · Answer 5 · 2009-05-27T07:07:12+00:00

ok i have checks but i dont understand what this code does? doe it give a popup cause i was hoping to use something like ajaz so i didnt have to reload the page and data be lost to echo " username must be between 10 and 25 characters"

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 6 · 2009-05-27T08:57:57+00:00

Skank,

The code inhibits form submission if validation fails. It displays an error message and highlights each field that failed validation by changing the colour of its label. This is just one way to indicate validation failures.

The refresh button was confusing (just there for testing) so I have taken it out:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body { font-size:10pt; }
form { margin:0; }
#message { height:20px; color:#000000; }
.inputField { color:#000000; }
</style>

<script language="JavaScript" type="text/javascript">
function checkForm(){
	var errorMsg = 'Error: Missing/incorrect fields are highlighted in red.'
	var rtnVal = true;
	//Hair color
	var el = (document.getElementById) ? document.getElementById('hairColorInput') : document.all['hairColorInput'];
	if(el){
		if(el.value == '') {
			highlight('hairColor', false);
			rtnVal = false;
		}
		else { highlight('hairColor', true); }
	}
	//Eye color
	var el = (document.getElementById) ? document.getElementById('eyeColorInput') : document.all['eyeColorInput'];
	if(el){
		if(el.value == '') {
			highlight('eyeColor', false);
			rtnVal = false;
		}
		else { highlight('eyeColor', true); }
	}
	//User name
	var el = (document.getElementById) ? document.getElementById('userNameInput') : document.all['userNameInput'];
	if(el){
		var value = el.value;
		var length = (!value) ? 0 : value.length;
		if(length < 10 || length > 25) {
			highlight('userNameInput', false);
			rtnVal = false;
		}
		else { highlight('userNameInput', true); }
	}
	if(!rtnVal){
		document.getElementById('message').innerHTML = errorMsg;
		document.getElementById('message').style.color = '#FF0000';
	}
	return rtnVal;
}
function highlight(id, state){
	var el = (document.getElementById) ? document.getElementById(id) : document.getElementById['id'];
	if (el){ el.style.color = (state) ? '#000000' : '#FF0000'; }
}
</script>
</head>

<body>

<div>Complete the form then click "Submit"</div>
<div id="message"></div>
<form method="post" action="formCheck.html" onsubmit="return checkForm()">
	<div id="hairColor" class="inputField">Hair Color&nbsp;<input id="hairColorInput" name="hairColor"></div>
	<div id="eyeColor" class="inputField">Eye Color&nbsp;<input id="eyeColorInput" name="eyeColor"></div>
	<div id="userNameInput" class="inputField">User Name&nbsp;<input id="eyeColorInput" name="eyeColor" size="25" maxlength="25"></div>
	<div><input type="submit" value="Submit"></div>
</form>

</body>
</html>

Good luck

Airshow

SKANK!!!!! 5 Posting Pro in Training · Answer 7 · 2009-05-27T09:18:02+00:00

ok i will try it out when my site is back up thank you for the code. i hope it doesnt interfere with regular form checking if javascript is turned off.