calculating input fields by class name - javascript

Here is my form:
<INPUT TYPE=TEXT NAME="input1" SIZE=10>
<INPUT TYPE=TEXT NAME="input2" SIZE=10>
<INPUT TYPE="button" VALUE="+" name="add"
onclick="CalculateIMSUB(this.form)">
<INPUT TYPE=TEXT NAME="Answer" SIZE=12>
Here is my function:
function CalculateIMSUB(form) {
var Atext = form.input1.value;
var Btext = form.input2.value;
var val = form.val.value;
var A = eval(Atext);
var B = eval(Btext);
var answer = A - B;
form.Answer.value = answer;
}
Here is my question:
I want my function to operate through classname. So, if my form were to look like this instead:
<INPUT TYPE=TEXT classNAME="input1" name="baboon" SIZE=10>
<INPUT TYPE=TEXT classNAME="input2" name="gorilla" SIZE=10>
<INPUT TYPE="button" VALUE="+" name="add"
onclick="CalculateIMSUB(this.form)">
<INPUT TYPE=TEXT NAME="Answer" SIZE=12>
The calculater function would still work.
Many thanks

You could use the following to retrieve the element:
function CalculateIMSUB(form) {
var Atext = form.getElementById('input1').value;
var Btext = form.getElementById('input2').value;
var val = form.val.value;
var A = eval(Atext);
var B = eval(Btext);
var answer = A - B;
form.Answer.value = answer;
}
for the following HTML:
<INPUT TYPE=TEXT id="input1" name="baboon" SIZE=10>
<INPUT TYPE=TEXT id="input2" name="gorilla" SIZE=10>
<INPUT TYPE="button" VALUE="+" name="add"
onclick="CalculateIMSUB(this.form)">
<INPUT TYPE=TEXT NAME="Answer" SIZE=12>

instead of class use id instead and you can reference them by using document.getElementById('ID').value there is a document.getElementByClass i think but it's not fully supported by all browsers

function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all :
oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i < arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}

Related

How to disable button if dynamic textbox are empty

