Hiding text and use Radio button to view it - html

I am trying to have some content show/appear if a certain radio button (YES) is selected. I have provided the text I have in HTML form. I believe this should be a very simple code but I am VERY rusty on my HTML. This is all within a table. If the YES radio is chosen, I would like the 3 Quantity portions to appears but if not then I would like them hidden. I hope this helps...
<tbody>
<td class="style1" colspan="2">
<strong>Room Setup<br>
<tr>
<span class="style2"><em>Complete where applicable</em></span>
</strong>
</td>
<td style="width: 255px;">
*Is a Room Setup Required?
</td>
<td style="width: 202px;">
<input name="roomsetup" value="yes" type="radio">
Yes<br>
<input name="roomsetup" value="no" type="radio"> No
</td>
</tr>
<tr>
<td style="width: 255px; height: 14px;">
</td>
<td style="width: 202px; height: 14px;">
</td>
</tr>
<tr>
<td style="width: 255px;" class="style3">
Quantity
</td>
<td style="width: 202px;">
<input name="roomchairs" value="yes" type="checkbox"> Chairs Needed<br>
<input name="roomchairsquantity" type="text">
</td>
</tr>
<tr>
<td style="width: 255px;">
</td>
<td style="width: 202px;">
</td>
</tr>
<tr>
<td style="width: 255px;" class="style3">
Quantity
</td>
<td style="width: 202px;">
<input name="checktables" value="yes" type="checkbox"> Tables Needed<br>
<input name="roomquantitytable" type="text">
</td>
</tr>
<tr>
<td style="width: 255px;">
</td>
<td style="width: 202px;">
</td>
</tr>
<tr>
<td style="width: 255px;" class="style3">
Quantity
</td>
<td style="width: 202px;">
<input name="checktableclothes" value="yes" type="checkbox"> Tableclothes
Needed<br>
<input name="roomquantitycloth" type="text">
</td>
</tr>
<tr>
<td style="width: 255px;" class="style3">
</td>
<td style="width: 202px;">
</td>
</tr>

There are about two ways you can do this.
(1) Using PHP
<?php
if($_POST["RADIOBOX NAME"] =="OPTION YOU WANT TO SELECT") {
echo "WHAT YOU WANT TO SAY";
//USE THE ECHO AS MUCH AS NEEDED
}
?>
(2) I think that there is a JavaScript for this, however, I am not familiar with JavaScript.

You'll need some javascript for that. If you can use something like jQuery, this is really easy to do, and it's easy to find brazillions tutorial on Internet.
For exemple this one or this one

Related

My form answers are not attaching to email

I have wrote in scripting a simple question list, I need the responses to be returned in a txt file via email when the person hits submit. The front end of the file works, the email creates but the form does not post. Can anyone help with this scripting please?
Coding listed below:
<form action="mailto:test#yahoo.com?subject=Test" id="form" method="post" name="form" >
<!-- PAGE HEADER -->
<table bgcolor=#D1DEE5>
<tr>
<td width="833px"align="center">
<input class="title" name="Title" value="Customer Satisfaction Survey">
</td>
</tr>
</table>
<!-- QUESTIONS -->
<p>
<table>
<tr>
<td>
<p> Welcome message
<p>
</ul>
</td>
</tr>
</table>
<br>
<table>
<tr class="shaded">
<td align="left">
<p><b>Please tell us based on your experience, how satisfied you are with the following services:</b>
</td>
<td align="center" width="50px">Very satisfied</td>
<td align="center" width="50px">Satisfied</td>
<td align="center" width="50px">Dissatisfied</td>
<td align="center" width="50px">Very Dissatisfied</td>
<td align="center" width="50px">N/A</td>
</tr>
<tr>
<td>A</td>
<td align="center" width="50px"><input type="radio" name="q1" value="Very satisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Satisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Dissatisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Very Dissatisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="N/A"></td>
</tr>
</table>
<br>
<table class="outlineTable" bgcolor=#D1DEE5>
<tr>
<td align="left" rowspan=5 width=500 style="vertical-align:top" style="padding-top:5px">
<p><b>Please add comments to explain your answers</b>
<br><textarea name="Comments10" id="Comments10" rows="7" cols="55"></textarea>
</td>
<td align="left">
Month being scored
</td>
<td align="left" class="submitButton">
<input class="name" name="Month">
</td>
</tr>
<tr>
<td align="left">
Name
</td>
<td align="left" class="submitButton">
<input class="name" name="Name">
</td>
</tr>
<tr>
<td align="left">
Date
</td>
<td align="left" class="submitButton">
<input class="name" name="Date">
</td>
</tr>
<tr>
<td align="left">
</td>
<td align="left" class="submitButton">
<input class="button2" type="submit" value="Click here to submit results">
</td>
</tr>
</table>
<br>
<table bgcolor=#D1DEE5>
<tr>
<td align="center">
<h1> Many thanks for taking the time to complete this survey
</td>
</tr>
</table>
<p>
</form>
</body>
</html>

