1.

Solve : html with JS accessing PHP Help required?

Answer»

Hey folks,

Here's the squeeze... I need to run a js validate function in my html file.  Then after successful validation it should use the form action to access my php file.  I can run this fine without the JS function but when I put a function in it stops working.  I've put the script below with the php code also.  If someone could have a look and get back to me that would be ace.  Thanks in advance for taking the TIME to look at this and hope to hear from someone soon.

HTML code



Chocolate Shop on page 54









Chocolate Shop Order Form




  Real Life sized T-Rex model
  Space Station
  A Cape with matching Mask
  A Plot of land on the Moon
  A Space Shuttle
  One Launch spot from KENNEDY Space centre
  A real dead vampire
  A revolution
  Aid Food Packages
  Plutonium
  Real 3D Glasses



quantity:







PHP code






$quantity = $_POST['quantity'];
$item = $_POST['item'];
echo "You ordered ". $quantity . " " . $item . ".
";
echo "Thank you for ordering from Imaginery!";
?>


Forgot to say I'm running this through wampserver.

Cheers,
B2 Quote

document.formOne.quantity.value==""
This will not reference the form variable you intend.  Give the quantity input an id tag like this:

Code: [Select]<input name ="quantity" id="quantity" type ="text" value="" />
You can then reference it like this:

