Develop Reference

How to get the value of Input type number inside a table

I have a table with several rows in which one of the cells has an imput type = number. I want to go through all the rows and get the number that is in that cell. I'm really lost on how to do it.
<tr class="iterate">
<td class="cantidad"> <input type="number"
onchange="actualizar()" name="cantidad" placeholder="0" min="0" max="99"></td>
</tr>
function actualizar(){
var total=0;
$("tr.iterate").each(function() {
var quantity1 = $(this).find(".cantidad").innerHTML,
alert(quantity1);
});
}
I tried with innerHTML, value, text() and with none of them working.

.cantidad is the td element not the input you are looking for. You have to find the input inside the .cantidad.
Also I will prefer oninput event instead of onchange:
$(this).find(".cantidad input").val()
function actualizar(){
var total=0;
$("tr.iterate").each(function() {
var quantity1 = $(this).find(".cantidad input").val();
alert(quantity1);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="iterate">
<td class="cantidad"> <input type="number"
oninput="actualizar()" name="cantidad" placeholder="0" min="0" max="99"></td>
</tr>
</table>
Please Note: innerHTML and value used when using vaniall JS, you can not use them on jQuery referenced element.

Javascript - copy date/time in each new row

I have a form with this filed and by ADD button I can add rows: book_date[], book_desc[], book_pages[].
<form method="POST" action="addpages.php" name="books" onmouseover="javascript:sum();">
<button type="button" onClick="addRow('dataTable')"> ADD Book </button>
<table id="dataTable" class="form">
<input type="text" class="form-control" name="date_book[]">
<input type="text" class="form-control" name="book_pages[]">
<input type="text" class="form-control" name="book_pages_total">
</table>
</form>
When add a new row I want the value inside the first filed date_book was copyed in the new row.
I try ti use this start script, but this not work for new row.
var $date_book= $("#date_book[]");
$date_book.on("keydown",function(){
setTimeout(checkValue,0);
});
var v2 = $date_book[].val();
var checkValue = function(){
var v1 = $field1.val();
if (v1 != v2){
$date_book[].val(v1);
v2 = v1;
}
};
How to copy the date values write in in the filed date_book[] in each new row?
I hope to explain my problem.
Thanks

You should start with valid HTML, an input can't be a child of a table. I've just mocked–up something based on the names.
After fixing that, in POJS you can just clone the last row and add it to the table. That will also clone whatever values the form controls happen to have at the time, so if you only want to keep the first value, then do that and clear the others, e.g.
function addRow(tableId) {
var table = document.querySelector('#' + tableId);
var lastRow = table.rows[table.rows.length - 1];
// Create a new row by cloning the last one
var newRow = lastRow.cloneNode(true);
var inputs = newRow.querySelectorAll('input');
// Clear all but first input
[].forEach.call(inputs, (input, i) => {if (i) input.value = '';});
// Add the row to the table
lastRow.parentNode.appendChild(newRow);
}
<form name="books">
<button type="button" onClick="addRow('dataTable')"> ADD Book </button>
<table id="dataTable" class="form">
<tr>
<td>Date:
<td><input type="text" class="form-control" name="date_book[]">
<td>Pages:
<td><input type="text" class="form-control" name="book_pages[]">
<td>Pages total:
<td><input type="text" class="form-control" name="book_pages_total">
</table>
</form>

Jquery .change() only updates results one time

I have 3 input fields. #first, #second, and #third, as well as a fourth field #theResult.
<div id="addFields">
<span id="addFieldsHeader">Add The Fields</span>
<table style="margin:0 auto;">
<tr>
<td style="width:80px;">First
<input id="first" size="5" value="3" name="first" style="width:75px" />
</td>
<td style="width:80px;">Second
<input id="second" size="5" value="5" name="second" style="width:75px" />
</td>
<td style="width:80px;">Third
<input id="third" size="6" maxlength="7" name="third" style="width:75px" value="0" />
</td>
<td style="width:80px;">Result
<input id="theResult" size="7" maxlength="7" name="result" style="width:75px" value="0" />
</td>
</tr>
</table>
</div>
I have tried to write a jQuery script that will add the values of #first, #second, and #third together and display the results in #theResult.
I did find docs for the .change() function here which looked like it would suit my needs better than .blur() or .keyup(), as I want the value of #theResult to update each time the value of #first, #second, or #third is changed by the user.
I have the following jQuery:
$(document).ready(function () {
var first = parseInt($("#first").val(), 10);
var second = parseInt($("#second").val(), 10);
var third = parseInt($("#third").val(), 10);
var theResult = first + second + third;
$("#addFields input").change(function () {
$("#theResult").val(theResult);
});
});
When I change a value in any of the inputs #theResult does update, but it only works once and after that I have to reload the page again to get it to work. Also, only the initial values are added, not the updated values. Fiddle is here
Anyone with experience I greatly appreciate your help :)

$(document).ready(function() {
$("#addFields input").change(function() {
var first = parseInt($("#first").val(),10);
var second = parseInt($("#second").val(),10);
var third = parseInt($("#third").val(),10);
var theResult = first + second + third;
$("#theResult").val(theResult);
});
});
You just have to move the variables inside the change() function, so it updates each time.
JSFiddle

You Only need to bring you variables in the change function
$("#addFields input" ).change(function() {
var first = parseInt($("#first").val(),10);
var second = parseInt($("#second").val(),10);
var third = parseInt($("#third").val(),10);
var theResult = first + second + third;
$("#theResult").val(theResult);
});
it because the new value is not assigned to those variables

Try like this:
$(function() {
$("#addFields input" ).change(function() {
var first = parseInt($("#first").val(),10);
var second = parseInt($("#second").val(),10);
var third = parseInt($("#third").val(),10);
var theResult = first + second + third;
$("#theResult").val(theResult);
});
});

Append table row to table using getElementByID?

I want to be able to append an additional row to my table. The way the code is now, it just adds two input boxes outside of the table regardless of where I insert it. When I inspect in my browser, it looks like the table tags have been stripped, is there something wrong with using the getElementByID function?.
My Hidden row to be added to the table:
<div id="rowToBeAdded" style="display: none">
<tr>
<td><input type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /></td>
<td><input style="margin-right:2em;" type="text" value="" name="newLinkTitle[]" size="50" /></td>
<td><input type="text" value="http://" name="newLinkAddress[]" size="50" /></td>
</tr>
</div>
After the last </tr> of my table I have:
<span id="addRowHere">
<input type="button" id="moreFields" value="Add more links" onclick="init()" />
</span>
And here's my Javascript:
function init() {
document.getElementById('moreFields').onclick = moreFields;
moreFields();
}
function moreFields() {
var newFields = document.getElementById('rowToBeAdded').cloneNode(true);
newFields.style.display = 'block';
var newField = newFields.childNodes;
var insertHere = document.getElementById('addRowHere');
insertHere.parentNode.insertBefore(newFields,insertHere);
}

Try this
http://jsfiddle.net/blackjim/yGVWM/3/ EDIT: fixed the remove button
document.getElementById('moreFields').onclick = addMoreFields; // set binding
var newRow = document.getElementById('rowTemplate').cloneNode(true),
myTable = document.getElementById('myTable');
function addMoreFields() {
myTable.appendChild(newRow.cloneNode(true));
}
And you should make a function for removing a line also. Try it yourself. And use classes and id to get your elements.

Getting input values from text box

I'm trying to get the text from a text box.
I have 2 input text boxes that are not in a form, and I'm trying to retrieve the value and store it in a variable.
This code returns undefined in the alert box that pops up.
<script>
var userPass = document.getElementById('pass');
var userName = document.getElementById('fName');
function submit(){
alert(userPass.value);
}
</script>
When I run it with userName.value as a parameter in the alert function, it will work and display what ever you type in the box.
Here is the html:
<table id="login">
<tr>
<td><label>User Name</label></td>
</tr>
<tr>
<td colspan="2"><input class="textBox" id="fName" type="text" maxlength="30" required/></td>
</tr>
<tr>
<td id="pass"><label>Password</label></td>
<tr>
<td colspan="2"><input class="textBox" id="pass" type="text" maxlength="30" required/></td>
</tr>
<tr>
<td><input type="button" class="loginButtons" value="Login" onclick="submit();"/>&nbsp&nbsp&nbsp
<input type="button" class="loginButtons" value="Cancel"/></td>
</table>

You will notice you have no value attr in the input tags.
Also, although not shown, make sure the Javascript is run after the html is in place.

<script>
function submit(){
var userPass = document.getElementById('pass');
var userName = document.getElementById('user');
alert(user.value);
alert(pass.value);
}
</script>
<input type="text" id="user" />
<input type="text" id="pass" />
<button onclick="submit();" href="javascript:;">Submit</button>

// NOTE: Using "this.pass" and "this.name" will create a global variable even though it is inside the function, so be weary of your naming convention
function submit()
{
var userPass = document.getElementById("pass").value;
var userName = document.getElementById("user").value;
this.pass = userPass;
this.name = userName;
alert("whatever you want to display");
}

you have multiple elements with the same id. That is a big no-no. Make sure your inputs have unique ids.
<td id="pass"><label>Password</label></td>
<tr>
<td colspan="2"><input class="textBox" id="pass" type="text" maxlength="30" required/></td>
</tr>
see, both the td and the input share the id value pass.

Remove the id="pass" off the td element. Right now the js will get the td element instead of the input hence the value is undefined.

Javascript document.getElementById("<%=contrilid.ClientID%>").value; or using jquery
$("#<%= txt_iplength.ClientID %>").val();

This is the sample code for the email and javascript.
params = getParams();
subject = "ULM Query of: ";
subject += unescape(params["FormsEditField3"]);
content = "Email: ";
content += unescape(params["FormsMultiLine2"]);
content += " Query: ";
content += unescape(params["FormsMultiLine4"]);
var email = "ni#gmail.com";
document.write('SUBMIT QUERY');