Contact form html

i am designing a contact page for a friend he gave me a templete to use for his site it has a contact page already built in with the following code
<td><form method="post" action="/frms/contactmail.pl">
<input type="hidden" name="SoupermailConf" value="/frms/contact.con">
<table width="100%" border="0" cellpadding="0" align="center" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellpadding="4" cellspacing="1">
<tr>
<td align="Right"><b>Your
Name: <span class="style1">*</span></b></td>
<td width="70%"><input type="TEXT" name="Name" style="width: 90%;">
</td>
</tr>
<tr>
<td align="Right"><b>E-mail
Address: <span class="style1">*</span></b></td>
<td><input type="TEXT" name="Name2" style="width: 90%;"></td>
</tr>
<tr>
<td align="Right"><b>Company:</b></td>
<td><input type="TEXT" name="Name3" style="width: 90%;"></td>
</tr>
<tr>
<td align="Right"><b>How
did you
find us?</b></td>
<td><input type="TEXT" name="Name4" style="width: 90%;"></td>
</tr>
<tr>
<td align="right"><b> Questions: <span class="style1">* </span></b></td>
<td> </td>
</tr>
<tr>
<td colspan="2" align="center"><textarea name="Question" rows="8" style="width: 90%;" wrap="VIRTUAL"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Submit" value="Submit Form">
<br>
</td>
</tr>
</table></td>
</tr>
</table>
</form>
I do not see where there is an action or mailto command how do i need to change this to make it email to a specific email address.
Looking at the <form> tag, the specified action is a Perl/CGI script - "/frms/contactmail.pl".
Looking at the hidden field named "SoupermailConf", I'd guess this is using the (VERY old) Perl/CGI script Soupermail.
I would recommend you update to something else (perhaps PHP based) if you (or your friend) can?
But, if you cant then according to the manual a hidden field named Email should do the trick.
<input type="hidden" name="Email" value="someone#your.website" />
After looking at the manul pages for the mailer and some examples for the config.txt file I needed to write to make it work.

HTML table td's not properly alignt

