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>
Related
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
i want to hide the table rows when i select the dropdown option
In first table drop down is there.options are
1.current state
2.future state
If i select current state according to that the in 2nd and 3rd table rows should be show & hide.. for that i am using id for that tr..as current as well as future.
< script >
$(document).ready(function() {
$("#curfut").on("change",
function() {
$("#future").hide();
$("#current").show();
});
}); < /script>
<table>
<tr>
<td>
<select id="curfut">
<option value="select"></option>
<option value="Current">current</option>
<option value="Future">future</option>
</select>
</td>
</tr>
</table>
<table>
<div id="current"
<tr>
<td>
<INPUT TYPE=RADIO NAME="REDITBlue" VALUE="REDITBlueY" required />Yes
<INPUT TYPE=RADIO NAME="REDITBlue" VALUE="REDITBlueN" />No
</td>
</tr>
<div id="future">
<tr>
<td>
<INPUT TYPE=RADIO NAME="implementationplan" VALUE="implementationplanY" required />Yes
<INPUT TYPE=RADIO NAME="implementationplan" VALUE="implementationplanN" />No
</td>
</tr>
</div>
</tr>
</table>
<table>
<div id="current>
<tr>
<td>What is the potential Cognizant BI identified from this VSM?($MM)</td>
<td><input type=" text " name="clientBI " id="clientBI " required> </td>
</tr>
</div>
You need make some correction in your html and javascript.
i have prepare Demo. please check JSfiddle
Check out below code you might want something like this:
Note : initially both option will be enable. you can make changes according to your requirement.
Html :
<table>
<tr>
<td>
<select id="curfut">
<option value="select"></option>
<option value="Current">current</option>
<option value="Future">future</option>
</select>
</td>
</tr>
</table>
<table id="current">
<tr>
<td>
<INPUT TYPE=RADIO NAME="REDITBlue" VALUE="REDITBlueY" required />Yes
<INPUT TYPE=RADIO NAME="REDITBlue" VALUE="REDITBlueN" />No
</td>
</tr>
<tr>
<td>
<INPUT TYPE=RADIO NAME="implementationplan" VALUE="implementationplanY" required />Yes
<INPUT TYPE=RADIO NAME="implementationplan" VALUE="implementationplanN" />No
</td>
</tr>
</table>
<table id="future">
<tr>
<td>What is the potential Cognizant BI identified from this VSM?($MM)</td>
<td><input type="text" name="clientBI " id="clientBI " required> </td>
</tr>
</table>
Javascript :
$(document).ready(function() {
$("#curfut").on("change",
function() {
if($(this).val()=="Current")
{
$("#future").hide();
$("#current").show();
}
else if($(this).val()=="Future")
{
$("#future").show();
$("#current").hide();
}
});
});
You should get value of dropdown and show/hide according to the selection. If Current is selected than show div with id current and if Future option is selected than show div with id future
$(document).ready(function() {
$("#curfut").on("change",
function() {
if($(this).val()=="Current")
{
$("#future").hide();
$("#current").show();
}
else if($(this).val()=="Future")
{
$("#future").show();
$("#current").hide();
}
});
});
Id be unique in Html you used same id 'current' many times please be correct it down.
And your code be like for your context
$("#curfut").on("change",function(){
var getId = $(this).find('options:selected').text();
$('#current, #future').hide();
$('#' + getId).show()
});
I have an issue with my code. I hope anybody here can help me to fix it. I have problem in remove value from text on change event of select input .
Here is my js code:
$(document).ready(function() {
$('.select').change(function() {
var check = $(this).closest('tr').find("input[type='checkbox']").attr('id');
$('#' + check + '').prop("checked", false);
var txt = $(this).closest('tr').find("input[type='text']").attr('id');
$('#' + txt + '').val("");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<th>SELECT TYPE</th>
<th>TAKE IT</th>
<th>YOUR CHOOSEN</th>
</tr>
<tr>
<td>
<select class="select" name="select1">
<option>--CHOOSE--</option>
<option value="Cars">Cars</option>
<option value="Bike">Bike</option>
</select>
</td>
<td>
<input type="checkbox" name="check1" />
</td>
<td>
<input type="text" name="input1" />
</td>
</tr>
<tr>
<td>
<select class="select" name="select2">
<option>--CHOOSE--</option>
<option value="Cars">Cars</option>
<option value="Bike">Bike</option>
</select>
</td>
<td>
<input type="checkbox" name="check2" />
</td>
<td>
<input type="text" name="input2" />
</td>
</tr>
<tr>
<td>
<select class="select" name="select3">
<option>--CHOOSE--</option>
<option value="Cars">Cars</option>
<option value="Bike">Bike</option>
</select>
</td>
<td>
<input type="checkbox" name="check3" />
</td>
<td>
<input type="text" name="input3" />
</td>
</tr>
</table>
Note: I am loading data from database and showing the result into text and check-box automatically checked according to customer choice. When the customer want to edit data so, they will change the select input and the text and check-box should be clear. I only can remove the checked check-box but can't clear the text. Anybody please help. I really appreciate for any help.
I think you are having a problem to get how the script is working.
var check = $(this).closest('tr').find("input[type='checkbox']").attr('id');
var txt = $(this).closest('tr').find("input[type='text']").attr('id');
this two code look for the id of input checkbox and the input text.
As I see there is no id defined for these two element. So those variable will have nothing in them (undefined) hence the code will not work.
One solve is:
You can add id to those field. Like
<tr>
<td><select class="select" name="select1">
<option>--CHOOSE--</option><option value="Cars">Cars</option><option value="Bike">Bike</option>
</select> </td>
<td><input type="checkbox" name="check1" id="check1" /></td>
<td><input type="text" name="input1" id="input1" /></td>
</tr>
<tr>
<td>
<select class="select" name="select2"><option>--CHOOSE--</option><option value="Cars">Cars</option><option value="Bike">Bike</option>
</select></td>
<td><input type="checkbox" name="check2" id="check2" /></td>
<td><input type="text" name="input2" id="input2" /></td>
Another Solve:
You can modify you script like this.
$(document).ready(function(){
$('.select').change(function(){
var check = $(this).closest('tr').find("input[type='checkbox']");
$(check).prop("checked",false);
var txt = $(this).closest('tr').find("input[type='text']");
$(txt).val("");
});
});
$(document).ready(function(){
$('.select').change(function(){
$(this).parent().parent().find("input[type='text']").val(""); $(this).parent().parent().find("input[type='checkbox']").prop("checked",false);
});});
Please try this friend i will work fine
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
});
Other than following somebody else example and trying to suit it to my needs I know zero javascript. That's why this is such a hard fight for me else I'd just do it in PHP but PHP can't interact with elements in the document. =(
I recreated my problem in a jsfiddle --> http://jsfiddle.net/Handler/baz19g8y/
All my select and input fields have the same class name. And then based up on which radio button is selected the all the fields become editable.
Here's the HTML:
<form action="" method='post'>
<table class="mgmtchg">
<tr>
<th>Management Role</th>
<th>Name</th>
<th>Email address</th>
<th>Phone</th>
<th> Update</th>
<th> Delete</th>
</tr>
<tr>
<td class="mgmttd">
<select name="mgmt-role-0" class="mgmt-0 form-field role-drop" disabled>
<option value="mgmt0" selected>Head Coach</option>
<option value="mgmt1">Assistance Coach</option>
<option value="mgmt2">Team Manager</option>
</select>
</td>
<td class="mgmttd">
<input type="hidden" name="mgmt-id-0" value="25" />
<input type="hidden" name="team-id-0" value="11" />
<input type="text" name="mgmt-name-0" class="mgmt-0 form-field mgmt-name-field" disabled value="Ed Frederickson" />
</td>
<td class="mgmttd">
<input type="text" name="email-0" class="mgmt-0 form-field mgmt-email-field" disabled value="tealfred#sbcglobal.net" />
</td>
<td class="mgmttd">
<input type="text" name="phone-0" class="mgmt-0 form-field mgmt-phone-field" disabled value="317-987-3095" />
</td>
<td class="mgmttd">
<div class="chgradio">
<input type="radio" name="utype0" value="upd-0" id="mgmtupdate-0" class="css-radiobox">
<label for="mgmtupdate-0" class="css-label radGroup2"></label>
</div>
</td>
<td class="mgmttd">
<div class="chgradio">
<input type="radio" name="utype0" value="del-0" id="mgmtdelete-0" class="css-radiobox">
<label for="mgmtdelete-0" class="css-label radGroup2"></label>
</div>
</td>
</tr>
</table>
</form>
And this is the javascript I'm attempting to use which of course can be found in the jsfiddle link in the beginning of this post:
document.getElementById('mgmtupdate-0').onchange = displayTextBox;
document.getElementById('mgmtdelete-0').onchange = displayTextBox;
var textBox = document.getElementsByClassName('mgmt-0');
function displayTextBox(evt) {
console.log(evt.target.value)
if (evt.target.value == "upd-0") {
textBox.disabled = false;
} else {
textBox.disabled = true;
}
}
I'd like to learn javascript but it seems so intimidating and overly wordy!
I hope somebody can help!
Thanks so much in advance!
getElementsByClassName returns a collection. textBox.disabled is not a function of the collection. you'd rather loop through the collection:
textboxes = document.getElementsByClassName('mgmt-0');
for(var i=0; i< textboxes.length; i++) {
textboxes[i].removeAttribute("disabled")
}