I have designed a form according to our given assignment. But the following error message is shown:
App Table Design is not correct:
NoSuchElementError: no such element: Unable to locate element: {"method":"xpath","selector":"//body/table/tbody/tr[1]/td[1]"}
The assignment is as follows (Design a Web page for customers for renting the page).
<!DOCTYPE html>
<html>
<body>
<h2><span style="background-color:#000080; color:#ff6600">Rent Toys</span></h2>
<form>
<table>
<tbody>
<tr>
<td><label for="tname">Toy name:</label></td>
<td>
<select id="tname" name="tname">
<option value="Bicycle">Bicycle</option>
<option value="Train">Train</option>
<option value="Doll">Doll</option>
<option value="Teddy Bear">Teddy Bear</option>
<option value="Kite">5</option>
<option value="Airplane">Airplane</option>
<option value="Model Car">Model Car</option>
<option value="Art Farm">Art Farm</option>
<option value=" Lego Mind storms"> Lego Mind storms</option>
<option value="Speak and Spell">Speak and Spell</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="ttype">Customer Name:</label>
</td>
<td>
<input type="text" id="ttype" name="ttype" pattern="[A-Za-z]{5,}" onblur="blurFunction()">
</td>
</tr>
<tr>
<td>
<label for="ttype">Rent Start Date</label>
</td>
<td>
<input type="date" id="Rdate" name="Rdate" >
</td>
</tr>
<tr>
<td>
<label for="minage">Rent Tenure</label>
</td>
<td>
<input type="text" id="RTdate" name="RTdate" pattern="[0-9]">
</td>
</tr>
<tr>
<td>
<label for="maxage">Number of Toys available</label></td>
<td>
<input type="text" id="RTdate" name="RTdate" pattern="[0-9]">
</td>
</tr>
<tr>
<td>
<label for="price">Enter Number of Toys</label>
</td>
<td>
<input type="text" id="quant" name="quant" >
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit Query" onclick="calculate()">
</td>
</tr>
</tbody>
</table>
</form>
<script>
// No focus = Changes the background color of input to red
function blurFunction() {
document.getElementById("ttype").style.background = "red";
}
function calculate(){
var costperday=100;
var qty=document.getElementById('quant').value;
var rtdate=document.getElementById('RTdate').value;
var show=qty*rtdate*costperday;
confirm(show);
confirm("Thank you for order Mr/Ms/Mrs:"+document.getElementById('ttype').value);
}
</script>
</body>
</html>
Change your code so you pass the DOM element to the function
HTML
<input type="text" id="ttype" name="ttype" pattern="[A-Za-z]{5,}" onblur="blurFunction(this)">
Javascript
function blurFunction(e) {
e.style.background = "red";
}
This looks like error from Selenium(probably). It is looking for xpath: //body/table/tbody/tr[1]/td[1]
but in your code table is wrapped inside of form element so xpath should look something like this: //body/form/table/tbody/tr[1]/td[1]
Change xpath or change your page structure in order to match required path
use theadas a table heading.<label for="tname">Toy name:</label> all headings add in thead
<thead>
<tr>
<th scope="col"><label for="tname">Toy name:</label></th>
</tr>
Well after a lot of research I found out the solution (might not be general i.e for every one) that removal of tag makes the code acceptable for the compiler..... Thank You
Related
I have a dynamic table where the select option has multiple attributes. What i want to do is to get these multiple attributes populated to adjusent cells in the same row next to the select element.The select element is in the first cell in the dynamic row.
<!DOCTYPE html>
<html>
<td>
<select name="savings_account_number[]" id="savings_account_number" class="form-control">
<option value="610005" pro_id="6" available_bal="4500" cap_gl="10101" account_number="610005">610005</option>
<option value="510006" pro_id="5" available_bal="8900" cap_gl="10102" account_number="510006">510006</option>
</select>
</td>
<td>
<input name="pro_id[]" id="pro_id"/>
</td>
<td>
<input name="available_bal[]" id="pro_id"/>
</td>
<td>
<input name="cap_gl[]" id="cap_gl"/>
</td>
<td>
<input name="account_number[]" id="account_number"/>
</td>
</html>
I want this to happen for the onchange activity
If correctly understood, this is a possible solution using jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<select name="savings_account_number[]" class="form-control">
<option value="610005" pro_id="6" available_bal="4500" cap_gl="10101" account_number="610005">610005</option>
<option value="510006" pro_id="5" available_bal="8900" cap_gl="10102" account_number="510006">510006</option>
</select>
</td>
<td>
<input name="pro_id[]" id="pro_id"/>
</td>
<td>
<input name="available_bal[]" id="available_bal"/>
</td>
<td>
<input name="cap_gl[]" id="cap_gl"/>
</td>
<td>
<input name="account_number[]" id="account_number"/>
</td>
</tr>
<tr>
<td>
<select name="savings_account_number[]" class="form-control">
<option value="1245" pro_id="5" available_bal="454" cap_gl="3659" account_number="65987">1245</option>
<option value="6598" pro_id="43" available_bal="3215" cap_gl="64545" account_number="645444">6598</option>
</select>
</td>
<td>
<input name="pro_id[]" id="pro_id"/>
</td>
<td>
<input name="available_bal[]" id="available_bal"/>
</td>
<td>
<input name="cap_gl[]" id="cap_gl"/>
</td>
<td>
<input name="account_number[]" id="account_number"/>
</td>
</tr>
<tbody>
</table>
<script>
$(document).ready(function(){
$("table select").change(function(){
var select = $(this);
var option = select.find("option[value=" + select.val() + "]");
var tr = select.parents("tr:first");
if(option.length > 0){
tr.find("#pro_id").val(option.attr("pro_id"));
tr.find("#available_bal").val(option.attr("available_bal"));
tr.find("#cap_gl").val(option.attr("cap_gl"));
tr.find("#account_number").val(option.attr("account_number"));
}
else{
tr.find("#pro_id").val("");
tr.find("#available_bal").val("");
tr.find("#cap_gl").val("");
tr.find("#account_number").val("");
}
}).change();
});
</script>
Note that I've corrected the second input's id, which had the same identifier as the first one.
Also, the select change eventhandler is raised explicetly to load the current value on load.
I dynamically created a textbox on the event of click on a certain button and now I want to retrieve the text from the textbox to display on another php form page.
Following is my html code where I assign the name "c1", "c2" and "c3" to the dynamically created textboxes.
<script>
$(document).ready(function(){
$("#t11, #t12").click(function(){
var div = $("<div />");
div.html(GenerateTextbox("","c1"));
$("#TextBoxContainer").append(div);
var div = $("<div />");
div.html(GenerateTextbox("","c2"));
$("#TextBoxContainer").append(div);
var div = $("<div />");
div.html(GenerateTextbox("","c3"));
$("#TextBoxContainer").append(div);
});
});
function GenerateTextbox(value,name1) {
console.log(name1);
return '<input name = "'+ name1 + '" type="text" value = "' + value + '" /> ';}
</script>
My php code in another document:
<td>
<input type="<?php echo $_POST["t1"];?>"> <?php echo $_POST["c1"];?>
<input type="<?php echo $_POST["t1"];?>"><?php echo $_POST["c2"];?>
<input type="<?php echo $_POST["t1"];?>"><?php echo $_POST["c3"];?>
</td>
When the second php page is directed to, it say that c1, c2 and c3 are undefined indices. Everything else works fine but I cannot get this information from one page to the other.
Please help!
Full form html:
<table align="center">
<form action="output.php" method="post">
<tr>
<td>
Background color of page:<br/>
</td>
<td>
<input id="ex" type="color" name="bgcol" id="nbg">
</td>
</tr>
<tr>
<td>
Name of form:
</td>
<td>
<input type="text" name="titleform" id="titleform">
</td>
</tr>
<tr>
<td>
Font size:
</td>
<td>
<input type="text" name="fontsize" id="fontsz">
</td>
</tr>
<tr>
<td>
Font:
</td>
<td>
<input type="text" name="fontt" id="nbg">
</td>
</tr>
<tr>
<td>
Font color:
</td>
<td>
<input id="ex"type="color" name="fontt" id="nbg">
</td>
</tr>
<tr>
<td>
Background color of form:<br/>
</td>
<td>
<input id="ex" type="color" name="bgcolor" id="nbg" value="#FFFFFF">
</td>
</tr>
<tr>
<td>
Input #1:
</td>
<td>
<input type="text" name="input1" id="nbg">
</td>
<td>
Type:
</td>
<td>
<select name="t1" id="t1">
<option>text</option>
<option id="t11">radio</option>
<option id="t12">checkbox</option>
</select>
</td>
<td>
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
</td>
<tr>
<td>
Input #2:
</td>
<td>
<input type="text" name="input2" id="nbg">
</td>
<td>
Type:
</td>
<td>
<select name="t2">
<option>text</option>
<option id="t21">radio</option>
<option id="t22">checkbox</option>
</select>
</td>
<td>
<div id="TextBoxContainer2">
<!--Textboxes will be added here -->
</div>
</td>
</tr>
<tr>
<td>
Input #3:
</td>
<td>
<input type="text" name="input3" id="nbg">
</td>
<td>
Type:
</td>
<td>
<select name="t2">
<option>text</option>
<option id="t31">radio</option>
<option id="t32">checkbox</option>
</select>
</td>
<td>
<div id="TextBoxContainer3">
<!--Textboxes will be added here -->
</div>
</td>
</tr>
<tr>
<td>
Input #4:
</td>
<td>
<input type="text" name="input4" id="nbg">
</td>
<td>
Type:
</td>
<td>
<select name="t4">
<option>text</option>
<option id="t41">radio</option>
<option id="t42">checkbox</option>
</select>
</td>
<td>
<div id="TextBoxContainer4">
<!--Textboxes will be added here -->
</div>
</td>
</tr>
<tr>
<td>
Input #5:
</td>
<td>
<input type="text" name="input5" id="nbg">
</td>
<td>
Type:
</td>
<td>
<select name="t5">
<option>text</option>
<option id="t51">radio</option>
<option id="t52">checkbox</option>
</select>
</td>
<td>
<div id="TextBoxContainer5">
<!--Textboxes will be added here -->
</div>
</td>
</tr>
<tr>
<td>
<button type="submit" name="Create_form" id="form2" value="submit" onclick="return check()"> >Submit
</button>
</td>
</tr>
</form>
</table>
You need to attach your div to the DOM, and particularly as a child element of your form. Otherwise, the <input>s never get POSTed.
$("#myForm").append(div);
Also, since you used jQuery to manipulate your div and form in the first place, I would advise you continue with jQuery to build the inner inputs, rather than just provide inner HTML in your GenerateTextbox function.
I would like to think that if you do something in the first id = "benodigheden" that there is something specific then a second rule is for id = "benodigheden" I also couldn't find anything on the internet. I think you need to have java but here is my knowledge still too small for.
I hope somebody can help me.
This is my HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="benodigheden1">Benodigheden:</label>
</td>
<td>
<input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="ingrediënten1">Ingrediënten:</label>
</td>
<td>
<input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" />
</td>
</tr>
<tr>
<td>
<label for="stappenplan">Stappenplanm:</label>
</td>
<td>
<textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
If I understand correctly you want an extra line (rule?) to appear once you enter text in it, and that this should happen for those inputs that have a sequence number in their id.
For this I suggest you include jQuery and add a script that detects input changes, and adds a new input if needed, with the next available sequence number:
$(document).on('keyup change input', 'input, textarea', function() {
if (!$(this).val().replace(/\s/g, '').length) {
// no text entered, so don't add line
return;
}
var id = $(this).attr('id');
// Extract name and linenumber from id
var res = id.split(/(\d+$)/);
if (res.length < 2) {
// No line number, so don't add line
return;
}
var newId = res[0] + (parseInt(res[1]) + 1);
if ($('#' + newId).length) {
// Not the last line, so don't add line
return;
}
// Add a line, and make it non-mandatory
$(this).clone()
.attr('id', newId).removeAttr('required')
.val('')
.insertAfter(this)
.before($('<br>'));
});
Although the above can be done in pure javascript it is much more cumbersome, and harder to deal with cross-browser issues.
You can see it work in this fiddle.
I kind of stumbled into an obstacle here. For a form I have the following inputs:
<table>
<tr>
<td>Lening 1</td>
<td>
<input type="text" name="lening-Maatschappij" size="40" placeholder="Maatschappij">
</td>
<td>
<input type="text" name="lening-Restantschuld" size="40" placeholder="Restantschuld">
</td>
</tr>
<tr>
<td>
<input type="text" name="lening-Maandbedrag" size="40" placeholder="Maandbedrag">
</td>
<td>
<input type="text" name="lening-Jaarrente" size="40" placeholder="Jaarrente">
</td>
<td>
<select name="lening-inlossen" id="lening-inlossen">
<option disabled="">Inlossen</option>
<option value="Ja">Ja</option>
<option value="Nee">Nee</option>
</select>
</td>
</tr>
</table>
What I want to do is make sure that if one of these input fields loses focus (I assume focusOut will work here), but contains text, these rows are created again, but with Lening 2 as the first label. So it should end up like this:
<table>
<tr>
<td>Lening 1</td>
<td>
<input type="text" name="lening-Maatschappij" size="40" placeholder="Maatschappij">
</td>
<td>
<input type="text" name="lening-Restantschuld" size="40" placeholder="Restantschuld">
</td>
</tr>
<tr>
<td>
<input type="text" name="lening-Maandbedrag" size="40" placeholder="Maandbedrag">
</td>
<td>
<input type="text" name="lening-Jaarrente" size="40" placeholder="Jaarrente">
</td>
<td>
<select name="lening-inlossen" id="lening-inlossen">
<option disabled="">Inlossen</option>
<option value="Ja">Ja</option>
<option value="Nee">Nee</option>
</select>
</td>
</tr>
<tr>
<td>Lening 2</td>
<td>
<input type="text" name="lening-Maatschappij" size="40" placeholder="Maatschappij">
</td>
<td>
<input type="text" name="lening-Restantschuld" size="40" placeholder="Restantschuld">
</td>
</tr>
<tr>
<td>
<input type="text" name="lening-Maandbedrag" size="40" placeholder="Maandbedrag">
</td>
<td>
<input type="text" name="lening-Jaarrente" size="40" placeholder="Jaarrente">
</td>
<td>
<select name="lening-inlossen" id="lening-inlossen">
<option disabled="">Inlossen</option>
<option value="Ja">Ja</option>
<option value="Nee">Nee</option>
</select>
</td>
</tr>
</table>
I just need to make sure that if I focus on the rows from Lening 1 I don't end up having a third row made, cause my focusOut event will be called again.
The question is:
How can I make sure Lening 2 is only generated once when I type in the input fields of Lening 1, and how can I make sure that Lening 3 is generated once when I type in the input fields of Lening 2 and so on?
I hope I formatted my question correctly. It's had to summarize this into one sentence. I'm really not only asking this question, but also asking how to ask (Even after reading the how-to on asking I'm not sure if I'm doing this right)
Focusout() will be called repetitively.
You can do one thing when user starts typing into first row's first text box, the you can generate the row 2nd, when user starts typing into second rows first text box, row 3rd will appear and so on.
You need onkeyup event for that.
$("#lening-Maatschappij_1").keyup(function(){
// generated the row Lening 2
});
$("#lening-Maatschappij_2").keyup(function(){
// generated the row Lening 3
});
I am trying to:
1. Hide and display fields based on SELECT a field
2. Populate a field based on check boxes
However neither is working. Both were based on working solutions from others. The only difference I can think of is that I am using TABLE to format them. But I don't know if that makes a difference.
The HTML code:
<form method="POST">
<table cellspacing="2" cellpadding="2">
<tr>
<td valign="top" /><b>Business:</b>
<td><select id="business" name="business" >
<option value="1">Sell</option>
<option value="2">Buy</option>
<option value="3">Both</option>
<option value="4">Trade</option>
<option value="5">Freight</option>
<option value="6">Customs</option>
</select>
</td>
</tr>
<div id="freight">
<tr>
<td><b>Service Type:</b></td>
<td><select name="type">
<option value="1">Air Cargo</option>
<option value="2">Couriers</option>
<option value="3">Freight Forwarder</option>
</select>
</td>
</tr>
<tr>
<td><b>Tollfree Number:</b></td>
<td><input type="text" name="tollfree" />
</td>
</tr>
</div>
<tr>
<td valign="top"><b>Your Email Address:</b></td>
<td><input type="text" name="email" /></td>
</tr>
<div id="customs">
<tr>
<td /><b>Services:</b>
<td>
<input type="checkbox" value="ACA - Air Cargo Agent" />ACA - Air Cargo Agent<br />
<input type="checkbox" value="AFF - Air Freight Forwarder" />AFF - Air Freight Forwarder<br />
</td>
</tr>
</div>
<tr>
<td><b>Products/Services:</b></td>
<td><input type="text" name="products" /></td>
</tr>
<div id="brand">
<tr>
<td><b>Brand Names:</b></td>
<td><input type="text" name="brands" /></td>
</tr>
</div>
</table>
</form>
The jQuery code for doing these:
$(':checkbox').click(function() {
$('input[name=products]').val(
$(':checkbox:checked').map(function() {
return $(this).val();
}).get().join(',')
);
});
$(document).ready(function () {
toggleFields();
$("#business").change(function () {
toggleFields();
});
});
function toggleFields() {
if ($("#business").val() == 1 || ($("#business").val() == 2 || ($("#business").val() == 3)
$("#brand").show();
$("#freight").hide();
$("#customs").hide();
else
if ($("#business").val() == 5)
$("#brand").hide();
$("#freight").show();
$("#customs").show();
else
if ($("#business").val() == 6)
$("#brand").hide();
$("#freight").hide();
$("#customs").show();
else
$("#brand").hide();
$("#freight").hide();
$("#customs").hide();
}
For example when you select "Sell", "Buy" or "Both" (in Business), the SERVICE TYPE and TOLLFREE NUMBER fields are supposed to be hidden, as well as SERVICES field. They are wrapped in DIV id "freight" and "customs" and supposed to be invisible. But they are not. All fields are shown regardless.
Second problem is if you select Customs (in Business) the Services field which is composed of checkboxes is supposed to be shown and when click on the check boxes, the value in these checkboxes is supposed to populate the Products/Services field. It is not doing that either.
Here is the jsfiddle for this code:
http://jsfiddle.net/5SArB/571/
which is based on the working version of both
jsfiddle.net/5SArB/ (toggle fields based on form values)
and
jsfiddle.net/dTrVt/ (populate input field based on checkbox id values)
I am pulling my hair on this and just can't understand why it is not working. Any help is appreciated. Thank you in advance.
There are several issues with the code, the first of which is that the javascript is poorly formed.
You can't write if statements without curly braces if they take more than one line
The first if statement in toggleFields is missing some parentheses
Once you get that fixed, the other problem concerns the formation of your html table. Don't wrap the table rows with divs, since that's improper html table structure. Instead, you might take out the divs, and assign the "id"s to the table rows instead. Essentially what you would be doing then is showing/hiding table rows rather than showing/hiding divs containing the table rows.
The resulting HTML would be then:
<tr id="freight">
...
</tr>
Rather than:
<div id="freight">
<tr>
...
</tr>
</div>
Here's a fiddle with the proposed changes.
Hope that helps!
Edit: In case somebody comes across this in the future, the problem was a simple issue with load order -- the document wasn't ready when the click event was bound. The solution is as simple as moving the click event inside the document.ready callback.
As already mentioned, you have syntax errors and you can't have div as a child of table.
In the if...else if statements you are missing the block definitions...
Also assign the ids to the tr instead of nesting it in a div.
Also the code can be simplified as
$(':checkbox').click(function () {
$('input[name=products]').val($(':checkbox:checked').map(function () {
return $(this).val();
}).get().join(','));
});
jQuery(function ($) {
$("#business").change(toggleFields).change();
});
function toggleFields() {
var el = $('#business option:selected').data('el'),
els = el ? '#'+el.split(/,\s*/).join(', #'):'';
var $els =els? $(els).show():$();
$('.bussiness-field').not($els).hide()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Toggle fields based on form values</h1>
<form method="POST">
<table cellspacing="2" cellpadding="2">
<tr>
<td valign="top" /><b>Business:</b>
<td>
<select id="business" name="business">
<option value="1" data-el="brand">Sell</option>
<option value="2" data-el="brand">Buy</option>
<option value="3" data-el="brand">Both</option>
<option value="4">Trade</option>
<option value="5" data-el="freight, customs">Freight</option>
<option value="6" data-el="customs">Customs</option>
</select>
</td>
</tr>
<tr id="freight" class="bussiness-field">
<td><b>Service Type:</b>
</td>
<td>
<select name="type">
<option value="1">Air Cargo</option>
<option value="2">Couriers</option>
<option value="3">Freight Forwarder</option>
</select>
</td>
</tr>
<tr>
<td><b>Tollfree Number:</b>
</td>
<td>
<input type="text" name="tollfree" />
</td>
</tr>
<tr>
<td valign="top"><b>Your Email Address:</b>
</td>
<td>
<input type="text" name="email" />
</td>
</tr>
<tr id="customs" class="bussiness-field">
<td /><b>Services:</b>
<td>
<input type="checkbox" value="ACA - Air Cargo Agent" />ACA - Air Cargo Agent
<br />
<input type="checkbox" value="AFF - Air Freight Forwarder" />AFF - Air Freight Forwarder
<br />
</td>
</tr>
<tr>
<td><b>Products/Services:</b>
</td>
<td>
<input type="text" name="products" size="40" />
</td>
</tr>
<tr id="brand" class="bussiness-field">
<td><b>Brand Names:</b>
</td>
<td>
<input type="text" name="brands" />
</td>
</tr>
</table>
</form>