We Keep Coding

How can i get two input field values based on onclick function

I have a div in that div I have two input fields and update button like this:
<button type = "button" id = "add-botton" >Add Element </button>
<div id = "trace-div1" class = "trace">
<h4><span>Trace 1</span></h4>
<form>
<table>
<tbody>
<tr>
<td><label>X Axis: </label></td>
<td><input type="text" name="t_x_axis" class = "t_x_axis" id="x_axis_t1" size="50">
</td>
</tr>
<tr>
<td><label>Y Axis: </label></td>
<td><input type="text" name="t_y_axis" class = "t_y_axis" id="y_axis_t1" size="50"></td>
<td><button type = "button" name = "update-button-trace" class = "update-trace" id =
"update-botton-trace1" onclick="updatebtn(this)">Update </button></td>
</tr>
</tbody>
</table>
</form>
</div>
<script>
$(document).ready(function(){
$('#add-botton').click(function(){
var $div = $('div[id^="trace-div"]:last');
var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
var $trace1div = $div.clone(true).prop('id', 'trace-div'+num );
$trace1div.find('span').text('Trace ' + num);
$trace1div.find("input[name='t_x_axis']").attr("id", "x_axis_t"+num).val("");
$trace1div.find("input[name='t_y_axis']").attr("id", "y_axis_t"+num).val("");
$trace1div.find("button[name='update-button-trace']").attr("id", "update-button -
trace"+num);
$div.after( $trace1div);
});
});
function updatebtn(el){
var id = $(el).attr('id');
}
}
</script>
Here I am cloning my div multiple times with diff.id's ,my problem is when I click update button i need those respective two input values.
I tried like this but here I am getting all input value like if I have add 3 divs those respective all values coming here each div has 2 input fields :
<script>
function updatebtn(el){
var id = $(el).attr('id');
$('input[type=text]:visible').each(function(){
console.log($(this).val());
})
})
</script>
Thanks

