I have a dataTable that each row continue same class and same event.
I have this
<td>
<select name="produits" onchange="loadFourAjax(this)" class="produits">
<option value="0" selected="selected">
<c:forEach var="i" items="${produits}">
<option value="<c:out value="${i.id}" />">
<c:out value="${i.designation}" />
</option>
</c:forEach>
</select>
</td>
<td><select name="fournisseurs" class="fournisseurs"
onchange="loadRefFourAjax(this)">
</select>
</td>
<td class="ref">
</td>
<td class="prix">
</td>
<td>
<input name="qte" class="qte" onkeyup="calculTotalHt(this)" type="text"/>
</td>
<td id="total"></td>
My question how i can know that the query come from a current row of table, because i one to use it to select class prix and qte to calculate prix total of each row.
You are already getting the reference to the current element using this
That is
loadFourAjax(this) or loadRefFourAjax(this)
You can access its parent row node (tr) using
function loadFourAjax(thisObj)
{
//other code
var parentTr = thisObj.parentNode.parentNode;
var prix = parentTr.querySelector(".prix").innerHTML;
}
use querySelector to get the prix value
Please move for loop from <td> level to <tr> level and append id (${i.id} from your code) to fournisseurs name.
Related
I am programming a quiz maker input form which is responsive to the users desired number of questions. These quizzes will be grouped by the students year and class, set up through a responsive menu read from a text file. This text file will be added to by the user by creating 'Topics' in the quizzes, and grouping them as such. I want to create a button at the bottom of the form which copies the input fields for 'question', 'answer1', 'answer2' and 'answer3'.
<html>
<head>
<title>Quiz Form</title>
<link rel=“stylesheet” href=“TRYstyle.css”>
</head>
<body>
<h3>Quiz form</h3>
<table>
<form onSubmit=“WriteToFile(this.txt)>
<tr>
<td>Year</td>
<td>
<select name="Year" id="schoolyear">
<option value="1">7</option>
<option value="2">8</option>
<option value="3">9</option>
<option value="4">10</option>
<option value="5">11</option>
<option value="6">12</option>
<option value="7">13</option>
</td>
</tr>
<tr>
<td>Class</td>
<td>
<select name=“group” id=“group”>
<option value="1">H</option>
<option value="2">E</option>
<option value="3">A</option>
<option value="4">R</option>
<option value="5">T</option>
</td>
</tr>
<tr>
<td>Topic</td>
<td><input type=“text” placeholder=“Topic” name=“topic” id=“topic” maxlength=“200”/></td>
</tr>
<tr>
<td>Title</td>
<td><input type=“text” placeholder=“Title” name=“title” id=“title” maxlength=“200”/></td>
</tr>
<tr>
<td>Question</td>
<td><input type=“text” placeholder=“Question” name=“question” id=“question” maxlength=“200”/></td>
</tr>
<tr>
<td>Answer</td>
<td><input type=“text” placeholder=“Answer” name=“answer1” id=“answer1” maxlength=“200”/></td>
</tr>
<tr>
<td>Answer</td>
<td><input type=“text” placeholder=“Answer” name=“answer2” id=“answer2” maxlength=“200”/></td>
</tr>
<tr>
<td>Answer</td>
<td><input type=“text” placeholder=“Answer” name=“answer3” id=“answer3” maxlength=“200”/></td>
</tr>
<td colspan="2">
<input type="submit" value="Submit">
</td>
</form>
</table>
<script>
function WriteToFile(passForm) {
set fso = CreateObject("Scripting.FileSystemObject");
set s = fso.CreateTextFile(“using theseee/this.txt", True);
var year = document.getElementById('year');
var group = document.getElementById('group');
var topic = document.getElementById('topic');
var title = document.getElementById('title');
var question = document.getElementById('question');
var option1 = document.getElementById('answer1');
var option2 = document.getElementById('answer2');
var option3 = document.getElementById('answer3');
s.writeline("Title: " + title);
s.writeline("Question: " + question);
s.writeline("Option1: " + answer1);
s.writeline(“Option2: " + answer2);
s.writeline("Option3: " + answer3);
s.writeline("-----------------------------");
s.Close();
}
</script>
</body>
</html>
Also, to store the various 'topics', would I need to create a text file dedicated to these considering the menu is responsive to this? Or can i read the first line, lets say, from each text file relevant and store them in the menu? What is the best way to go about doing this?
I am sorry if this seems very low level, but I am trying very hard to get the hang of all of this as I am new to it all.
Hi I fetching some data from database and constructing the table.
foreach($data_array->LINEDETAILS as $data){
if(empty($data->CREDITEDAMOUNT)){
$data->CREDITEDAMOUNT=0;
}
$linetotal='';
$linetotal = $data->LINEAMOUNT + $data->TAXAMOUNT;
$column='<td>
<input onclick="sum_value(\''.trim($data->LINEAMOUNT).'-'.$data->TAXAMOUNT.'\',this.checked)" type="checkbox" name="checkdata'.$i.'" id="checkdata'.$i.'" value="'.$data->CUSTOMERTRXLINEID.'"style="position: inherit;" checked />
</td>
<td>'.$data->DESCRIPTION.'</td>
<td>'.$data->ORIGINALLINEAMOUNT.'</td>
<td>'.$data->CREDITEDAMOUNT.'</td><td>'.$data->LINEAMOUNT.'<input type="text" value="'.$data->LINEAMOUNT.'" hidden="true"></td>
<td>'.$data->TAXAMOUNT.'</td><td>'.$linetotal.'</td>
<td>
<select>
<option>--</option>
<option>%</option>
<option>Area</option>
<option>Period In Months</option>
</select>
</td>
<td><input type="text"></td>
<td><input type="text"></td>';
$row .= '<tr>'.$column.'</tr>';
$grandtotal = $grandtotal + $data->LINEAMOUNT + $data->TAXAMOUNT;
$i++;
}
This code returns one to many lines of data.
Each like has a dropdown of 3 value based upon which calculations will be done. If I select as % and Credit value as 80%, the approved line amount should be calculated onblur 80% of Eligible line amount.
I tried to set id's for each elements and do the math using JavaScript it won't calculate and give the result. it gives an error since ID of an element should be unique and since the elements are looped the ID also gets looped. Please help.
Give a try for : "onChange" of the dropdown value and then fetch the % value and calculate in your javascript code and display on the filed that is required, and mark the field as read-only if you want it "not" to be changed.
You can dynamically add id for each element as in the loop.. abd after that fetch all the records till the max value or iteration (say i)
You can add a class on each input field. For eg.
jQuery('.credit_val').change(function(){
var eligible = parseFloat(jQuery(this).parents('tr').find('.eligible_line').text());
var credit = parseFloat(jQuery(this).val());
jQuery(this).parents('tr').find('.approve_amount').val(eligible*credit/100);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div class="eligible_line">1000</div>
</td>
<td>
<input class = "credit_val">
</td>
<td>
<input class = "approve_amount">
</td>
</tr>
<tr>
<td>
<div class="eligible_line">2000</div>
</td>
<td>
<input class = "credit_val">
</td>
<td>
<input class = "approve_amount">
</td>
</tr>
</table>
I'm using jQuery 1.12.4 to set get the value of the closest preceding element using class selector. I'm unable to select the closest element.
$(function() {
$("[class='quickSelect']").blur(function() {
var obj = $(this);
alert($(this).parent());
// alert($(this).closest("[class~='endDateField']"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td align="right">
Start Date
</td>
<td>
<input type="text" name="debitStartDate" value="" class="dateField startDateField">
</td>
<td align="right">
End Date
</td>
<td>
<input type="text" name="debitEndDate" value="" class="dateField endDateField">
</td>
<td class="debitApportioner" style="align:right">
Quick Select
</td>
<td class="debitApportioner" colspan="2">
<select class="quickSelect">
<option> SELECT </option>
<option> JANUARY </option>
<option> FEBRUARY </option>
<option> MARCH </option>
</select>
<input class="quickSelect" type="text" />
</td>
</tr>
</table>
Try this:
$(".quickSelect").blur(function() {
var obj = $(this);
obj.closest('tr').find('.endDateField'); // will find the endDateField in the current row
});
closest() only traverses up the trees ancestors and stops at the first element that matches the selector so the above says find the closest ancestor tr to the input then find any endDateField inside that tr
I have a table like this-
<table>
<tr>
<td>
<label id="lbl1" value="1">Label1</label>
<td>
<td>
Some data
</td>
<td>
Some data
</td>
</tr>
<tr>
<td>
<label id="lbl2" value="1">Label1</label>
<td>
<td>
Some data
</td>
<td>
Some data
</td>
</tr>
<tr>
<td>
<label id="lbl3" value="1">Label1</label>
<td>
<td>
Some data
</td>
<td>
Some data
</td>
</tr>
</table>
My problem is that I want to alert the value of label present in the second row's first column. Assume that I don't know label id means I know its pattern like lbl1,lbl2 or lbl3.. but not exactly what it is in the second row.
If you are okay to use jQuery use this fiddle
var label = $('table tr:eq(1) td:eq(0)').find("label").attr("value")
alert(label);
You can use something like next
var labels = document.getElementsByTagName("label");
for (var i=0; i<labels.length; i++)
if (labels[i].id && labels[i].id.indexOf("lbl") == 0){
//you have found the label in the first row
}
You Can get label value by class name
$("label[class=lblclass]").each(function() {var result= $(this).val(); });
(OR)
You can get the Particular Label Value by ID
function getlabel_value(){var result=$('#lbl1').val();}
I am both adding and removing table rows with jQuery. I can add rows easily, but am having trouble removing ones that were created.
You can view the page in action here: http://freshbaby.com/v20/wic/request_quote.cfm, with the relevant code pasted below.
HTML
<table style="width:600px;" id="product-list" summary="Lists details about products users wish to purchase">
<thead valign="top" align="left">
<tr>
<th>Products</th>
<th>Language</th>
<th>Quantity</th>
<th></th>
</tr>
</thead>
<tbody valign="top" align="left">
<tr>
<td>
<cfselect query="getProductListing" name="product" size="1" display="name" value="name" queryPosition="below">
<option value=""></option>
</cfselect>
</td>
<td>
<select name="language" size="1">
<option value="English">English</option>
<option value="Spanish">Spanish</option>
</select>
</td>
<td>
<cfinput name="quantity" required="yes" message="Enter your desired quantity" size="10" maxlength="3" mask="999">
</td>
<td valign="bottom">Add Another Product</td>
</tr>
</tbody>
</table>
JavaScript:
<script>
$(function() {
var i = 1;
$(".addrow").click(function() {
$("table#product-list tbody > tr:first").clone().find("input").each(function() {
$(this).attr({
'id': function(_, id) { return id + i },
'value': ''
});
}).end().find("a.addrow").removeClass('addrow').addClass('removerow').text('< Remove This Product')
.end().appendTo("table#product-list tbody");
i++;
return false;
});
$("a.removerow").click(function() {
//This should traverse up to the parent TR
$(this).parent().parent().remove();
return false;
});
});
</script>
When I click the link to remove the row that said link is contained in, nothing happens. No script error, so it has to be logic.
Try this instead
$("#product-list").on('click','a.removerow',function(e) {
e.preventDefault();
//This should traverse up to the parent TR
$(this).closest('tr').remove();
return false;
});
This will ensure that newly created elements can be removed. When you use the $("a.removerow").click(.. it only affects the elements in existence (none) and not the ones that will be dynamically created.