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
});
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 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 am new bee to JavaScript. I have a form which is not validated with alert button. I am having a form which is to be submitted without errors. If I submit the forms with the empty fields, an alert message should be popped up.
The following is my code:
function validate_Form() {
alert('hi how');
exit;
var tokenNo = document.forms["myForm"]["txt1"].tokenNo;
if (tokenNo == null || tokenNo == "") {
alert("Enter The Token No");
return false;
} else {
document.write("pola");
}
}
<table>
<form name="Sec_guard_form" onsubmit="validate_Form()">
<tr>
<td>Token No</td>
<td>
<input type="text" value="" name="token_no" />
</td>
</tr>
<tr>
<td>Other Property</td>
<td>
<input type="text" value="" name="other_prop" />
</td>
</tr>
<tr>
<td>Bike Number</td>
<td>
<input type="text" value="" name="bike_no" />
</td>
</tr>
<tr>
<td>bike name</td>
<td>
<input type="text" value="" name="bike_nm" />
</td>
</tr>
<tr>
<td>bike model</td>
<td>
<select option="bike model">
<option value="Activa 3G">Activa 3G</option>
<option value="shine">shine</option>
<option value="unicon">unicon</option>
<option value="yuga">yuga</option>
<option value="neo">neo</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit" />
</td>
<td>
<input type="submit" value="cancel" />
</td>
</tr>
</form>
</table>
The above is my code, for i am using the mozilla firefox as my browser. Is that an issue. My function inside the script is not even called. what am i wrong here...
You can change your javascript like this :
function validate_Form() {
var form = document.querySelector("form");
var tokenNo = form.elements.token_no.value;
if (tokenNo == null || tokenNo == "") {
alert("Enter The Token No");
return false;
} else {
document.write("pola");
}
return false;
}
and your html like this:
<form name="Sec_guard_form" onsubmit="return validate_Form()">
exit; doesn't mean anything in javascript. You have to use return. So if you return before the function does anything then it is not useful at all!
The syntax you used for selecting form element and getting its value was wrong according to me so I corrected the syntax...
Also, you might be wondering why to use return validate_form() in HTML and return false in the function. It is used just for stopping the page to refresh/redirect before the entire function gets executed!
Try this code, it worked for me... I don't know what hi how was for so I eliminated it.
You are not calling function on your submit button Please use this to call function first.
<input type="submit" value="submit" onclick="validate_Form()" />
change
<form name="Sec_guard_form" onsubmit="validate_Form()">
to
<form name="Sec_guard_form" onsubmit="return validate_Form()">
Complete html code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table>
<form id="Sec_guard_form" onsubmit="return validate_Form();" method="post">
<tr>
<td>Token No</td>
<td>
<input type="text" value="" name="token_no" />
</td>
</tr>
<tr>
<td>Other Property</td>
<td>
<input type="text" value="" name="other_prop" />
</td>
</tr>
<tr>
<td>Bike Number</td>
<td>
<input type="text" value="" name="bike_no" />
</td>
</tr>
<tr>
<td>bike name</td>
<td>
<input type="text" value="" name="bike_nm" />
</td>
</tr>
<tr>
<td>bike model</td>
<td>
<select option="bike model">
<option value="Activa 3G">Activa 3G</option>
<option value="shine">shine</option>
<option value="unicon">unicon</option>
<option value="yuga">yuga</option>
<option value="neo">neo</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit" />
</td>
<td>
<input type="submit" value="cancel" />
</td>
</tr>
</form>
</table>
<script>
function validate_Form()
{ alert('hi how');
var tokenNo = document.getElementById("Sec_guard_form")["token_no"].value;
if (tokenNo == null || tokenNo == "")
{
alert("Enter The Token No");
return false;
}
else
{
document.write("pola");
}
}
</script>
</body>
</html>
This is working fine
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 want that in newly created all options of select box to be present and I want to do it javascript. But I cant figure out how to do when there are too many options
<table id="newtable">
<tr>
<td>
<input name="name" type="text" id="name"/>
</td>
<td>
<select name="gender" id="gender">
<option>Male</option>
<option>Female</option>
</select>
</td>
<td>
<input name="add_button" type="button" id="add_button" value="Add"/>
</td>
<tr>
</table>
var itemCount = 0;
$(document).ready(function() {
var objs = [];
var temp_objs = [];
$("#add_button").click(function() {
var html = "";
var obj = {
"name" : $("#name").val(),
"gender" : $("#gender").val(),
}
$("#name").val('');
$("#gender").val(''),
objs.push(obj);
itemCount++;
html = "<tr>" +
"<td><INPUT type='text' name='txt1[]' value='" + obj['name'] + "'/></td>" +
"<td><select><option>" + obj['gender'] + "</select></option></td></tr>";
$("#newtable").append(html);
});
});
Just make it as simple. Use below Code. It will solve your issue.
<script type="text/javascript">
$(document).ready(function(){
$( "#add_button" ).click(function() {
var newVal=$("#name").val();
var s= document.getElementById('gender');
s.options[s.options.length]= new Option(newVal);
});
});
</script>
And your html will be as below:
<table id="newtable">
<tr>
<td>
<input name="name" type="text" id="name"/>
</td>
<td>
<select name="gender" id="gender">
<option>Male</option>
<option>Female</option>
</select>
</td>
<td>
<input name="add_button" type="button" id="add_button" value="Add"/>
</td>
<tr>
</table>
I believe clone() will be the best option for your example. You can copy the behavior of the button as well by using clone(true, true) (sets the options withDataAndEvents and deepWithDataAndEvents). Run the code below to check:
$(document).ready(function() {
$(".add_button").click(function() {
var currentRow = $(this).parents("tr");
var nr = currentRow.clone(true, true);
nr.find(".name").val('');
currentRow.after(nr); //instead of `$("#newtable").append(nr);`: it places the new row after the clicked row
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="newtable">
<tr>
<td>
<input name="name" type="text" class="name" />
</td>
<td>
<select name="gender" class="gender">
<option>Male</option>
<option>Female</option>
</select>
</td>
<td>
<input name="add_button" type="button" class="add_button" value="Add" />
</td>
</tr>
</table>
From your code, I needed to add a slash in the last <tr> to close it and also change the ids to classes (since there are going to be a lot of them).
Hope it helps!