I'm having an weird problem. I've got an table with an input and some text. Only problem is that 1 row is shorter than the others.
I've moved the row down, but that also didn't work. I've also compared them with the other rows, but i can't find the difference.
An image says more than thousands words they say, so here's an screen pick from the live testing area:
Also, here's an JSFiddle of the relevant code.
And here's the code also:
<table class="radio">
<tbody>
<tr class="highlight">
<td>
<input type="radio" name="shipping_method" value="pickup.pickup0" id="shipping_method_pickup" />
</td>
<td colspann="3"><b>Hello</b>
</td>
<td style="text-align: right;">
<label for="pickup.pickup1">0,00</label>
</td>
</tr>
<tr class="highlight">
<td>
<input type="radio" name="shipping_method" value="weight.weight_5" id="weight.weight_5" checked="checked" />
</td>
<td colspan="3"><b>Verzending op gewicht</b>
</td>
<td style="text-align: right;">
<label for="weight.weight_5">2,20</label>
</td>
</tr>
<tr class="highlight">
<td>
<input type="radio" name="shipping_method" value="weighttat.weighttat_5" id="weighttat.weighttat_5" />
</td>
<td colspan="3"><b>Verzending via Post.nl</b>
</td>
<td style="text-align: right;">
<label for="weighttat.weighttat_5">6,75</label>
</td>
</tr>
<tr class="highlight">
<td>
<input type="radio" name="shipping_method" value="dhlpickup.dhlpickup_5" id="dhlpickup.dhlpickup_5" />
</td>
<td colspan="3"><b>Verzenden via DHL Afhaalservice ( Kies hier een DHL afhaalpunt </b>
</td>
<td style="text-align: right;">
<label for="dhlpickup.dhlpickup_5">4,50</label>
</td>
</tr>
</tbody>
</table>
You have a small spelling error
An extra n in colspann
Your first row's attribute colspan is wrong, change:
<td colspann="3"><b>Hello</b>
with:
<td colspan="3"><b>Hello</b>
Here is the fiddle updated: http://jsfiddle.net/D5fJa/1/
More info about colspan attribute: http://www.w3schools.com/tags/att_td_colspan.asp

I don't understand how to add a table inside a div

I have a very simple table and I would like to understand what is incorrect with using this . I have entered a styling of color: red; just to visualize where the will work correctly.
<table>
<tr>
<td colspan=2>
<div id="transportation_table" >
<tr>
<td align="right"> Flights (round trip) </td>
<td align="right"> <input type="text" size="10" id="flights" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
<tr>
<td align="right"> Oversized baggage fee (skis) </td>
<td align="right"> <input type="text" size="10" id="oversized" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
<tr>
<td align="right"> Taxi to airport, shuttle to resort (X2) </td>
<td align="right"> <input type="text" size="10" id="shuttle" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
</div>
</td>
</tr>
</table>
You are not declaring a table inside of your div. Tr elements belong inside of tables.
See: http://dev.w3.org/html5/markup/tr.html
That is likely the big error you are seeing.

table form is flickring in my page when dropdown changing in screen?

I designed the table like the below.
<table>
<tr>
<td colspan="1">Name</td>
<td colspan="2">
<span id="filterByApplication"><%= Html.DropDownList("filterByName", new SelectList(Model.Applications, "Id", "Name", Model.SelectedApplication.Name), "ALL", new { #class ="dropmenu" })%></span>
</td>
<td colspan="1">Role</td>
<td colspan="2" style="text-align: left">
<span id="filterByRole"><%= Html.DropDownList("filterByApplicationRole", new SelectList(Model.Roles, "Id", "Name", Model.SelectedRole.Name), "ALL", new { #class = "dropmenu" })%></span>
</td>
</tr>
<tr>
<td colspan="1">ID</td>
<td colspan="2">
<input id="id" type="text" value="" class="input" maxlength="8"/>
</td>
<td colspan="1">UserName</td>
<td colspan="2">
<input id="userName" type="text" value="" placeholder="UserName"/>
</td>
</tr>
<tr>
<td colspan="6">
<input id="btnsearch" type="button" value="Search" onclick="searchrequest()"/>
</td>
</tr>
</table>
Whenever click on name dropdown roles are loading in another dropdown at that time total screen i.t table controls all are aligning dynamically(flickering).please tell me how to avoid this ?
Remove all colspan attributes from your table, except last one. Change it to colspan="4" (instead of 6).
If you need to set column's width, you can use CSS styles. For example:
<tr>
<td style="width: 10%">
Id
</td>
<td style="width: 40%">
...
</td>
<td style="width: 10%">
Username
</td>
<td style="width: 40%">
...
</td>
</tr>