I'm having a problem with style.display.
I want to show a submit box (which is inside a table) when I change a number and it's not working.
Here's the code:
<head>
<script>
function changedisp(Section){
if (Section.style.display=="none"){
Section.style.display=""
}
else{
Section.style.display="none"
}
}
function raisenumber(s,s1) {
var x;
x = document.getElementById(s).innerHTML;
document.getElementById(s).innerHTML = x*1 + 1;
changedisp(s1);
}
</script>
</head>
<body>
<table>
<tr>
<th><b>ID</b></th>
<th><b>number</b></th>
<th><b>buttoon</b></th>
<th><b>submit</b></th>
</tr>
<form action="modifica_inventario.php" method="post">
<tr>
<td> <b id="cell1A">item number1</b></td>
<td> <b id="cell2A">10</b></td>
<td> <button id="cell3A" type="button" onClick=raisenumber("cell2A","cell4A")>+1</button></td>
<td> <b id="cell4A" style="display: none;"> <input type="submit" value="submit"/></b>   </td>
</tr>
<tr>
<td> <b id="cell1B">item number1</b></td>
<td> <b id="cell2B">10</b></td>
<td> <button id="cell3B" type="button" onClick=raisenumber("cell2B","cell4B")>+1</button></td>
<td> <b id="cell4B" style="display: none;"> <input type="submit" value="submit"/></b>   </td>
</tr>
</form>
</table>
</body>
Well I don't know why it's not showing on and off the submit button every time a press the button...
I also tried replacing
changedisp(s1);
by
s1.style.display="";
Any comments about this?
You need to pass the actual element you are trying to hide and show to your changedisp function. In your code you are just passing the ID name of the element. Try this...
function raisenumber(s,s1) {
var x;
x = document.getElementById(s).innerHTML;
document.getElementById(s).innerHTML = x*1 + 1;
changedisp(document.getElementById(s1));
}
notice changedisp(document.getElementById(s1)); passes the actual element instead of just the ID.
You need to set it to a display type explicitly:
Section.style.display="inline";
Or inline-block, or block, or whatever you want.
A <B> is by default display:inline, so trying setting to "inline" not the empty string, "".
Related
I am newbie to front-end development. I need to display my data in an HTML <table> (fixed <td> width and height).
If the data exceeds the <td> width, I would like to provide a button to expand the width of <td>.
I am using a large number of table columns, and thus am not using, nor plan to maintain, a unique id for each element, so getElementById isn't an option.
My question is, can I pass a <td> object to onclick() event? Or, if not, is there any other way of doing it?
My code is posted below:
<script>
function myFunction()
{
<!-- Manipulate the object width-->
}
</script>
<body>
<table>
<tr>
<td>
<!-- Any way to pass td object to Function()-->
<button onclick= "Function()">Test</button>
</td>
</tr>
</table>
</body>
Any help is appreciated...
This should explain how to pass the current element to a function.
function myFunction(el) {
var tdEl = el.parentElement;
tdEl.style.width = tdEl.style.width == "100px" ? "200px" : "100px" ;
}
<body>
<table>
<tr>
<td style="width:100px">
<button onclick="myFunction(this)">Test1</button>
</td>
<td style="width:100px">
<button onclick="myFunction(this)">Test2</button>
</td>
<td style="width:100px">
<button onclick="myFunction(this)">Test3</button>
</td>
</tr>
</table>
</body>
As BlackPearl suggested you can access the td element from the button
<script>
function myFunction(target)
{
var td = target.parentElement;
td.style.width = "300px";
}
</script>
<body>
<table>
<tr>
<td>
<!-- Any way to pass td object to Function()-->
<button onclick= "Function(this)">Test</button>
</td>
</tr>
</table>
</body>
Why onclick method is not working without return false. When i try to use it without return false it's show answer and then values disappear..
<form id="form1" method="POST">
<table style="border:1px solid black">
<tr>
<td>First Number</td>
<td>
<input type="text" id="first">
</td>
</tr>
<tr>
<td>Second Number</td>
<td>
<input type="text" id="second">
</td>
</tr>
<tr>
<td>Result</td>
<td>
<input type="text" id="result">
</td>
</tr>
<td>
<button id="btn" value="Add" onClick="addNumbers();return false;">Add</button>
</td>
</table>
</form>
Javascript:
function addNumbers() {
var firstNumber = document.getElementById('first').value;
var secondNumber = document.getElementById('second').value;
document.getElementById('result').value = firstNumber + secondNumber;
}
JSFIDDLE
Why onclick method is not working without return false?
The default action of button inside the form is to submit the form when you click on the button. To prevent this from happening you need to use e.preventDefault() or return false on the button click.
Why the values disappear?
When the form is submitted the page is redirected to the URL where form is submitted. As the action attribute is not provided, the form is submitted to the same page. And as the default values are not set the values are cleared when the page is reloaded.
How to solve the problem
You can stop this from happening by using return false; in the click event handler function as the last statement and adding return before the onclick attribute before the function in the HTML.
One more thing you forgot to do is to cast the string to Number when the values are read from the DOM element. Otherwise + will be used as string concatenation operator and the result will be a joined string.
You can cast the string to number by putting +(unary + operator) before the string.
Updated fiddle: http://jsfiddle.net/tusharj/ufe7aqhw/
function addNumbers() {
var firstNumber = +document.getElementById('first').value;
var secondNumber = +document.getElementById('second').value;
document.getElementById('result').value = firstNumber + secondNumber;
return false;
}
<form id="form1" method="POST">
<table style="border:1px solid black">
<tr>
<td>First Number</td>
<td>
<input type="text" id="first">
</td>
</tr>
<tr>
<td>Second Number</td>
<td>
<input type="text" id="second">
</td>
</tr>
<tr>
<td>Result</td>
<td>
<input type="text" id="result">
</td>
</tr>
<td>
<button id="btn" value="Add" onClick="return addNumbers();">Add</button>
</td>
</table>
</form>
Sidenote:
I will suggest/recommend to
not to use table for formatting the UI, you can use div with simple styles
move the styles to separate stylesheet and not to use inline styles
use addEventListener to bind event
Because return false is used to stop the default action of onclick, which is submitting the form. And you obviously have not defined the post handler for your form. So if you submit your form, you will get an error.
Im a php developer, very little experience with javascript/jquery.
Basically i have a textbox and a link with a href. When the user "keyup"s in the textbox i want the href in the link to append the value.
However i have multiple textboxes and links that should be changed together.
<tr>
<td>
<div class="chapter_update">
<form>
<input class="target" type="text">
</form>
</div>
</td>
</tr>
<tr>
<td>
<a class="link" href="/index.php/cases?id=5">The link</a>
</td>
</tr>
<tr>
<td>
<div class="chapter_update">
<form>
<input class="target" type="text">
</form>
</div>
</td>
</tr>
<tr>
<td>
<a class="link" href="/index.php/cases?id=5">The link</a>
</td>
</tr>
Okay so after seeing that basic set up, lets the the user type into the first text box "23-27". Now i want this to be added to the links href. So it will be appended with "&chapter=(WHAT EVER THEY TYPE IN THE TEXT BOX)".
How can i achieve this in jquery?.
I have tried a few things, my last attempt is below:
<script>
$('.target').keyup(function(){
var currentHref = $('.link').attr("href");
$(this).parents('tr').next('tr').closest('.link').attr("href", currentHref + $(this).val());
});
</script>
Any help would be great thank you.
You were on the correct path until searching for the .link. To search for direct/nested children in jQuery, use find()
$('input').keyup(function() {
var that = $(this);
that.closest('tr').next('tr').find('.link').attr('href', function() {
return $(this).attr('data-original-href') + that.val();
});
});
Also, note above we do not set the attribute with
$('.link').attr("href");
because there are many .link elements. We use $(this) in the context of the found .link element
Finally, use custom data-* attributes to preserve the original href like
<a class="link" href="/index.php/cases?id=5" data-original-href="/index.php/cases?id=5">The link</a>
$('input').keyup(function() {
var that = $(this);
that.closest('tr').next('tr').find('.link').attr('href', function() {
return $(this).attr('data-original-href') + that.val();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table>
<tr>
<td>
<div class="chapter_update">
<form>
<input class="target" type="text">
</form>
</div>
</td>
</tr>
<tr>
<td>
<a class="link" href="/index.php/cases?id=5" data-original-href="/index.php/cases?id=5">The link</a>
</td>
</tr>
<tr>
<td>
<div class="chapter_update">
<form>
<input class="target" type="text">
</form>
</div>
</td>
</tr>
<tr>
<td>
<a class="link" href="/index.php/cases?id=5" data-original-href="/index.php/cases?id=5">The link</a>
</td>
</tr>
</table>
Try this, it is working actually.
$.each($('.link'), function(){
$(this).attr('default', $(this).attr('href'));
});
$('.target').keyup(function (e) {
var input = $(this);
var closestlink = input.closest('tr').next('tr').find('.link');
var linkHref = closestlink.attr('href'); // You aren't using this actually, but just in case you need to use the current href, not the default.
var defaultHref = closestlink.attr('default');
closestlink.attr('href', defaultHref + input.val());
});
https://jsfiddle.net/e8uLc9nm/1/
Another option would be removing this part
$.each($('.link'), function(){
$(this).attr('default', $(this).attr('href'));
});
And adding via HTML a default tag for your link or something else with the default value, this way you won't need to use jQuery to set the default value.
Try this
$(document).ready(function() {
$('#txt').keyup(function(e) {
$("a").attr("href", $("a").attr("href") + String.fromCharCode(e.which).toLowerCase());
$("div").html($("a").attr("href"));
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt" />
some text for link
<div>
</div>
I am trying to get value of a text box by using closest().
My form contains dynamically created table with one text box and button in each row . I want to show the value of text box in button click event.
Table format is given below
<table id="dataarea" class="table">
<tbody>
<tr>
<td>jaison<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="100">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
<tr>
<td>ARUN<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="500">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
</tbody>
</table>
I have written one javascript code (given below) . when the code will execute, it return a null value.
Function
function UpdateSchedule() {
var amt2 = $(this).closest('td.amountclm').find('.amtcls').val();
alert( amt2);
}
Please let me know why am not getting the null value.
jQuery .closest() goes up from the current element until it finds what you give it to find. jQuery .find() goes down until it finds what you give it to find.
This does the trick:
http://jsfiddle.net/6T3ET/
id must be unique, you need to use class instead:
<button class="schedule schbtn btn btn-primary" type="button">
<input class="amtcls txtamt" type="text" value="500">
an use .click() instead of inline onClick handler since you're using jQuery. So you can do:
$('.schedule').click(function() {
var amt2 = $(this).closest('td').prev('td.amountclm').find('.amtcls').val();
alert( amt2);
});
Please note that the .amountclm input is the child of a td whose is the immediate previous sibling of parent td of your clicked .schedule button.
Try this
replace 'this' with the 'schedule_' class attribute
function UpdateSchedule() {
var amt2 = $(".schedule_").closest('td.amountclm').find('.amtcls').val();
alert( amt2);
}
HTML :
<table id="dataarea" class="table">
<tbody>
<tr>
<td>jaison<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="100">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary schedule_" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
<tr>
<td>ARUN<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="500">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary schedule_" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
</tbody>
</table>
or try with Jquery as
$(document).on('click', '.schedule_',function(){
var amt2 = $(this).closest('td.amountclm').find('.amtcls').val();
alert( amt2);
} );
Use .parent() and .prev() in jquery for this contradiction
$(".schbtn").click(function() {
var amt2 = $(this).parent().prev("td.amountclm").find('.amtcls').val();
alert( amt2);
});
Fiddle
First of all .closest() is not plain JavaScript. It's a function from jQuery.
http://api.jquery.com/closest/
and it traverses up in the element hierachy. And td.amountclm is not in the element hierachy of the button#schedule.
Therefore .closest wont find it.
I'm trying to delete a specific row from a table using javascript. The way I'm trying to do it now, is by retrieving the ID of the current row by clicking a button (the delete button) and then deleting the row. The problem is that I'm not retrieving the current row ID in the table. If someone could help me retrieve the the ID of the current row when the user clicks the delete button, I think I can solve the rest myself. Thanks
/*The Javascript*/
function delete_row() {
alert('id goes here');
//getElementById('row').innerHTML ='hello';
//id.deleteRow();
//var table = document.getElementByTagName('items_table');
//var row = table.rows[index];
//document.getElementByTagName('items_table').deleteRow(0);
}
/*The HTML of the Table*/
<table id="items_table">
<tr id="row_1">
<td>
<input type="text" value="item1"/>
</td>
<td>
<button onclick="delete_row();">X</button>
</td>
</tr>
/* Five rows in this table... */
<tr id="row_5">
<td>
<input type="text" value="item5"/>
</td>
<td>
<button onclick="delete_row();">X</button>
</td>
</tr>
</table>
You could just ascend the tree until you find a row:
function delete_row(btn) {
var tr = btn;
while(tr && tr.nodeName != "TR") tr = tr.parentNode;
if( !tr) throw new Error("Failed to find the row, was the function called correctly?");
tr.parentNode.removeChild(tr); // delete it
}
And:
<button onClick="delete_row(this);">X</button>
The this is important, as it provides a reference to the button that was clicked, so we can find the row it is in.
Check this code. It has been verified and will do your job perfectly. :)
<script>
function delete_row(me) {
alert(me.parentNode.parentNode.id);
}
</script>
<table id="items_table">
<tr id="row_1">
<td>
<input type="text" value="item1"/>
</td>
<td>
<button onclick="delete_row(this);">X</button>
</td>
</tr>
<tr id="row_5">
<td>
<input type="text" value="item5"/>
</td>
<td>
<button onclick="delete_row(this);">X</button>
</td>
</tr>
</table>
Can't you just change <button onclick="delete_row();">X</button> to <button onclick="delete_row('row_5');">X</button>, in each row, respectively?
Your handler would look like:
function delete_row(theID) {
alert(theID);
}