I have disabled my submit button to avoid submission when textbox are not filled. I have multiple dynamic textbox where the function works correctly. But upon adding another row of textboxes, the submit button is already enabled. How can I still disable the textboxes when the user decides to add another row? I need the submit button to be enabled whenever all the textboxes are filled, after and before adding another row.
<html>
<head>
<script>
function addRow(){
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="purpose_dy[]" id="purpose" size="20" onkeyup="success()"/>';
row.insertCell(1).innerHTML = '<input type="text" name="wafernum_dy[]" id="wafernum" size="20" onkeyup="success()"/>';
row.insertCell(2).innerHTML = '<input type="text" name="cell_dy[]" id="cell" size="20" onkeyup="success()"/>';
row.insertCell(3).innerHTML = '<input type="text" name="qty_dy[]" id="qty" size="20" onkeyup="success()"/>';
row.insertCell(4).innerHTML = '<input type="text" name="remarks_dy[]" id="remarks" size="20" onkeyup="success()"/>';
row.insertCell(5).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
}
function success() {
if(document.getElementById("uname").value==="" || document.getElementById("age").value==="" || document.getElementById("purpose").value==="" || document.getElementById("wafernum").value==="" || document.getElementById("cell").value==="" || document.getElementById("qty").value==="" || document.getElementById("remarks").value==="") {
document.getElementById('submit_form').disabled = true;
} else {
document.getElementById('submit_form').disabled = false;
document.getElementById('submit_form').style.backgroundColor="yellow";
}
}
</script>
<style>
</style></head>
<body>
Name: <input type="text" id="uname" />
Age: <input type="text" id="age" />
<input type= "button" id= "add" value="Add" onclick= "Javascript:addRow();" >
<table id= "bod">
<tr>
<th>PURPOSE</th>
<th>WAFERNUM</th>
<th>CELL</th>
<th>QTY</th>
<th>REMARKS</th>
</tr>
</table>
<input type = "submit" name = "submit" id= "submit_form" value = "Submit" onclick="SaveData()" disabled>
</body>
</html>
Alright i fixed your error , you had some issues where you were enbaling the button and disabling , its always better to itrate and check through the loop rather than going and checking if every element is empty , check the bellow answer and the fiddle . let me know if it works . The edited script part is below , replace it with yours it should work .
<script>
function addRow() {
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="purpose_dy[]" class = "uname" id="purpose" size="20" onkeyup="success()"/>';
row.insertCell(1).innerHTML = '<input type="text" name="wafernum_dy[]" class = "wafernum" id="wafernum" size="20" onkeyup="success()"/>';
row.insertCell(2).innerHTML = '<input type="text" name="cell_dy[]" class = "cell" id="cell" size="20" onkeyup="success()"/>';
row.insertCell(3).innerHTML = '<input type="text" name="qty_dy[]" class = "qty" id="qty" size="20" onkeyup="success()"/>';
row.insertCell(4).innerHTML = '<input type="text" name="remarks_dy[]" class = "remarks" id="remarks" size="20" onkeyup="success()"/>';
row.insertCell(5).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
}
function success() {
// get all the elements present in form
var unameArray = document.getElementsByClassName("uname");
var ageArray = document.getElementsByClassName("age");
var cellArray = document.getElementsByClassName("cell");
var qtyArray = document.getElementsByClassName("qty");
var wafernumArray = document.getElementsByClassName("wafernum");
var purposeArray = document.getElementsByClassName("purpose");
var remarksArray = document.getElementsByClassName("remarks");
// Check for number of tr
var rowCount = document.getElementById("bod").rows.length;
var bt = document.getElementById('submit_form');
var ele = document.getElementsByTagName('input');
for(var i=0;i<ele.length;i++) {
if (ele[i].type == 'text' && ele[i].value == '') {
bt.disabled = true; // Disable the button.
return false;
}
else {
bt.disabled = false; // Enable the button.
}
}
}
</script>
Modify your conditions a little bit. Now it is working as desired
<html>
<head>
<script>
function addRow() {
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="purpose_dy[]" class = "uname" id="purpose" size="20" onkeyup="success()"/>';
row.insertCell(1).innerHTML = '<input type="text" name="wafernum_dy[]" class = "wafernum" id="wafernum" size="20" onkeyup="success()"/>';
row.insertCell(2).innerHTML = '<input type="text" name="cell_dy[]" class = "cell" id="cell" size="20" onkeyup="success()"/>';
row.insertCell(3).innerHTML = '<input type="text" name="qty_dy[]" class = "qty" id="qty" size="20" onkeyup="success()"/>';
row.insertCell(4).innerHTML = '<input type="text" name="remarks_dy[]" class = "remarks" id="remarks" size="20" onkeyup="success()"/>';
row.insertCell(5).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
}
function success() {
// get all the elements present in form
var unameArray = document.getElementsByClassName("uname");
var ageArray = document.getElementsByClassName("age");
var cellArray = document.getElementsByClassName("cell");
var qtyArray = document.getElementsByClassName("qty");
var wafernumArray = document.getElementsByClassName("wafernum");
var purposeArray = document.getElementsByClassName("purpose");
var remarksArray = document.getElementsByClassName("remarks");
// Check for number of tr
var rowCount = document.getElementById("bod").rows.length;
for(var i=0;i<rowCount;i++) {
var uname = unameArray[i];
var age = ageArray[i];
var cell = cellArray[i];
var qty = qtyArray[i];
var wafernum = wafernumArray[i];
var purpose = purposeArray[i];
var remarks = remarksArray[i];
if (uname === "" || age === "" || cell === "" || qty === "" || wafernum === "" || purpose === "" || remarks === "") {
document.getElementById('submit_form').disabled = true;
document.getElementById('submit_form').style.backgroundColor = "initial";
break;
} else {
document.getElementById('submit_form').disabled = false;
document.getElementById('submit_form').style.backgroundColor = "yellow";
}
}
}
</script>
<style>
</style>
</head>
<body>
Name: <input type="text" id="uname" /> Age: <input type="text" id="age" />
<input type="button" id="add" value="Add" onclick="Javascript:addRow();">
<table id="bod">
<tr>
<th>PURPOSE</th>
<th>WAFERNUM</th>
<th>CELL</th>
<th>QTY</th>
<th>REMARKS</th>
</tr>
</table>
<input type="submit" name="submit" id="submit_form" value="Submit" onclick="SaveData()" disabled>
</body>
</html>

trying to add some Js strings together

