I have two radio buttons what I want is that when I select one of them then a drop down list should appear and when other one is marked then drop down list should disappear and instead of it a text message should be displayed.
The code for this part is as follows --
<head>
<script type="text/javascript">
function showhide(r){
var t=r.form['mode'];
if (r.value=='none') {
t.setAttribute('disabled','disabled');
document.getElementById('data').innerHTML="option not supported";
}
else {
t.removeAttribute('disabled');
}
t.style.display=r.value;
}
</script>
</head>
<body>
<table>
<tr>
<td width="400" height="40">Protocol</td>
<td>
<table width="100%" name="table">
<tr>
<td style="text-align:center">
<input type="radio" name="protocol" value="" id="opt1" align="left" checked="checked" onclick="showhide(this)" />opt1
</td>
<td style="text-align:center">
<input type="radio" name="protocol" value="none" id="opt2" align="right" onclick="showhide(this)"/>opt2
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="400" height="40">Mode of Operation</td>
<td id="data">
<select name="mode" id="mode">
<option value="opt1">TCP</option>
<option value="opt2">UDP</option>
</select>
</td>
</tr>
</table>
</bdoy>
Now the text message ("option not supported") is displayed once and then it doesn't disappear when switching between the radio buttons and so drop down list doesn't appear again.Where am i getting wrong?? If possible make correction in the code.
Please correct me..
<td name="data">
must be
<td id="data">
Related
i'm trying to get the texts (answers) next to the radiobuttons, to compare them with the correct answer.
Here is the html part:
<tbody>
<tr>
<td class="middle" width="15">
<input name="multiple_choice_result" value="0" id="0" type="radio">
</td>
<td class="middle">
<label for="0">FIRST ANSWER</label> // This text
</td>
</tr>
<tr>
<td class="middle" width="15">
<input name="multiple_choice_result" value="1" id="1" type="radio">
</td>
<td class="middle">
<label for="1">SECOND ANSWER</label> //This text
</td>
</tr>
<tr>
<td class="middle" width="15">
<input name="multiple_choice_result" value="2" id="2" type="radio">
</td>
<td class="middle">
<label for="2">THIRD ANSWER</label> //This text
</td>
</tr>
</tbody>
Use below Xpath:-
//label[contains(.,'ANSWER')]
Note:- Above xpath will return 3 elements so I am using List
List<WebElement> allanswer = driver.findElements(By.xpath("//label[contains(.,'ANSWER')]"));
for(WebElement answer: allanswer){
System.out.println(answer.getText());
}
If you want any particular answer then use:-
//label[contains(.,'FIRST ANSWER')]
Replace FIRST with SECOND OR THIRD according to your need
String answer =driver.findElement(By.xpath("//label[contains(.,'FIRST ANSWER')]")).getText();
Hope it will help you :)
I have some issues with my tables. It seems that the distance between the field name and text boxes are a bit big.
Are there any issues that I am making which causing this? How can I reduce the spaces? Check out the image below.
Here's my HTML:
<h5>Free Room of Cleaning & Carpet Audit</h5>
<table border="0" border-collapse:collapse; width:80% colspan="3">
<tbody>
<tr>
<td>Name: <span style="color:red;"><strong>*</strong></span></td>
<td>[text* client-name] </td>
</tr>
<tr>
<td>Phone: <span style="color:red;"><strong>*</strong></span></td>
<td> [text* phone] </td>
</tr>
<tr>
<td>Email: <span style="color:red;"><strong>*</strong></span></td>
<td>[email* email]</td>
</tr>
<tr>
<td>Best time to call: </td>
<td>[select best-time "Morning" "Afternoon" "After 5pm"] </td>
</tr>
<tr>
<td>Address:</td>
<td> [text address]</td>
</tr>
<tr>
<td>City</td>
<td>[text city]</td>
</tr>
<tr>
<td>State: </td>
<td>[text state]</td>
</tr>
<tr>
<td>Zip:</td>
<td>[text zip]</td>
</tr>
<tr><td colspan="2">Questions/Comments
[textarea questions id:questions]
</td></tr>
<tr><td colspan="2">[submit "Submit"]</td>
</tr>
</tbody>
</table>
Here is a JSFiddle demonstrating the issue: https://jsfiddle.net/sLv3e8f5/
The way the browser lays out tables by default, each column is sized to try to fit the width of its largest child element. In this case the largest child element is the table cell with the value "best time to call", which is causing the column to expand in width to accommodate that length.
You can give the first column of your table a fixed width to fix this, which will cause your longest line, "best time to call", to wrap.
In the following example I added an id to the table, then I targeted the first column of the table using CSS and gave it a width. I also gave your "Questions/Comments" form a width so it matches up.
Screenshot of the result:
Live Demo:
#thetable td:first-child {
width: 70px;
}
#qa {
width: 240px;
}
<h5>Free Room of Cleaning & Carpet Audit</h5>
<table id="thetable" border="0" border-collapse:collapse; width:80% colspan="3" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td>Name: <span style="color:red;"><strong>*</strong></span></td>
<td> <input type="text"> </td>
</tr>
<tr>
<td>Phone: <span style="color:red;"><strong>*</strong></span></td>
<td> <input type="text"> </td>
</tr>
<tr>
<td>Email: <span style="color:red;"><strong>*</strong></span></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Best time to call: </td>
<td><select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> </td>
</tr>
<tr>
<td>Address:</td>
<td> <input type="text"></td>
</tr>
<tr>
<td>City</td>
<td><input type="text"></td>
</tr>
<tr>
<td>State: </td>
<td>[text state]</td>
</tr>
<tr>
<td>Zip:</td>
<td><input type="text"></td>
</tr>
<tr><td colspan="2">Questions/Comments
<textarea id="qa" rows="4" cols="50">
</textarea>
</td></tr>
<tr><td colspan="2"><input type="submit"></td>
</tr>
</tbody>
</table>
JSFiddle Version: https://jsfiddle.net/sLv3e8f5/2/
Try adding cellspacing="0"and cellpadding="0" on your table,
Add a
margin-left:3px;
to the
<td>
For example,
<td style="margin-left:3px;">[text* client-name]</td>
Your spaces are being caused by the "Best time to call" cell. Wrap that cell to two lines to remove the excess spaces.
because table cell is aligned by "Best time to call: ".
how about use <ul><li>
Getting rid of tables opens you up to a world of possibilities with CSS Styling.
The following is a very quick and dirty example:
label {
/*float:left;*/
width: 8em;
display:block;
clear:both;
margin-top: 10px;
}
input, select {
float:left;
margin-top: 10px;
margin-left: 20px;
}
label.required::after {
content:'*';
color: #F00;
padding-left:0.25em;
}
.required+input, .required+select
{
background-color:#FCC;
}
<fieldset>
<legend>Free Room of Cleaning & Carpet Audit</legend>
<label class="required" for="name">Name:</label>
<input type="text" id="name" name="name" />
<label class="required" for="phone">Phone:</label>
<input type="text" id="phone" name="phone" />
<label class="required" for="email">Email:</label>
<input type="text" id="email" name="email" />
<label for="call">Best time to call:</label>
<select id="call" name="call">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<label for="Address">Address:</label>
<input type="text" id="Address" name="Address" />
</fieldset>
I am making the control shown in the image. It has a title bar and a set of controls inside it. What would be the best way to build it? It is part of a HTML5 webpage.
http://tinypic.com/r/25rpk4o/6
One way is to draw the title bar with canvas rect and then place all the controls under it. The collapsing can be done with javascript. But there must be a better way.
Another way I thought of was to make a table and have the first row as the title bar and add the sub-controls in the 2nd row. It seems to work fine but VS2012 keeps telling me that I can't nest button inside a tr.
This question or similar was asked on stackoverflow here...
What are my alternatives to modal or modeless dialogs to display information and contact forms?
Maybe the last thread on that post can give you some examples??
The direct link to the external examples is
http://websemantics.co.uk/resources/accessible_css3_modal_pop-ups/
Okay Sorry I misunderstood your initial meaning.
Well you can have a look at the below two files, one is a web page and the other is user control, the user control Copy and paste the code into two new files and see what you think?
I tried to recreate the control from your original pic that you uploaded and have used a TABLE tag, although you can probably cut down the html code by using DIVS instead.
File 1
<%# Page Language="VB" %>
<%# Register src="MyInlineWindow.ascx" tagname="MyInlineWindow" tagprefix="uc1" %>
<!-- HTML5 -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/vbscript">
Sub ShowInlineWindow()
dim el
set el = window.document.getElementById("MyInlineWindowCtrl")
window.document.getElementById("Result").innerhtml = "Nothing"
el.style.display = "block"
End Sub
Sub HideInlineWindow(YesNo)
dim el
set el = window.document.getElementById("MyInlineWindowCtrl")
window.document.getElementById("Result").innerhtml = YesNo
el.style.display = "none"
End Sub
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="Interact" onclick="ShowInlineWindow()" /><br />[<label id="Result">Nothing</label>]
<br /><br /><br /><br />
<uc1:MyInlineWindow ID="MyInlineWindow1" runat="server" />
</div>
</form>
</body>
</html>
File 2
<%# Control Language="VB" ClassName="MyInlineWindow" %>
<table id="MyInlineWindowCtrl" style="display: none; border: 1px solid #333333; width: 640px;">
<tr>
<td colspan="4" style="border-bottom-style: solid; border-bottom-width: 1px; background-color: #808080; color: #FFFFFF;">Window Title</td>
</tr><tr>
<td style="width: 25%;">
<table style="margin 8px: width: 100%;">
<tr>
<td>Label</td>
</tr><tr>
<td>
<select id="Select1" name="D1">
<option>Some drop down</option>
</select>
</td>
</tr><tr>
<td> </td>
</tr><tr>
<td>Label</td>
</tr><tr>
<td>
<select id="Select2" name="D2">
<option>Some drop down</option>
</select>
</td>
</tr>
</table>
</td>
<td style="width: 25%;">
<table style="margin 8px: width: 100%;">
<tr>
<td>Label</td>
</tr><tr>
<td><input id="Radio1" checked="true" name="R1" type="radio" value="V1" /> Label</td>
</tr><tr>
<td><input id="Radio2" checked="true" name="R2" type="radio" value="V1" /> Label</td>
</tr><tr>
<td><input id="Radio3" checked="true" name="R3" type="radio" value="V1" /> Label</td>
</tr><tr>
<td><input id="Radio4" checked="true" name="R4" type="radio" value="V1" /> Label</td>
</tr>
</table>
</td>
<td style="width: 25%;">
<table style="margin 8px: width: 100%;">
<tr>
<td colspan="2">Label</td>
</tr><tr>
<td>From</td>
<td>To</td>
</tr><tr>
<td>
<select id="Select3" name="D3">
<option>Date Picker</option>
</select>
</td>
<td>
<select id="Select4" name="D4">
<option>Date Picker</option>
</select>
</td>
</tr><tr>
<td> </td>
<td> </td>
</tr><tr>
<td><input id="Radio5" checked="true" name="R5" type="radio" value="V1" /> Label</td>
<td><input id="Radio6" checked="true" name="R6" type="radio" value="V1" /> Label</td>
</tr>
</table>
</td>
<td style="width: 25%;">
<table style="margin 8px: width: 100%;">
<tr>
<td> </td>
</tr><tr>
<td> </td>
</tr><tr>
<td> </td>
</tr><tr>
<td> </td>
</tr><tr>
<td style="text-align: center">
<input id="Button1" type="button" value="Cancel" onclick="HideInlineWindow('Cancel')" />
<input id="Button2" type="button" value="Okay" onclick="HideInlineWindow('Okay')" />
</td>
</tr>
</table>
</td>
</tr>
</table>
Maybe it is closer to what you want.
Also I have used VB script as thats what i know best, but it should not be too difficult to port/transpose it into Javascript.
This is short part of my code which display radio buttons.
<table width="100%">
<tr>
<td style="text-align:center">
<input type="radio" name="ah" value="" id="ah" align="left" checked="checked" />AH
</td>
<td style="text-align:center">
<input type="radio" name="esp" value="none" id="esp" align="right"/>ESP
</td>
</tr>
</table>
The problem is that the one radio button (AH) is by default checked as mentioned here and when i click on other radio button it also gets checked
but now both are checked how would I disable them.
I think it should happen automatically when I click on one radio button other button should be disabled automatically.
please correct me where am I wrong???
To group radio buttons together, they should share the same name:
<table width="100%">
<tr>
<td style="text-align:center">
<input type="radio" name="someName" value="AH" id="ah" align="left" checked="checked" />AH
</td>
<td style="text-align:center">
<input type="radio" name="someName" value="ESP" id="esp" align="right"/>ESP
</td>
</tr>
</table>
You need to give both radio buttons the same name attribute so the browser can recognize them as being in the same group.
They need to have the same name attribute.
try this it will help.... you have to give the same name to both radio button
<table width="100%">
<tr>
<td style="text-align:center">
<input type="radio" name="esp" value="" id="ah" align="left" checked="checked" />AH
</td>
<td style="text-align:center">
<input type="radio" name="esp" value="none" id="esp" align="right"/>ESP
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="38%" id="AutoNumber1" background="bg.jpg" height="177">
<tr>
<FORM onkeydown=highlight(event) onkeyup=highlight(event)
onclick=highlight(event) name=f
action=http://www.example.com/products/scripts/tpd.php method=GET> ( How to This Link hide )
<input type="hidden" name="key" value="tpd12"/>
<DIV align=center>
<td width="58%" height="3"> </td>
<td width="42%" height="3"> </td>
</tr>
<tr>
<td width="58%" height="15">
<p align="right"><b><font color="#C0C0C0"><br>
<br>
<br>
</font></b></td>
<td width="42%" height="15"><b><font color="#C0C0C0"><br>
<br>
</font></b></td>
</tr>
<tr>
<td width="58%" height="50">
<p align="right"><font color="#C0C0C0"><b>Phone #</b></font></td>
<td width="42%" height="50"><b><font color="#C0C0C0"> </font></b>
<input type="hidden" name="searchby" value="Phone"/>
<input type="hidden" name="city" value="xyz"/>
<input type="text" name="entry" size="12"></td>
</tr>
<tr>
<td width="58%" height="106"> </td>
<td width="42%" height="106" valign="top">
<input type="submit" value="Search" name="search"></td>
</tr>
</table>
Example Images
image code #1: www.koolfree.com/ImageUpload/uploads/1264733802.jpg
code preview result #2: www.koolfree.com/ImageUpload/uploads/1264722405.jpg
Plz help me how to set this script
thanks in advance
You need to add quotes around the parameter values.
Change
<FORM onkeydown=highlight(event) onkeyup=highlight(event) onclick=highlight(event) name=f action=http://www.example.com/products/scripts/tpd.php method=GET>
To
<FORM onkeydown="highlight(event)" onkeyup="highlight(event)" onclick"highlight(event)" name="f" action="http://www.example.com/products/scripts/tpd.php" method="GET">
It would be simple to use an HTML validator rather asking others for help.
You can use javascript (jquery comes to mind) to bind all kinds of events to almost any DOM element, and in my opinion it'll generate cleaner code to if you don't use the onclick, onkeydown, etc. calls in the HTML, but rather put all of that in a js file and just bind event handlers with functions to the FORM element.
Makes sense?