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.
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 have a html table which has input text fields and dropdown list's as columns.
I have two dropdown list columns which displays the same list of options.
I'm trying to remove the option selected in one dropdown and doesn't show
in the other dropdown present in the same row which is working when i select a option from Select Product1 dropdown list.
Issues I'm facing is when user first select the option from Select Product2 column dropdown list, it is not removing the option from Select Product1 column list for that row.
Another issue is, if user selected one option in the dropdown list that option is removed in the other drop down list, if user changes the selected option from first dropdown list the removed element should be shown/available in the other dropdown list but it is not showing the first selected option as it has been already removed from the list.
Any inputs on this two issues would be helpful, i tried to find the solution but no luck.
Sample Demo link
Code:
//populate dropdown with the valu`enter code here`e
function populateSelect() {
var ids = [{"pid":"laptop","des":"laptop"},{"pid":"Mobile","des":"Mobile"},{"pid":"IPAD mini.","des":"IPAD mini."},
{"pid":"toys","des":"toys"},{"pid":"electronics","des":"electronics"},{"pid":"desktop","des":"desktop"},{"pid":"ipad Air","des":"ipad Air"}]
var productDropdown1 = $(".product1");
var productDropdown2 = $(".product2");
$.each(ids, function(index,value) {
$("<option />").text(value.des).val(value.pid).appendTo(productDropdown1);
$("<option />").text(value.des).val(value.pid).appendTo(productDropdown2);
});
$('select').change(function() {
var $sel = $(this),
val = $sel.val();
$sel.parent().siblings().find('.product2 option[value=' + val + ']').remove()
});
}
$(document).ready(function(){
populateSelect();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="orderTable" border="1">
<tr>
<th>Or.ID</th>
<th>Select Product1</th>
<th>Description</th>
<th>Select Product2</th>
<th>Comments</th>
</tr>
<tr>
<td><input type="text" name="orderNum" value="" id="orderNum1"></td>
<td>
<select class="product1" id="prod1">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="description" value="">
</td>
<td>
<select class="product2" id="product2">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
</tr>
<tr>
<td><input type="text" name="orderNum" value="" id="orderNum2"></td>
<td>
<select class="product1" id="prod2">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="description" value="">
</td>
<td>
<select class="product2" >
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
</tr>
<tr>
<td><input type="text" name="orderNum" value="" id="orderNum3"></td>
<td>
<select class="product1" id="prod3">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="description" value="">
</td>
<td>
<select class="product2" >
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
</tr>
<tr>
<td><input type="text" name="orderNum" value="" id="orderNum4"></td>
<td>
<select class="product1" id="prod4">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="description" value="">
</td>
<td>
<select class="product2" >
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
</tr>
</table>
Every option in dropdown must have unique ID. When you select option "house" from dropdown menu "menu1", then remove/hide same option(option with same ID) from "menu2".
Another way to do it is that every option has onClick that will call some function.
Example:
<option value="" onclick="hideOption("menu2-option1")" id="menu1-option1">Option 1</option>
<!-- JS CODE -->
function hideOption(hideOptionID)
{
document.getElementById(hideOptionID).style.display = "none";
}
It is better to disable an option than remove it from the ui.
try to change
$('select').change(function() {
var $sel = $(this),
val = $sel.val();
$sel.parent().siblings().find('.product2 option[value=' + val + ']').remove()
});
To
$('select').change(function() {
var $sel = $(this),
val = $sel.val();
//$('select').not($sel).find('option').removeAttr('disabled');
$sel.parent().siblings().not($sel).find('option').removeAttr('disabled');
$sel.parent().siblings().find('select option[value=' + val + ']').attr('disabled',true);
});
DEMO HERE
hope this helps.
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 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 have a bunch on elements with the same name that i am trying to remove at the same time with an onchange function.
Here is the javascript:
<script type="text/javascript">
function removeoldAccounts() {
var e = document.getElementById("account_table")
var accounts = document.getElementsByName("extraaccounts");
e.removeChildren(accounts);
}
</script>
(Not even sure if removeChildren is a real command) And my element that im giving the onchange action to:
<select id="piname" name="pi_name" onChange="removeoldAccounts" />
And the elements im trying to have removed:
<tbody id="account_table">
<tr>
<td>Account Number<span>*</span>:</td>
<td id="accounts">
<select id="accountnum" name="account_number">
<option value="5636745946254">5636745946254</option>
<option value="23164847322">23164847322</option>
</select>
</td>
<td>
<input type="hidden" id="theValue3" value="81">
<input type="button" value="Add More" onclick="addaccount()">
</td>
</tr>
<tr id="80" name="extraaccount">
<td>
<select id="80" name="account_number">
<option value="5636745946254">5636745946254</option>
<option value="23164847322">23164847322</option>
</select>
</td>
<td>
<input type="text" size="20" name="account_comment80">
</td>
<td>
<input type="button" onclick="removeaccount(80)" value="remove">
</td>
</tr>
<tr id="81" name="extraaccount">
<td>
<select id="81" name="account_number">
<option value="5636745946254">5636745946254</option>
<option value="23164847322">23164847322</option>
</select>
</td>
<td>
<input type="text" size="20" name="account_comment81">
</td>
<td>
<input type="button" onclick="removeaccount(81)" value="remove">
</td>
</tr>
</tbody>
Sorry if the html is a bit sloppy but basically, a tbody with a bunch of tds that have the same name ( extraaccount)
<script type="text/javascript">
function removeoldAccounts() {
var accounts = document.getElementsByName("extraaccounts");
var account;
var parent;
for (account in accounts) {
parent = account.parentNode;
parent.removeChild(account);
}
}
</script>
and...
<select id="piname" name="pi_name" onChange="removeoldAccounts();" />
Something like this:
if ( e.hasChildNodes() )
{
for(var i=0; i < e.childNodes.length; i++)
{
if(e.childNodes[i].nodeName == "extraaccounts") {
e.removeChild(e.childNodes[i]);
}
}
}
$('[name="extraaccounts"]').remove();
or if you want to change smthing before deleting then
$('[name="extraaccounts"]').each(function(index,value){
//do smthing
$(value).remove
});