is there a way to transform all inputs field to divs? or span or anything.
i have a table like:
<div id="calc">
<table>
<tr>
<td>Principal:</td>
<td><input value="100.00$" /></td>
</tr>
<tr>
<td>start date:</td>
<td><input value="02/02/2002" /></td>
</tr>
<tr>
<td>end date:</td>
<td><input value="02/02/2002" /></td>
</tr>
</table>
</div>
and i want copy this source to a light box without inputs.. like:
<table>
<tr>
<td>Principal:</td>
<td><div>100.00$</div></td>
</tr>
<tr>
<td>start date:</td>
<td><div>02/02/2002</div></td>
</tr>
<tr>
<td>end date:</td>
<td><div>02/02/2002</div></td>
</tr>
</table>
i wonder is there a way to convert all those inputs to divs may be via using .replace or something else ?
thanks
Try this:
$('#calc').clone().appendTo('#lightbox');
$('#lightbox input').replaceWith(function() {
return $('<div>' + $(this).val() + '</div>');
});
jsfiddle - http://jsfiddle.net/infernalbadger/c9Rub/2/
Updated to include copying the content to another div with the ID lightbox.
Assuming that you are not using any libs:
Here http://www.w3schools.com/jsref/dom_obj_all.asp, you can find some useful functions to do this.
By getting the input elements that you need, something like this:
var inputs = document.getElementsByTagName('input');
You can replace them with this:
//pseudo
for each input element
var parentNode = input.parentNode;
parentNode.removeChild(input);
parentNode.innerHTML('<div>' + input.value + '</div>');
In the link that I put above, you can find some functions either to replace child or either to findParent, remove the current child and then append your div by yourself.
If you are using jquery you can do the following.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#btnChange").click(function () {
$("#calc :input").each(function () {
this.outerHTML = "<div>" + this.value+ "</div>";
});
});
});
</script>
<div id="calc">
<table>
<tr>
<td>Principal:</td>
<td><input value="100.00$" /></td>
</tr>
<tr>
<td>start date:</td>
<td><input value="02/02/2002" /></td>
</tr>
<tr>
<td>end date:</td>
<td><input value="02/02/2002" /></td>
</tr>
</table>
</div>
<input type="button" id="btnChange" value="Change" />
Related
I have this piece of code where values are coming from php
<table class="table datatable-basic">
<tr>
<th>-<th>
<th>title<th>
</tr>
//forloop
<tr>
<td><input class="chk" type="checkbox" name="uid[]" id="uid" value="<?php echo $id; ?>"></td>
</tr>
<tr>
<td><?php echo "$title" ?></td>
</tr>
</table>
<button id="go">GO</buton>
So in my jQuery, I want to alert the value of the check box which is id, when I click the button 'go' and when that check box is checked. How can I do this?
You can use this selector input.chk:checked and the function $.toArray to get the selected elements as array and then execute the function map to get the values.
Finally, the function join will create an string with the values from the array separated by comma.
$('#go').on('click', function() {
var selectedValues = $('input.chk:checked').toArray().map(function(chk) {
return $(chk).val();
});
console.log(selectedValues.join());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table datatable-basic">
<tr>
<th>title</th>
</tr>
<tr>
<td><input class="chk" type="checkbox" name="uid[]" id="uid" value="111"></td>
</tr>
<tr>
<td><input class="chk" type="checkbox" name="uid[]" id="uid" value="222"></td>
</tr>
<tr>
<td>Title</td>
</tr>
</table>
<button id="go">GO</buton>
There's a problem with your setup - they all have an ID of "uid". IDs must be unique.
But since they have a class you can do this:
var selectedValues = [];
$('input.chk:checked').each(function() {
selectedValues.push($(this).val());
});
The selectedValues array will contain the values of all of the selected checkboxes.
You could then join these together into a string separated by commas with join.
selectedValues.join(',');
To demonstrate the output I have omitted the PHP part from HTML. You can try the following code:
$('#go').click(function(){
var val = '';
$('.chk:checked').each(function(){
val += ', ' + $(this).val();
});
alert(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table datatable-basic">
<tr>
<th>-<th>
<th>title<th>
</tr>
<tr>
<td><input class="chk" type="checkbox" name="uid[]" id="uid" value="111"></td>
</tr>
<tr>
<td><input class="chk" type="checkbox" name="uid[]" id="uid" value="222"></td>
</tr>
<tr>
<td>Title</td>
</tr>
</table>
<button id="go">GO</buton>
I have a single column html table with 20 rows, containing strings (used as tags):
<table id="table_of_tags">
<tr>
<td id="c_01" onclick="Pass_Content_Of_Cell(_param)">Tree</td>
</tr>
<tr>
<td id="c_02" onclick="Pass_Content_Of_Cell(_param)">Flower</td>
</tr>
....
</table>
The function Pass_Content_of_Cell() must pass the contents of the cells clicked and concatenate the tags in a single string of tags: "Flower;Tree;" (WHAT it does is not relevant).
The user can click randomly on any tag and in any order he likes.
Question: What exactly should I use for _param ? I tried this.value and this.text and didn't get anything useful.
Try this
onclick="Pass_Content_Of_Cell(this.innerText)"
or if you want the markup,
onclick="Pass_Content_Of_Cell(this.innerHTML)"
Try this.innerText
<table id="table_of_tags">
<tr><td id="c_01" onclick="Pass_Content_Of_Cell(this.innerText)">Tree</td><tr>
<tr><td id="c_02" onclick="Pass_Content_Of_Cell(this.innerText)">Flower</td><tr>
</table>
If your are using a loop to generate the markup, why you simply didn't do something like:
<tr><td onClick="doSomething('$param')">$param</td></tr>
I cannot imagine the list is hardcoded...
<script type="text/javascript">
function save(val1)
{
alert("you have saved Employee "+document.getElementById(val1).innerText);
}
function del(val1)
{
alert("you have deleted Employee "+document.getElementById(val1).innerText);
}
</script>
<table border="1">
<tr>
<th>EmployeeID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Option</th>
</tr>
<tr>
<td>1590</td>
<td id="c1">Venkatesh</td>
<td>venki#w3s.com</td>
<td>9943243433</td>
<td><input type="checkbox" name="chk" id="chk"></td>
<td><input type="button" value="Delete" id="dlt1" name="dlt1" onclick="del('c1');"><input type="button" value="Save" id="sv1" name="sv1" onclick="save('c1');"></td>
</tr>
<tr>
<td>1591</td>
<td id="c2">amarnath</td>
<td>amar#w3s.com</td>
<td>9943113433</td>
<td><input type="checkbox" name="chk" id="chk"></td>
<td><input type="button" value="Delete" id="dlt1" name="dlt1" onclick="del('c2');"><input type="button" value="Save" id="sv1" name="sv1" onclick="save('c2');"></td>
</tr>
<tr>
<td>1601</td>
<td id="c3">naveen</td>
<td>navs#w3s.com</td>
<td>9943113433</td>
<td><input type="checkbox" name="chk" id="chk"></td>
<td><input type="button" value="Delete" id="dlt1" name="dlt1" onclick="del('c3');"><input type="button" value="Save" id="sv1" name="sv1" onclick="save('c3');"></td>
</tr>
</table>
I have used this website a lot for research etc and find it extremely useful.
I have been developing a little bit of code that will get a list of input id names and then add there values together using javascript/jquery.
This is what I have so far - it might be well off the mark as I am still a novice.
So far the code gets the names of the inputs fine. It also does the calculation fine but when I put the array into the "var fieldnames" the calculation stops working?
When I copy the array out (after putting it into an input) and pasting it into the "var fieldnames" it works fine.
The issue seems to be that the array doesnt pass over to the "var fieldnames" correctly??
Here is the code from the page - it puts the array into the inputs at the bottom for investigation purposes only but the calculation doesnt work unless you put the input names in manually!
Any help would be much appreciated.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head><body>
<script type="text/javascript" language="javascript">
function getTotal(oForm)
{
var arrayOfIDs = $('.myClass').map(function() { return this.id; }).get();
var test = (arrayOfIDs.length ? "'" + arrayOfIDs.join("','") + "'" : "");
document.getElementById("sum").value = test;
var field, i = 0, total = 0, els = oForm.elements;
var fieldnames = [test];
document.getElementById("sum1").value = fieldnames;
for (i; i < fieldnames.length; ++i)
{
field = els[fieldnames[i]];
if (field.value != '' && isNaN(field.value))
{
alert('Please enter a valid number here.')
field.focus();
field.select();
return '';
}
else total += Number(field.value);
}
return ' ' + total;
}
</script>
<div id="listing">
<form>
<table>
<td>8065020</td>
<td>2012-04-10</td>
<td>household</td>
<td><input class="myClass" id="pay47" type="text" name="pay47" value="38.45"/></td>
</tr>
<tr>
<td>8065021</td>
<td>2012-04-10</td>
<td>household</td>
<td><input class="myClass" id="pay48" type="text" name="pay48" value="37.4"/></td>
</tr>
<tr>
<td>8065022</td>
<td>2012-04-10</td>
<td>household</td>
<td><input class="myClass" id="pay49" type="text" name="pay49" value="375"/></td>
</tr>
<tr>
<td>8065014</td>
<td>2012-04-04</td>
<td>household</td>
<td><input type="text" class="myClass" id="pay50" name="pay50" value="06"/></td>
</tr>
<tr>
<td>8065015</td>
<td>2012-04-04</td>
<td>motorprotect</td>
<td><input type="text" class="myClass" id="pay51" name="pay51" value="01"/></td>
</tr>
<tr>
<td>8065011</td>
<td>2012-03-06</td>
<td>household</td>
<td><input type="text" class="myClass" id="pay52" name="pay52" value="55"/></td>
</tr>
<tr>
<td>8065012</td>
<td>2012-03-06</td>
<td>household</td>
<td><input type="text" class="myClass" id="pay53" name="pay53" value="56"/></td>
</tr>
<tr>
<td>1</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay54" name="pay54" value="56"/></td>
</tr>
<tr>
<td>2</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay55" name="pay55" value="52"/></td>
</tr>
<tr>
<td>3</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay56" name="pay56" value="53"/></td>
</tr>
<tr>
<td>4</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay57" name="pay57" value="55"/></td>
</tr>
<tr>
<td>8065001</td>
<td/>
<td>landlord</td>
<td><input type="text" class="myClass" id="pay58" name="pay58" value="5"/></td>
</tr>
<tr>
<td>8065002</td>
<td/>
<td>landlord-basic</td>
<td><input type="text" class="myClass" id="pay59" name="pay59" value="59"/></td>
</tr>
<tr>
<td>8065003</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay60" name="pay60" value="5"/></td>
</tr>
<tr>
<td>8065004</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay61" name="pay61" value="5"/></td>
</tr>
<tr>
<td>8065005</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay62" name="pay62" value="5"/></td>
</tr>
<tr>
<td>8065006</td>
<td/>
<td>landlord-basic</td>
<td><input type="text" class="myClass" id="pay63" name="pay63" value="64"/></td>
</tr>
<tr>
<td>8065008</td>
<td/>
<td>household</td>
<td><input type="text" class="myClass" id="pay64" name="pay64" value="5" /></td>
</tr>
<tr>
<td>8065010</td>
<td/>
<td>business-basic</td>
<td><input type="text" class="myClass" id="pay65" name="pay65" value="10" /></td>
</tr>
</table>
<input id="total" type="text" name="total" value="" readonly="readonly" />
<input type="button" value="Get Total" onclick="total.value=getTotal(this.form)" />
<br /><br />
<input name="totalpay" id="sum" type="text" />sum<br />
<input name="totalpay" id="sum1" type="text" />sum1
</form>
</div>
</body>
</html>
1- Replace the line
var test = (arrayOfIDs.length ? "'" + arrayOfIDs.join("','") + "'" : "");
By
var test = (arrayOfIDs.length ? arrayOfIDs.join(",") : "");
2- Replace
var fieldnames = [test];
By
var fieldnames = test.split(",");
3- Replace
field = els[fieldnames[i]];
By
field = document.getElementById(fieldnames[i]);
What i did here is only correct you code to resolve your problem, but i am covinced that you can do this in a more easiest way.
If I understood your question correctly and you just want to add up your values, while provideing basic validity check, your code is way to complicated. Frameworks like jQuery provide you with means to do this much simpler.
Instead of looping through all input elements, getting their id's and then looping through them again, just do it once.
var getTotal (oForm) {
var sum = 0;
// loop through all inputs with class "myClass" inside oForm
$("input.myClass", $(oForm)).each(function (index, value) {
// add up all values that are non empty and numeric
if (value !== "" && !isNaN(value)) {
// parse the value
sum += parseFloat(value, 10);
} else {
// show an alert, focus the input and return early from $.fn.each
alert("Please enter a valid number here!");
$(this).focus();
return false;
}
});
// set the value of
$("sum").val(sum);
}
This was written from the top of my head but should work fine.
I have several tables which looks like these below:
<table id="table1">
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Item 1</a></td>
<td><input type="text" name="sum1" id="sum1" /></td>
</tr>
<tr>
<td>Item 2</a></td>
<td><input type="text" name="sum2" id="sum2" /></td>
</tr>
<tr>
<td>Item 3</td>
<td><input type="text" name="sum3" id="sum3" /></td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>$total </td>
</tr>
</table>
<table id="table2">
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Item 1</a></td>
<td><input type="text" name="sum1" id="sum1" /></td>
</tr>
<tr>
<td>Item 2</a></td>
<td><input type="text" name="sum2" id="sum2" /></td>
</tr>
<tr>
<td>Item 3</td>
<td><input type="text" name="sum3" id="sum3" /></td>
</tr>
<tr>
<td>Item 4</td>
<td><input type="text" name="sum4" id="sum4" /></td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>$total</td>
</tr>
</table>
Does anybody know if there is a possibility to sum item prices for each input (seperately for table1, table2, etc..)
And at the end print sum of items from all items?
You'll need a dom manipulator like jQuery or simply javascript. I'd give the fields a class to make it even easier--say, "sum". Then you can grab all the children "sum"s from the parent tables. Parse their value to an int and add. Not too bad.
Here's a working JS fiddle example
Better way is not to call different elements with similar IDs, it's invalid way. But even if so - you can perform calculations for every table simply working with inputs in this table.
Algorithm:
You run loop for all <table> tags.
For every <table> tag you find all <input>s (no matter what IDs they have);
Calculate total sum for all inputs for current table.
You can do this with JavaScript but better for you is jQuery.
BUT: don't call HTML DOM elements with similar IDs. It's wrong!!!
this should be pretty easy with jquery, assuming you can add a class name called "line-item" or something to each input and a class name "total" to the cell which should display calculated sum, you can do
function calculateSum(tableId){
var sum = 0;
$(tableId + ' .line-item').each(function(){
var value = parseFloat($(this).val().trim());
if(value){
sum += parseFloat($(this).val());
}
});
$(tableId + ' .total').html(sum);
}
and invoke this function with the id of the table for which you want.
If you cannot add a class name, this don't get tuffer even a single bit, but instead of .line-item try to put just input, it should do the trick in this scenario. Instead of .total you can write tr:last-child td:nth-child(2)
UPDATE: added "parseInt" to avoid string concatenation
I have a table with a few rows... I want to be able to select a row and click on modify and I should be able to make all the cells of that row editable...
How would I make a cell editable in Javascript? And is it better to use Jquery?
There's no need to do your own code, a plugin for jQuery for this very purpose exists already. Try jEditable, it can do exactly what you need.
Their demo page has some nice examples:
http://www.appelsiini.net/projects/jeditable/default.html
Setcontent-editable property of each element you want to edit.
http://html5demos.com/contenteditable
Here's a quick concept I just worked up for you:
$(function(){
$("button[name='doModify']").click(function(){
// disable out modify button
$(this).attr("disabled","disabled");
// enable our save button
$("button[name='save']").removeAttr("disabled");
// cycle through each row having marked for modification
$(":checkbox[name='modify']:checked").each(function(){
$(this).closest("tr").find("td:gt(0)").each(function(){
// convert each cell into an editable region
$(this).wrapInner("<textarea name='"+$(this).attr("rel")+"'></textarea>");
});
});
});
});
--
<table border="1" cellspacing="1" cellpadding="5">
<tbody>
<tr>
<td><input type="checkbox" name="modify" /></td>
<td rel="username[]">jon.doe</td>
<td rel="information[]">This is my bio.</td>
</tr>
<tr>
<td><input type="checkbox" name="modify" /></td>
<td rel="username[]">jonathan.sampson</td>
<td rel="information[]">This is my bio.</td>
</tr>
<tr>
<td><input type="checkbox" name="modify" /></td>
<td rel="username[]">yellow.05</td>
<td rel="information[]">This is my bio.</td>
</tr>
<tr>
<td colspan="3" align="right">
<button name="doModify">Modify</button>
<button name="save" disabled="disabled">Save</button>
</td>
</tr>
</tbody>
</table>
You can insert textboxes inside each cell and set the values to be that of the table cell.
Something like this
$(function(){
$("#tbl1 tr").click ( function(){
if ( !$(this).hasClass('clicked') )
{
$(this).children('td').each ( function() {
var cellValue = $(this).text();
$(this).text('').append ( "<input type='text' value='" + cellValue + "' />" );
});
$(this).addClass('clicked');
}
});
});
<table id="tbl1">
<tr>
<td>1</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
You can then place an update button and fetch the values from the textboxes and update.