You need to use DOM traversal to find the input elements related to the button which was clicked. The simplest way to do that, given that you're already using jQuery, would be to use a delegated event handler for the dynamic button elements along with closest() and find().
It's also worth noting that your use of id attributes within the dynamic content is creating a lot more problems than it solves. I'd strongly suggest you remove them all and use common classes on all elements. That way you don't have the headache of having to manually update all the incremental ids when adding new content.
Try this:
jQuery(function($) {
var $traceContainer = $('#traces');
$('#add-button').click(function() {
var $div = $traceContainer.find('.trace:last').clone()
$div.find("input[name='t_x_axis']").val("");
$div.find("input[name='t_y_axis']").val("");
$traceContainer.append($div);
$div.find('span').text('Trace ' + ($div.index() + 1));
});
$traceContainer.on('click', '.update-trace', function() {
var $container = $(this).closest('table');
var xAxis = $container.find('input[name="t_x_axis"]').val();
var yAxis = $container.find('input[name="t_y_axis"]').val();
console.log(xAxis, yAxis);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="add-button">Add Element</button>
<div id="traces">
<div class="trace">
<h4><span>Trace 1</span></h4>
<form>
<table>
<tbody>
<tr>
<td><label>X Axis:</label></td>
<td><input type="text" name="t_x_axis" class="t_x_axis" size="50">
</td>
</tr>
<tr>
<td><label>Y Axis:</label></td>
<td><input type="text" name="t_y_axis" class="t_y_axis" size="50"></td>
<td><button type="button" name="update-button-trace" class="update-trace">Update </button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
Finally, note that I added a div container around each .trace to make appending them and retrieving their index simpler. Also note that the form within each .trace seems redundant and can probably be removed.

You can use find value as $div.find('.t_y_axis').val()
$(document).ready(function(){
$('#add-botton').click(function(){
var $div = $('div[id^="trace-div"]:last');
var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
var $trace1div = $div.clone(true).prop('id', 'trace-div'+num );
$trace1div.find('span').text('Trace ' + num);
$trace1div.find("input[name='t_x_axis']").attr("id", "x_axis_t"+num).val("");
$trace1div.find("input[name='t_y_axis']").attr("id", "y_axis_t"+num).val("");
$trace1div.find("button[name='update-button-trace']").attr("id", "update-button-trace"+num);
$div.after( $trace1div);
console.log( 'last t_y_axis => ' , $div.find('.t_y_axis').val());
console.log( 'last t_x_axis => ' , $div.find('.t_x_axis').val());
});
});
function updatebtn(el){
var id = $(el).attr('id');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type = "button" id = "add-botton" >Add Element </button>
<div id = "trace-div1" class = "trace">
<h4><span>Trace 1</span></h4>
<form>
<table>
<tbody>
<tr>
<td><label>X Axis: </label></td>
<td><input type="text" name="t_x_axis" class = "t_x_axis" id="x_axis_t1" size="50">
</td>
</tr>
<tr>
<td><label>Y Axis: </label></td>
<td><input type="text" name="t_y_axis" class = "t_y_axis" id="y_axis_t1" size="50"></td>
<td><button type = "button" name = "update-button-trace" class = "update-trace" id =
"update-botton-trace1" onclick="updatebtn(this)">Update </button></td>
</tr>
</tbody>
</table>
</form>
</div>

try using the following function.since both the input text boxes have their id you can use the same to get the value of the inputs.
Hope it helps!
function updatebtn(el) {
var x1 = document.getElementById('x_axis_t1');
var y1 = document.getElementById('y_axis_t1');
alert('x-axis is ',x1.value, ' and y-axis is', y1.value)
}

you need to develop your updatebtn().
function updatebtn(el){
var element = $(el),
parent_table = element.parentsUntil('table');
x_axis = parent_table.find('.t_x_axis').val();
y_axis = parent_table.find('.t_y_axis').val();
}

Is using <div> inside a <table> valid? Select all option inside a table row

I've got some trouble building a select all checkbox inside a table. Originally the table has several rows and the first checkbox should be used to select all options.
I built a small example, but still could not figure out my mistake.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "httpd://www.w3.org/TR/html4/loose.dtd">
<html><head>
<script language="JavaScript">
function allClicked(clickedId)
{
var divId = "div-" + clickedId.substring(4);
var child = document.getElementById( divId );
var tdChildren = child.getElementsByTagName("td"); // appears to be empty
var allCheckBox = document.getElementById( clickedId );
var setTo = allCheckBox.checked ? true : false;
for (var i=0; i<tdChildren.length; ++i) {
tdChildren[i].elements.checked = setTo;
}
}
</script>
</head><body>
<div id="div-a">
<table>
<tr>
<td><input id="all-AP" onClick="javascript:allClicked('all-AP')" type="checkbox">Select All</td>
<div id="div-AP">
<td><input id="AP_A1K" checked="checked" type="checkbox"></td>
<td><input id="AP_A2K" checked="checked" type="checkbox"></td>
<td><input id="AP_A3K" type="checkbox"></td>
</div>
</tr>
</table>
</div>
</body></html>
During debugging the div with id="all-AP" is retrieved but appears to be empty. I expected it to have three td-elements in it.
Is a div separating the td's valid?
What should I fix?

You don't need a div either to perform a "select all".
Have a look on this fiddle.
First :
<body>
<table id="checkboxtable">
<tr>
<td>
<input onClick="javascript:allClicked()" type="checkbox" />Select All</td>
<td>
<input id="AP_A1K" checked="checked" type="checkbox" />
</td>
<td>
<input id="AP_A2K" checked="checked" type="checkbox" />
</td>
<td>
<input id="AP_A3K" type="checkbox" />
</td>
</tr>
</table>
</body>
Each input has its own id (you CANNOT affect one id to more than one element).
Then allClicked() :
function allClicked() {
var checkBoxTable = document.getElementById("checkboxtable");
var checkBoxes = checkBoxTable.getElementsByTagName("input");
for (var i = 0; i < checkBoxes.length; ++i) {
// if (/^AP_.*/.test(checkBoxes[i].id)) // getting them by regular expression
if (checkBoxes[i].getAttribute("type") == "checkbox") // getting them by type
checkBoxes[i].checked = true;
}
}
The code retrieve the table element by its id. Then it gets all its <input type="checkbox"> elements. Depending on your needs, you can also catch them by their id with a [Regexp][2].test() method (here it catches element whose id begins with "AP_").
This is just one example implementation. You can achieve it in many ways.

No it isn't. You can either put another table inside the second cell or have some javascript to hide/display the other cells.

My final result and working example looks like this:
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8" />
<title>Testpage</title>
<script type="text/javascript">
function allClicked(clickedId)
{
var divId = "div-" + clickedId.substring(4);
var child = document.getElementById( divId );
var children = child.getElementsByClassName("AP");
var allCheckBox = document.getElementById( clickedId );
var setTo = allCheckBox.checked ? true : false;
for (var i=0; i<children.length; ++i) {
children[i].checked = setTo;
}
}
</script>
</head><body>
<table>
<tr id="div-AP">
<td><input id="all-AP" onClick="javascript:allClicked('all-AP')" type="checkbox">Select All</td>
<td><input class="AP" checked="checked" type="checkbox"></td>
<td><input class="AP" checked="checked" type="checkbox"></td>
<td><input class="AP" type="checkbox"></td>
</tr>
</table>
</body></html>
I used a validator to check the document. (http://validator.w3.org/check)
Using a class feature allows me to place the select all inside the same row.

The div doesn't work across table elements. Try this for your allClicked function instead:
function allClicked(clickedId)
{
var prefix = clickedId.substring(4);
var allCheckBox = document.getElementById( clickedId );
var setTo = allCheckBox.checked ? true : false;
var checkboxes = document.getElementsByTagName("input");
for (var i=0; i<checkboxes.length; ++i) {
var boxid = checkboxes[i].id;
if (boxid.indexOf(prefix)===0) {
checkboxes[i].checked = setTo;
}
}
}
This assumes your grouping of checkboxes have a common prefix. Just remove your div lines from the table entirely and rely on the id prefix of the input fields.

I'm trying to make text box in javascript, and to send the entered values in a textbox in a array to add them

Created textbox in javascript, need those value to pass in arrays to add them ?
how do I do that ?
I just want my code to be short and simple
I'm stuck!
Code:
<html>
<head>
<title> 2 NUM ADD VIA ARRAY </title>
</head>
<body bgcolor= "red" </body>
<script type = "text/javascript">
function sum()
{
var sum = [],i=0;
sum[i]= document.getElementById('i+1').value;
alert("sum =" + sum);
}
</script>
<table border=2>
<TR>
<TD>
<input type="text" id="1" /input>
</TD>
<TD>
<input type="text" id="2" /input>
</TD>
</TR>
</table>
<button name="btHello" onclick="sum();">sum</button>
</html>

Usage of Array in this case is not required according to me.I suggest you to do this even without using arrays. This makes your code simple and short
<html>
<head>
<title> 2 NUM ADD VIA ARRAY </title>
</head>
<body bgcolor= "red" </body>
<script type = "text/javascript">
function sum()
{
var sum= 0;
$('.textbox').each(function() {
sum += Number($(this).val());
});
alert(sum);
}
</script>
<form>
<table border=2>
<TR>
<TD>
Text 1 :<input type="text" class="textbox" id="1" />
</TD>
<TD>
Text 2 :<input type="text" class="textbox" id="2" />
</TD>
</TR>
</table>
Submit : <input type = "submit" name="btHello" onclick="sum();">
</form>
</html>

Hope my example helps. I suggest using jQuery. It makes it much easier.
function foo() {
var s = [];
$(".foo").each(function() {
s.push( $(this).val() );
});
s = s.join(" ");
alert("sum = " + s);
}
$("#btHello").on("click", function() { foo(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border=2>
<tr>
<td>
<input type="text" class="foo" /input>
</td>
<td>
<input type="text" class="foo" /input>
</td>
</tr>
</table>
<button id="btHello">sum</button>

I´m to totally sure what result you want, but this should help you on your way. If its not totally what you are after, please try to explain your goal a bit more. :)
Happy codin'
function sum()
{
var sum = [];
sum.push(document.getElementById('1').value);
sum.push(document.getElementById('2').value);
// sum of all values
totalSum = 0;
for (var i = 0; i < sum.length; i++) {
totalSum += parseInt(sum[i]);
}
alert("sum = " + totalSum);
}
<html>
<head>
<title> 2 NUM ADD VIA ARRAY </title>
</head>
<body bgcolor= "red" </body>
<table border=2>
<TR>
<TD>
<input type="text" id="1" /input>
</TD>
<TD>
<input type="text" id="2" /input>
</TD>
</TR>
</table>
<button name="btHello" onclick="sum();">sum</button>
</html>

OCR Web Validation using Javascript

I am a Computing teacher trying to stay one step ahead of my pupils whom are working on a assessment to with validating web forms using HTML and JavaScript. So far, I have managed to do the following but can no longer move forward:
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+='You must enter your name';
document.ExamEntry.name.focus();
document.getElementById("name").style.color="#FF0000";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+=' You must enter the subject';
document.ExamEntry.subject.focus();
document.getElementById("subject").style.color="#FF0000";
result = false;
}
if (document.ExamEntry.examnumber.value=="") {
msg+=' You must enter the examination number';
document.ExamEntry.examnumber.focus();
document.getElementById("examnumber").style.color="#FF0000";
result = false;
}
if(document.getElementById("examnumber").value.length!=4)
{
msg+='You must have exactly 4 digits in the examination number textbox';
document.ExamEntry.examnumber.focus();
document.getElementById("examnumber").style.color="#FF0000"
result = false;
}
function checkRadio() {
var user_input = "";
var len = document.ExamEntry.entry.length;
var i;
for (i=0;i< len;i++) {
if (document.ExamEntry.entry[i].length.checked) {
user_input = document.ExamEntry.entry[i].value;
break;
}
}
if (msg==""){
return result;
}
else
{
alert(msg);
return result;
}
}
function resetForm()
{
document.getElementById('ExamEntry').reset();
document.getElementById("name").style.color="#000000";
document.getElementById("subject").style.color="#000000";
document.getElementById("examnumber").style.color="#000000";
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name='ExamEntry' method='post' action='success.html'>
<table width='50%' border='0'>
<tr>
<td id='name'>Name</td>
<td><input type='text' name='name' /></td>
</tr>
<tr>
<td id='subject'>Subject</td>
<td><input type='text' name='subject' /></td>
</tr>
<tr>
<td id='examnumber'>Examination Number</td>
<td><input type='text' name='examnumber'></td>
</tr>
<tr>
<td id='entry'>Level of Entry</td>
<td><input type='radio' name='entry' value='gcse'>GCSE<BR></td>
<td><input type='radio' name='entry' value='as'>AS<BR></td>
<td><input type='radio' name='entry' value='a2'>A2<BR></td>
</tr>
<tr>
<td><input type='submit' name='Submit' value='Submit' onclick='return (validateForm());'></td>
<td><input type='reset' name='Reset' value='Reset' onclick=' (resetForm());'></td>
</tr>
</table>
</form>
</body>
What I want to do and what I am trying to do are two different things and it's now hit the point where I am banging my head against a brick wall.
What I WANT to do is be able to:
Extend the Javascript code to make sure that the user’s examination number is exactly 4 digits.
Add a set of radio buttons to the form to accept a level of entry such as GCSE, AS or A2. Write a function that displays the level of entry to the user in an alert box so that the level can be confirmed or rejected.
Can anyone help me before I totally lose the plot?

It's been a long time I have tried pure JS. It's a pleasure to try it out anytime though. So, someone's lukcy and I had some free time. I am a very tiny bit OCD when it comes to coding and I ended up cleaning a lot of your code, such as
Always enclose HTML attributes in double quotes - not a hard rule though.
Always close the input attributes - /> - not a hard rule though.
Define your elements and resue where needed in JS
Alwayst try and keep your JS separate from HTML - it's a good practice.
And follow the good old basics
As a result, here we go:
Demo: Fiddle
HTML:
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="#">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="examnumber">Examination Number</td>
<td><input type="text" name="examnumber" /></td>
</tr>
<tr>
<td id="entry">Level of Entry</td>
<td><input type="radio" name="entry" value="gcse" />GCSE<BR></td>
<td><input type="radio" name="entry" value="as" />AS<BR></td>
<td><input type="radio" name="entry" value="a2" />A2<BR></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" /></td>
<td><input type="reset" name="Reset" value="Reset" onclick="resetForm();"></td>
</tr>
</table>
</form>
JS:
var form = document.forms['ExamEntry'];
var iName = form.elements['name'];
var iSubject = form.elements['subject'];
var iExamNumber = form.elements['examnumber'];
var iLevel = form.elements['entry'];
function validateForm() {
var result = true;
var msg = "";
if (iName.value=="") {
msg+='You must enter your name';
iName.focus();
iName.style.color="#FF0000";
result = false;
} else if (iSubject.value=="") {
msg+=' You must enter the subject';
iSubject.focus();
iSubject.style.color="#FF0000";
result = false;
} else if (iExamNumber.value=="" || !/^\d{4}$/.test(iExamNumber.value)) {
msg+=' You must enter a valid examination number';
iExamNumber.focus();
iExamNumber.style.color="#FF0000";
result = false;
} else if(!checkEntry()) {
msg+=' You must select a level';
result = false;
} else {
var cfm = confirm("You have selected " + checkEntry() + ". Are you sure to punish yourself?");
if (!cfm) {
result = false;
}
}
if (!result && msg != "") alert (msg);
return result;
}
function checkEntry() {
for (var i=0; i<iLevel.length; i++) {
if (iLevel[i].checked) {
return iLevel[i].value.toUpperCase();
}
}
return false;
}
function resetForm() {
form.reset();
iName.style.color="#000000";
iSubject.style.color="#000000";
iExamNumber.style.color="#000000";
}
form.onsubmit = validateForm;
form.onreset = resetForm;

First you added the function checkRadio inside of function validateForm
Also, this line
if(document.getElementById("examnumber").value.length!=4)
actually points to this piece of html
<td id='examnumber'>Examination Number</td>
The td element can't hold values... You need to change the line to this:
if (document.ExamEntry.examnumber.value.length!=4) {
This jsfiddle should help you out...

NaN in Javascript showing up when using a text input field

I am trying to use a simple function of javascript that was intended to be used with a SELECT dropdown with single digits, but now I need to use it for when visitors type in a value with decimal points. I am getting a NaN with the current javascript even when I type in 30 or any number. Any suggestions on how to get my total?
JAVASCRIPT:
$(function () {
$('.DoPricing').change(function () {
var total = 0;
$('.DoPricing').each(function () {
total += parseInt($(this).val());
});
$('#TotalPrice').html('$' + total);
});
});
HTML:
<form action="myactionpage.php" method="POST">
<table>
<tr>
<td>How much will you be paying today?</td>
<td>$<input type="text" name="howmuch" id="howmuch" placeholder="0.00" class="DoPricing"></td>
</tr>
<tr>
<td><div class="totalbox">Total Amount Due Today: <strong><span id="TotalPrice">$0.00</span></strong></div>
</td>
</tr>
<tr><td><input type="submit" id="submit" name="submit" value="Submit Payment" class="submitbut" /></td>
</tr>
</table>
</form>

Try this:
$(function () {
$('.DoPricing').on("keyup",function () {
var total = 0;
$('.DoPricing').each(function () {
total += parseFloat($(this).val()) || 0;
});
$('#TotalPrice').html('$' + total);
});
});
This accepts decimals now, here is the demo

Your basic example works for me. I'm guessing there are other elements on the page with class, but that don't necessarily have values, and that you'd like them to default to zero. When an input has no value, .val() returns the empty string, and parseInt('', 10) returns NaN, not 0, so you're not getting what you want.
This is very simple to fix:
total += parseInt($(this).val()) || 0;
Demo: http://jsfiddle.net/mattball/2rgku

I assume you want decimals as well but you're using parseInt instead of parseFloat and if you're using decimals (because it's money) then you should use toFixed. In the following code I assume the user will use the . as a decimal symbol and there should be only one . in the value (no thousands separator).
In your for each you convert a perfectly good usable this to a jQuery object only to get the value. I've changed $(this).val() to this.value so the conversion isn't needed.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
</head>
<body>
<form action="myactionpage.php" method="POST">
<table>
<tr>
<td>How much will you be paying this morning?</td>
<td>$<input type="text" name="howmuch" id="howmuch" placeholder="0.00" class="DoPricing"></td>
</tr>
<tr>
<td>How much will you be paying this evening?</td>
<td>$<input type="text" name="howmuch" id="howmuch1" placeholder="0.00" class="DoPricing"></td>
</tr>
<tr>
<td><div class="totalbox">Total Amount Due Today: <strong><span id="TotalPrice">$0.00</span></strong></div>
</td>
</tr>
<tr><td><input type="submit" id="submit" name="submit" value="Submit Payment" class="submitbut" /></td>
</tr>
</table>
</form>
<script type="text/javascript">
(function () {
function getValue(el) {
if (el.value === "") { return 0; }
var nr = parseFloat(el.value);
// only 0 to 9 or . and only one . used as decimal symbol
if (/[^0-9.]/.test(el.value) || /.*?\..*?\./.test(el.value)) {
return false;
}
return nr;
}
$('.DoPricing').on("keyup", null, null, function (e) {
var $this = $(this),
val = getValue(this),
total = 0;
if(val!==false){
$this.data("pref",val);
}else{
$this.val($this.data("pref")||"");
}
$('.DoPricing').each(function () {
total += parseFloat(this.value,10)||0;
});
$('#TotalPrice').html('$' + total.toFixed(2));
});
})();
</script>
</body>
</html>