PDA

View Full Version : using visibility:hidden; on a div doesn't work the 'send' button



prosperlife
12-27-2009, 12:49 PM
I checked the code for hours and I can't figure out why the form doesn't work. Please, I need help, I need to finish this page.

Inside the input form there is a div using visibility:hidden.
The div works perfectly when it is selected (show or hide), not problem.
The problem is when press the send button the form doesn't send anything, not respond, do nothing!.

Any help?

Philip M
12-27-2009, 01:13 PM
Please help us to help you by following the posting guidelines and wrapping your code in [code ][ /code ] tags (omit the spaces). This means use the octothorpe or # button on the toolbar which will insert the tags. You can (and should) edit your previous post.

// checkW3C DOM, then MSIE 4, then NN 4.
IE4 and Netscpe 4 are long one with Nineveh and Tyre.

The <!-- and //--> comment (hiding) tags have not been necessary since IE3. If you see these in some published script it is (as here) a warning that you are looking at ancient and perhaps over-complicated and/or unreliable code.

If you want to show/hide a span or a div, simply:-

document.getElementById("spanID").style.display="none";
or
document.getElementById("spanID").style.display="block";

I do not see any <form> tags. Obviously only a form can be submitted.


"I find television very educating. The minute somebody turns it on, I go into the library and read a book."
[Groucho Marx, 1890-1977.

prosperlife
12-27-2009, 05:18 PM
I made the changes you suggested but still not working.......:(

prosperlife
12-27-2009, 06:00 PM
I think the problem is with this code:

Philip M
12-27-2009, 07:18 PM
Scrap that ancient code, and as I say use

document.getElementById("spanID").style.display="none";
or
document.getElementById("spanID").style.display="block";

I am not able to be more precise as you do not show your HTML so it is a mystery what you want to do exactly.

prosperlife
12-27-2009, 07:48 PM
I already deleted the "ancient code".
Here is the complete code:



<?php
session_start();
?>
<!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" xml:lang="en" lang="en">
<head>
</head>
<body>
<div>

<?php
if(isset($_POST['send'])){

$body = "Primary Passenger Information:\r\n\n";
$body .= "First Name: ".$_POST["firstname"]."\r\n";
$body .= "Last Name: ".$_POST["lastname"]."\r\n";
$body .= "email: ".$_POST["email"]."\r\n";
$body .= "Phone: ".$_POST["phone"]."\r\n";
$body .= "Number Of Passengers: ".$_POST["passengers"]."\r\n\n";

$body .= "Trip Information:\r\n\n";
$body .= "Departure Date: ".$_POST["departuremonth"]."/".$_POST["departureday"]."/".$_POST["departureyear"]."\n";
$body .= "Departure Location: ".$_POST["L2"]."\n\n";
$body .= "Return Date: ".$_POST["returnmonth"]."/".$_POST["returnday"]."/".$_POST["returnyear"]."\n\n";

$body .= "The rate for each person is: ".$_GET["$rate"]."\r\n";
$body .= "Total amount to pay: ".$_GET["$amount"]."\r\n\n";

$emailTo = "info@domainname.com";
$subject = "email";

$headers = "From: ".$_POST['email']."\n";
$headers .= "Reply-To:".$_POST['email']."\n";

if($_SESSION['security_code'] == $_POST['security_code']){
if($_GET['continue'] != 1)
{
// print out the info
echo "<br>Please review the information you have entered before proceed with <br/>
the reservation:<br/><br/>";

echo "<strong>PRIMARY PASSENGER INFORMATION</strong><br/>";
echo "<strong>First Name:</strong> ".$_POST["firstname"]."<br/>";
echo "<strong>Last Name:</strong> ".$_POST["lastname"]."<br/>";
echo "<strong>email:</strong> ".$_POST["email"]."<br/>";
echo "<strong>Phone:</strong> ".$_POST["phone"]."<br/>";
echo "<strong>Number of Passengers:</strong> ".$_POST["passengers"]."<br/><br/>";

echo "<strong>TRIP INFORMATION</strong><br/><br>";
echo "<strong>Trip way:</strong> ".$_POST["form_type"]."<br/>";
echo "<strong>Departure Date:</strong> ".$_POST["departuremonth"]."/".$_POST["departureday"]."/".$_POST["departureyear"]."<br/>";
echo "<strong>Return Date:</strong> ".$_POST["returnmonth"]."/".$_POST["returnday"]."/".$_POST["returnyear"]."<br/>";

$continue = '0';
$onewayrate = '30';
$roundtriprate = '55';
$amount = '0';
$rate = '0';

if ($_POST["form_type"] == 'One way'){
$amount = $_POST["passengers"] * $onewayrate;
$rate = $onewayrate;
}
else
{
$amount = $_POST["passengers"] * $roundtriprate;
$rate = $roundtriprate;
}
echo "<strong>The rate for each person is:</strong> $".$rate.",00<br/>";
echo "<strong>Your total amount to pay for this reservation is:</strong> $".$amount.",00<br /><br />";

?>
<button type="submit" id="" name="" value="continue" style="margin-right:10px; line-height:28px; vertical-align:top;"><a href="javascript:history.go(-1);">Edit Your Reservation</a></button>
<button type="submit" id="" name="" value="continue" style="margin-right:10px;">Submit Your Reservation<br /> &amp; Pay with PayPal</button>
<button type="submit" id="" name="" value="continue">Submit Your Reservation<br /> &amp; Pay at the Station</button>

<?
}

else
{

$success = mail($emailTo, $subject, $body, $headers);
if ($success){
include("msgbox.inc.php");
$a=new msgBox("<br><strong>Successfully Entry!</strong>, Thank you for your reservation.<br><br>We will send you a confirmation number in few minutes.<br><br> Thank you for choosing our services<br><br>","OKHome","Reservation Form" );
// define the links
$links=array("index.php");
// make the links
$a->makeLinks($links);
// draw the message box
$a->showMsg();
$continue = '0';
}
}
}
else {
include("msgbox.inc.php");
$a=new msgBox("Sorry! The Security Code is Invalid, Please go back, Thanks.","OKOnly","Security Code Message" );
// define the links
$links=array("reservation.php");
// make the links
$a->makeLinks($links);
// draw the message box
$a->showMsg();
}
} // end send
else {
?>

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="cmxform" id="commentForm">
<input type="hidden" name="onewayrate" value="30"/>
<input type="hidden" name="roundtriprate" value="55"/>
<input type="hidden" name="continue" value="0"/>

<fieldset>

<dl>
<dt><label for="firstname">First Name:</label></dt>
<dd><input type="text" name="firstname" id="firstname" class="required" size="32" maxlength="128" style="width:225px" />
<span class="textred">(*)</span>
</dd>
</dl>
<dl>
<dt><label for="lastname">Last Name:</label></dt>
<dd><input type="text" name="lastname" id="lastname" class="required" size="32" maxlength="128" style="width:225px"/>
<span class="textred">(*)</span>
</dd>
</dl>
<dl>
<dt><label for="email">E-Mail:<br /></label></dt>
<dd><input id="email" name="email" class="required email" style="width:225px"/>
<span class="textred">(*)</span>
</dd>
</dl>
<dl>
<dt><label for="passengers"># of Passengers:</label></dt>
<dd><select size="1" name="passengers" id="passengers" class="required" style="width:50px">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>

<span class="textred">(*) For parties of 5 or more please <a href="contact.php">contact us</a>.</span>
</dd>
</dl>
</fieldset>

<fieldset>
<legend>Trip Information</legend>

<dl>
<dt><label for="L1">Choose a trip way:</label></dt>
<dd>
<input type="radio" name="form_type" value="One way" onClick="document.getElementById("ow").style.display="block";">
<span class="radiotripway">One Way</span>
<input type="radio" name="form_type" value="Round trip" onClick="document.getElementById("rt").style.display="block";">
<span class="radiotripway">Round Trip</span>
<span class="textred">(*)</span>
</dd>
</dl>

<div id="ow" style="position:absolute; visibility:hidden; top:820px; left:190px; background:#ced5e9; border-color:#fff #999 #999 #fff; border:1px solid #fff; width:800px;">
<dl>
<dt><label for="departuredate">Departure Date:</label></dt>
<dd>
<select size="1" name="departuremonth" id="departuremonth" style="width:50px">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
<select size="1" name="departureday" id="departureday" style="width:50px">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select size="1" name="departureyear" id="departureyear" style="width:70px">
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
<span class="textred">(*)</span>
</dd>
</dl>
</div>
<div id="rt" style="position:absolute; visibility:hidden; top:820px; left:190px; background:#ced5e9; border-color:#fff #999 #999 #fff; border:1px solid #fff; width:800px;">
<dl>
<dt><label for="departuredate">Departure Date:</label></dt>
<dd>
<select size="1" name="departuremonth" id="departuremonth" style="width:50px">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
<select size="1" name="departureday" id="departureday" style="width:50px">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select size="1" name="departureyear" id="departureyear" style="width:70px">
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
<span class="textred">(*)</span>
</dd>
</dl>
<dl>
<dt><label for="returndate">Return Date:</label></dt>
<dd>
<select size="1" name="returnmonth" id="returnmonth" style="width:50px">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
<select size="1" name="returnday" id="returnday" style="width:50px">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select size="1" name="returnyear" id="returnyear" style="width:70px">
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
<span class="textred">(*)</span>
</dd>
</dl>

</div>
</fieldset>
<div align="center" style="width:550px; margin-top:10px;">
<button type="submit" id="send" name="send" value="send">Send</button>
</div>

</form>
<?php } ?>
</div>
</body>
</html>

godofreality
12-27-2009, 10:28 PM
replace


<button type="submit" id="send" name="send" value="send">Send</button>

with


<input type="submit" id="send" name="send" value="send" />

prosperlife
12-27-2009, 11:08 PM
I did, but doesn't work.....:(

Old Pedant
12-27-2009, 11:48 PM
The JavaScript code is *BROKEN* because you have " marks INSIDE of other " marks.

And the code is MISMATCHED!

You are doing:


onClick="document.getElementById("ow").style.display="block";"

But the element is declared as:

<div id="ow" style="position:absolute; visibility:hidden; ..."


visibility and display are COMPLETELY DIFFERENT things.

Make up your mind which you will use. I recommend "display", as making something invisible means it *still* occupies the same space.

So:


<div id="ow" style="position:absolute; display: none; top:820px; left:190px; ... >
...
<div id="rt" style="position:absolute; display: none; top:820px; left:190px; ... >


But you still have a fatal flaw: If user first clicks on "oneway" and then changes his mind and clicks on "round trip", then you will be trying to display *BOTH* div's.

You need to fix it to turn off the other div when one turns on.

So let's fix that *AND* fix your JS code at the same time:


<input type="radio" name="form_type" value="One way"
onclick="document.getElementById('ow').style.display='block';
document.getElementById('rt').style.display='none';">
...
<input type="radio" name="form_type" value="Round trip"
onclick="document.getElementById('ow').style.display='none';
document.getElementById('rt').style.display='block';">

See the apostrophes in there, in place of the quotes?

prosperlife
12-28-2009, 12:50 AM
Thanks Old Pedant!

Thank you to the time and read all this code!

All the js code you are suggesting is allright, and I already fixed them,

but the form still doesn't work....

Before press the send button, everything work fine, but after click on send, the form do nothing!:(

Old Pedant
12-28-2009, 01:06 AM
Okay...here is an easy test.

TEMPORARILY, change the form to METHOD=GET.



<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get" class="cmxform" id="commentForm">

Now click the SEND button and look at the URL in your browser.

You should see all the form field names AND values in the query string.

Copy/paste that full URL here if you aren't sure it is doing that.

Old Pedant
12-28-2009, 01:15 AM
Oh, your PHP code is BADLY broken!

It will NEVER work.

There are so many mistakes I don't have time to try to fix them all.

Just SOME of the mistakes:
(1) You are mixing $_GET and $_POST and yet your <form> is all method=post.
(2) You show the confirmation message and ask them to click a button, but your confirmation buttons are *NOT* inside a <FORM>...</form> so they will do *NOTHING*.
(3) Even if the confirmation buttons worked, you will post back to this page, but then ALL OF THE INFORMATION you gathered for the $body variable will be *GONE* with NO WAY to retrieve it.

I am *NOT* a PHP coder. You need some help at a basic tutorial level, and I can't give it to you.

prosperlife
12-28-2009, 01:22 AM
Old Pedant;

I did what you are telling me and simply after I press the send button nothing show on the address bar, the form do nothing.

in the address bar only show the reservation.php page that's all, nothing more after that.

:(I don't know what happen with the form.

Do you know? any clue?

prosperlife
12-28-2009, 02:08 AM
Old pedant:

I deleted the <div> where the "display:none" goes and.....
the php form works!!

May be you are right about the PHP code, I am not an expert in PHP but the problem here is not the PHP code is the JS code.

For some reason the JS code:

onclick="document.getElementById('ow').style.display='block'

or

<div id="ow" style="position:absolute; display: none;...>

(I really don't know) is messing up the form.

Any clue?

godofreality
12-28-2009, 02:47 AM
do u have this up live sumwhere? if so post a link if not can u put it up live sumwhere

Old Pedant
12-28-2009, 04:20 AM
Well shut my mouth. I have no idea *HOW* it all works.

But, again, I'm not a PHP person.

I just looked at what I *thought* the PHP code is doing and it looked all wonky to me.

Okay...good luck.

godofreality
12-28-2009, 06:00 AM
Well shut my mouth. I have no idea *HOW* it all works.

But, again, I'm not a PHP person.

I just looked at what I *thought* the PHP code is doing and it looked all wonky to me.

Okay...good luck.

lol i am a php coder but i don't have the patience ti sift through it all without seeing what it looks like in a browser as well

ok so i hosted that code on my wamp server and i am getting a parse error on line 388 which is </html> so somewhere in your php is some errors