Code: [Select]var quantity = document.getElementById ('quantity');
if(quantity.value=="") {
...

Remember to "return false;" to ensure the form is not submitted.  Your onsubmit needs to be TWEAKED too (see >this tutorial< and follow it more closely.)

And this is not valid javascript at all:

Code: [Select]action ="my shop process.php" method="POST";

You don't need it, because the form will submit, unless the validation returns false.

FWIW, I wouldn't do it this way, except for very very small projects.  You might want to investigate one of the techniques referred to >here<.

Don't forget your server-side validation.  Javascript validation is no protection against deliberate abuse.Cool, will give this ago and let you know the outcome.  Thanks for the post I'm doing this for college.  So thanks again it's appreciated.

Cheers,
B2Hey there,

Sorry took me a while to get back to you peeps on this.  Just want to say thanks for the help and pointers!!

I've got only got small prob now.  My validation works... but it's not coming up in an alert box.  It's taking it from the IF statement in the php file.  I was told to put an IF statement in there for IF statements sake I think lol... anyway I'm not sure why my alert in the function validation() is not coming up.  If you can see anything I've missed I'd or can't see anything wrong with it could someone let me know.  It's driving me nuts lol

source code below

Cheers,

B2

<html>
<head>
<title>Chocolate Shop on page 54</title>

<script type ="text/JavaScript">



function validate()

{
  If(document.OnlyForm.item.value=="" ||

document.OnlyForm.quantity.value=="")
{
  alert("You need to fill in a quantity number");
  return false;
}

else
  {
    parent.location="my shop process.php";
  }
 
}


</script>
</head>
<body>

<h4>Chocolate Shop Order Form</h4>

<form name="OnlyForm" action="my shop process.php"
method="post" onsubmit="validate()">

<select name = "item">
  <option> </option>
  <option>Real Life sized T-Rex model</option>
  <option>Space Station</option>
  <option>A Cape with matching Mask</option>
  <option>A Plot of land on the Moon</option>
  <option>A Space Shuttle</option>
  <option>One Launch spot from Kennedy Space
  <option>A real dead vampire</option>
  <option>A revolution</option>
  <option>Aid Food Packages</option>
  <option>Plutonium</option>
  <option>Real 3D Glasses</option>
</select>


quantity: <input name ="quantity" type ="text">

<input type ="submit" value="Submit This"

onclick="validate()">
</form>


</body>
</html>There is a "web design" forum.

Anyway, you still don't appear to be doing what Rob suggested, as in giving the field an ID and use document.getElememtById() to get its value. Also, we can't see the PHP file you're using so can't really help. Quote from: kpac on October 15, 2011, 10:54:14 AM
There is a "web design" forum.

Anyway, you still don't appear to be doing what Rob suggested, as in giving the field an ID and use document.getElememtById() to get its value. Also, we can't see the PHP file you're using so can't really help.

Hi there kpac,

I've added in what Rob suggested and it still doesn't work (could be the way I've added it in though).  I've put the php file on at the bottom of the bold source code.  Sorry for posting in the wrong spot.  You want to move it to the other forum?  I'm not sure if I can or if I even have the privilege to do that.

Cheers,
B2

<html>
<head>
<title>Chocolate Shop on page 54</title>

<script type ="text/JavaScript">




function validate()

var quantity = document.getElementById ("quantity");

var quantity = document.getElementById ("item");


{
  if(item.value=="" || quantity.value=="")
{
  alert("You need to fill in a quantity number")
  return false;
}

else
  {
    parent.location="my shop process.php";
  }
 
}


</script>
</head>
<body>

<h4>Chocolate Shop Order Form</h4>

<form name="OnlyForm" action="my shop process.php"
method="post" onsubmit="validate()">

<select name = "item" id="item">
  <option> </option>
  <option>Real Life sized T-Rex model</option>
  <option>Space Station</option>
  <option>A Cape with matching Mask</option>
  <option>A Plot of land on the Moon</option>
  <option>A Space Shuttle</option>
  <option>One Launch spot from Kennedy Space
  <option>A real dead vampire</option>
  <option>A revolution</option>
  <option>Aid Food Packages</option>
  <option>Plutonium</option>
  <option>Real 3D Glasses</option>
</select>


quantity: <input name="quantity" id="quantity" type="text">

<input type ="submit" value="Submit This" onclick="validate()">
</form>


</body>
</html>



My Shop Process




$item = $_POST['item'];
$quantity = $_POST['quantity'];

   If($item =="" || $quantity =="")
   {
   echo("You need to fill in all the boxes");
   }
else

{

echo "You ordered ". $quantity . " " . $item . ".
";
echo "Thank you for ordering from Imaginery!";

}

?>


Okay...

This is your javascript...
Code: [Select]<script type ="text/JavaScript">

function validate()

var quantity = document.getElementById ("quantity");
var quantity = document.getElementById ("item");


{
  if(item.value=="" || quantity.value=="")
{
  alert("You need to fill in a quantity number")
  return false;
}

else
  {
    parent.location="my shop process.php";
  }
 
}

</script>

Well, you declared the variable quantity twice. If you want the variable quantity to be assigned to the element with ID "quantity", then it can't be assigned to the element with ID "item" as well. You were also missing the opening parentheses of the function.

Code: [Select]<script type ="text/JavaScript">

    function validate() {

        var quantity = document.getElementById("quantity");
        var item = document.getElementById("item");

        if(quantity.value== "" || item.value == "")
        {
            alert("You need to fill in a quantity number.")
            return false;
        }

        else
        {
            window.location="my shop process.php";
        }
         
    }
</script>

Just a suggestion, it's not the best IDEA to have filenames with blank spaces, i.e. "my shop process.php". It's better to use an underscore or hyphen to separate words like so: "my-shop-process.php" or "my_shop_process.php".

As regards the PHP file, a rule of thumb is to make sure every variable you $_GET or $_POST from another page is filtered properly. Also, try using the empty function to check if a variable has any value.

Code: [Select]<?php

$item = strip_tags($_POST['item']);
$quantity = strip_tags($_POST['quantity']);

if(empty($item) || empty($quantity)) {
    echo("You need to fill in all the boxes");
}

else {
    echo "You ordered ". $quantity . " " . $item . ".";
    echo "Thank you for ordering from Imaginery!";
}

?>
One final thing, if you're posting code please use the

Code: [Select][code]
...bbc tag. It's much easier to READ. Hey kpac,

When I leave all fields blank the alert from the JS in the html file is working... however, the alert is coming up twice then it displays the php echo.

Is there a way to just have the alert run once and then stop on the same page (the html one) so the user can fill in the details?

I also tried to add a hyperlink on the php file outside of the php code and it doesn't show up on the page at all.  Is there a way to do it like below.  I renamed my pages with - between the words 

Code: [Select]<?php

$item = strip_tags($_POST['item']);
$quantity = strip_tags($_POST['quantity']);

if(empty($item) || empty($quantity)) {
    echo("You need to fill in all the boxes"[b]A hyperlink in here somewhere???[/b]);
}

else {
    echo "You ordered ". $quantity . " " . $item . ".";
    echo "Thank you for ordering from Imaginery!";
}

?>

<a href="my-shop-validation.html">click to go back</a>Instead of

Code: [Select]<input type ="submit" value="Submit This" onclick="validate()">
use

Code: [Select]<input type="submit" value="Submit This" onclick="validate(); return false;" />
Watch out for spurious spaces in the middle of your HTML attribute declarations (type ="submit"). Quote from: Rob Pomeroy on October 18, 2011, 06:04:05 AM
Instead of

Code: [Select]<input type ="submit" value="Submit This" onclick="validate()">
use

Code: [Select]<input type="submit" value="Submit This" onclick="validate(); return false;" />
Watch out for spurious spaces in the middle of your HTML attribute declarations (type ="submit").

Hi folks,

Just to say that this would have worked but I overlooked one little thing....

Code: [Select]{
  If(document.OnlyForm.item.value=="" ||

document.OnlyForm.amount.value=="")
{
  alert("You need to fill in a quantity number");
  return false;
}
Yup and everyone else overlooked it too lolz  I had a capital "I" for if in my if statement lolz.

Rob - what you posted works as well by the way.  I tried it... after I replaced my "I" with an "i" lolz

Issue resolved !!

Cheers for the time you all took having a look at my code, much appreciated !!

B2  Excellent.  Thanks for the feedback.


Discussion

No Comment Found

Related InterviewSolutions