I have the following form:
<form id="taskform">
Habit: <input id="taskname" type="text">
<textarea id="taskdesc" rows="4" cols="50" name="comment" form="usrform">Description Here...</textarea>
<div>
Good or Bad:
<input type="radio" id="star" name="priority" value="1" checked/><label for="star1" title="Not very important">Good</label>
<input type="radio" id="star" name="priority" value="2"/><label for="star2" title="Kinda important">Bad</label>
</div>
<br>Starting Date: <input id="deadlinedate" type="date">
Times you want to do it: <input type="number" id="reminderdays" min="0">
<span type="button" id="sBtn" value="Add Habit" onclick="newElement()" class="addBtn" >Add Habit</span>
<input type="reset" value="Clear">
</form>
I have a js function which takes the values of each field here and it should add them together:
var li = document.createElement("li");
var inputValue = document.getElementById("taskname").value;
var inputDescription = document.getElementById("taskdesc").value;
var inputStar = document.getElementById("star").value;
var inputDate = document.getElementById("deadlinedate").value;
var inputReminderDays = document.getElementById("reminderdays").value;
var t1 = document.createTextNode(inputValue);
var t2 = document.createTextNode(inputDescription);
var t3 = document.createTextNode(inputStar);
var t4 = document.createTextNode(inputDate);
var t5 = document.createTextNode(inputReminderDays);
now I am trying to combine all of the strings t1,t2,t3,t4 and t5 together and then add to a list object.
it does add to a list if I use just for example t1, by doing this:
li.appendChild(t1);
if I use concat and try to add t2, t3, t4 and t5 to my t1 and then use this
li.appendChild(res);
with res being the sum of all of the values my list is empty and nothing is added,
i am not sure how to do this, I dont know why concat or + doesnt work.
also I can not get the value for my date and radio for some reason.
If all you want to do is to combine the strings then nhy not try this:
var t1 = document.createTextNode(inputValue+' '+inputDescription+' '+inputStar+' '+inputDate+' '+inputReminderDays);
UPDATE:
var output = document.getElementById('output');
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("taskname").value;
var inputDescription = document.getElementById("taskdesc").value;
var inputStar1 = document.getElementById("star1");
var inputStar2 = document.getElementById("star2");
var inputDate = document.getElementById("deadlinedate").value;
var inputReminderDays = document.getElementById("reminderdays").value;
// Since you only have two radio buttons you can use a ternary to get the right value base on if oneis checked or not.
var inputStar = inputStar1.checked ? inputStar1.value : inputStar2.value;
var t1 = document.createTextNode(inputValue + ', ' + inputDescription + ', ' + inputStar + ', ' + inputDate + ', ' + inputReminderDays);
li.appendChild(t1);
output.appendChild(li);
}
<form id="taskform">
Habit: <input id="taskname" type="text"><br/>
<textarea id="taskdesc" rows="4" cols="50" name="comment" form="usrform" placeholder="Description Here..."></textarea>
<div>
Good or Bad:
<input type="radio" id="star1" name="priority" value="1" checked/><label for="star1" title="Not very important">Good</label>
<input type="radio" id="star2" name="priority" value="2" /><label for="star2" title="Kinda important">Bad</label>
</div>
<br>Starting Date: <input id="deadlinedate" type="date"> Times you want to do it: <input type="number" id="reminderdays" min="0" value="1">
<button type="button" id="sBtn" value="Add Habit" onclick="newElement()" class="addBtn">Add Habit</button>
<input type="reset" value="Clear">
</form>
<hr/>
<ul id="output">
</ul>

How to pass textbox value from a page into a textbox in another page?

I try to pass the textbox value from a page to another page.
I try to pass that text box but failed I use javascript for doing that.
I have to try to change my code properly but still not work
the error is the data that passing to the text box is multiple.
this is my code
1st-page code
function myFunction() {
var inputTest = document.getElementById('tanggal2').value;
var inputTest1 = document.getElementById('dt').value;
localStorage.setItem( 'objectToPass', inputTest );
localStorage.setItem( 'objectToPass1', inputTest1 );
if (inputTest=="") {
window.open('report_pengambilan_singgle.html','','height=650,width=1200');
}
else {
window.open('report_pengambilan_singgle1.html','','height=650,width=1200');
}
}
<input type="text" id="dt" type="text" name="dt" maxlength="1" size="23" readonly="readonly" style="visibility:hidden" />
<input type="text" id="tanggal2" type="text" name="tanggal2" maxlength="1" size="23" readonly="readonly" style="visibility:hidden" />
<label onclick="myFunction();" >a</label>
and this my 2nd-page code
var inputTest = localStorage.getItem('objectToPass');
var inputTest1 = localStorage.getItem('objectToPass1');
var displayData = inputTest;
var displayData = inputTest1;
document.getElementById("datepicker1").value=inputTest;
document.getElementById("datepicker2").value=inputTest;
document.getElementById("datepicker3").value=inputTest;
localStorage.removeItem( 'objectToPass1' ); // Clear the localStorage
localStorage.removeItem( 'objectToPass' ); // Clear the localStorage
Try this way...
test.html
<script>function myFunction() {
var inputTest = document.getElementById('tanggal2').value;
var inputTest1 = document.getElementById('dt').value;
if (inputTest=="") {
window.open('report_pengambilan_singgle.html','','height=650,width=1200');
}
else {
window.open('test1.html?name=' + inputTest1,'','height=650,width=1200');
}
}
</script>
<input type="text" id="dt" type="text" name="dt" size="23" />
<input type="text" id="tanggal2" type="text" name="tanggal2" size="23" />
<button onclick="myFunction();" >a</button>
test1.html
<script>window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
document.getElementById("datepicker1").value = data.name;
}
</script>
<input type="text" id="datepicker1" type="text" name="datepicker1" size="23" />
i Hope working for u...
you have textbox which have hidden and not any value define
so first set any value in textbox and create textbox in another page before your <script> start
like
<input type="text" id="datepicker1" value="">
<input type="text" id="datepicker2" value="">
<input type="text" id="datepicker3" value="">

Add a day with javascript

can you please help me to correct this :
function ajout()
{
var date_init = document.getElementById("actual").value;
var date_nmbr = document.getElementById("nombre").value;
var date_resu = addDaysToDate(date_init, date_nmbr);
document.getElementById("result").value = date_resu;
return(true);
}
<input type="text" name="actual" id="actual"><br>
<input type="text" name="result" id="result"><br>
<input type="text" name="nombre" id="nombre" onChange="javascript:ajout();">
Cordialy

Add and remove inputs dynamicly with a other input

I searched a lot for this, but I can only find +1 -1 solutions.
But I want to set the number of inputs with a other input like this:
//Enter the number of inputs (1 is the start-value)
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">
//Display that number of inputs (1 at start)
<input type="text" size="30" maxlength="30" id="input_1" name="input_1">
When the user now writes 5 in the first field, the form should look like this:
//Enter the number of inputs (1 is the start-value)
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">
//Display that number of inputs (1 at start)
<input type="text" size="30" maxlength="30" id="input_1" name="input_1">
<input type="text" size="30" maxlength="30" id="input_2" name="input_2">
<input type="text" size="30" maxlength="30" id="input_3" name="input_3">
<input type="text" size="30" maxlength="30" id="input_4" name="input_4">
<input type="text" size="30" maxlength="30" id="input_5" name="input_5">
How can I make this? MUST I use js?
Here's a simple javascript snippet that doesn't make use of any frameworks:
function addInputs() {
var count = parseInt(document.getElementById("count").value);
for (var i = 2; i <= count; i++) {
document.getElementById('moreinputs').innerHTML += '<input type="text" name="input_' + i + '" id="input_' + i + '" />';
}
}
In this example you have to add a container (div) with id 'moreinputs'. However, when calling this function more than once, it will not work properly (e.g. it can only increase the number of input but not decrease)
Yes, either you use javascript, or you send the form to the server, where a new html page with all the inputs is generated (e.g. with PHP).
Yes you must use js to do it dynamically on the spot You have a jQuery tag so I will show an example in jQuery
This is not the best example but it works and it's a starting point
JS:
$(function(){
$('#master').on('change', function() {
var count = $(this).val();
$('#otherInputs').html('')
for( var i = 0; i < count; i++) {
$('#otherInputs').append(
$('<input>', {type: 'text'})
);
}
});
});
HTML:
<input type="number" id="master" value="1">
<div id="otherInputs"></div>
Demo
In English this is saying...
When you change #master I will empty #master (html('')) loop through and append a new input depending on #master's value
Here's the FIDDLE. Hope it helps. :)
html
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">
<div id="container"></div>
script
$('#count').on('keyup', function () {
var $this = $(this);
var count = $this.val();
$('#container').empty();
for (var x = 1; x <= count; x++) {
var newInput = '<input type="text" size="30" maxlength="30" id="input_' + x + '" name="input_' + x + '">';
$('#container').append(newInput);
}
});
This worked for me
function AddField() {
var count = $("#countetfield").val();
var i = 1;
var id = $("#container .testClass:last").attr('name');
var test = id.split("_");
id_name = test[1];
while (i <= count) {
id_name++;
var a = '<input type="text" class="testClass" size="30" maxlength="30" id="input_' + id_name + '" name="input_' + id_name + '"/>';
$("#container").append(a);
i++;
}
}
<input type="text" id="countetfield" value="1" />
<input type="button" value="Go" onclick="AddField();" />
<div id="container">
<input type="text" class="testClass" size="30" maxlength="30" id="input_1" name="input_1" />
</div>

Categories

Resources