I need to write a javascript function that will loop through the input boxes and concatenates the text in each field together and displays the result in the result box. I tried multiple solutions and haven't been able to get any to work, I get that it needs an array of text fields but I can't seem to work it out.
<!DOCTYPE html>
<html>
<body>
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" onClick="myFunction()" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
<script>
function myFunction() {
var fields = [];
}
</script>
</body>
</html>
You can use filter and map
NOTE: I gave the button an ID of "btn"
document.getElementById('btn').addEventListener('click', function() {
const conc = [...document.querySelectorAll('#myform [id^=text]')] // id starts with text
.filter(fld => fld.value.trim() !== "") // not empty
.map(fld => fld.value) // store value
document.getElementById('result').value = conc.join(","); // join with comma
})
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" id="btn" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
In one pass:
document.getElementById('btn').addEventListener('click', function() {
const res = [];
[...document.querySelectorAll('#myform [id^=text]')]
.forEach(fld => { const val = fld.value.trim(); if (val !== "") res.push(val) })
document.getElementById('result').value = res.join(","); // join with comma
})
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" id="btn" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
function myFunction() {
const data = document.querySelectorAll("#myform input[type='text'][id^=text]");
//console.log(data);
var fields = [];
data.forEach(item => {
if (item.value != '') {
fields.push(item.value)
}
})
document.getElementById("result").value = fields.join(",")
}
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" onClick="myFunction()" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
Related
I need to build an object from multiple forms input values without using jQuery.
<div id="formMain">
<form id="form_id_1" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" value="Joe">
<br/>
<input type="text" class="inputClass" name="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" value="1st Maint Street">
</div>
</form>
<form id="form_id_2" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" id="name1" value="Mary">
<br/>
<input type="text" class="inputClass" name="name2" id="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
</div>
</form>
</div>
final result should be object:
"profile":[
{
"name":"Joe",
"name2":"Doe",
"address":"1st Maint Street",
},
{
"name":"Mary",
"name2":"Doe",
"address":"2nd Maint Street",
},
The forms can be added dynamically by user, so I can have multiple forms embedded in the main form div.
I´m able to get the the first form values, but I´m getting stuck when multiple forms are added, I trying to loop throough the main element but just not working. The above is my 1st code sample working.
var formdata = document.getElementById('formMain').getElementsByTagName('input')
var form = [].map.call(formdata, function( input ) {
return {'value':input.value};
});
Have a look at this - using querySelectorAll, forEach and push.
Alternatively Array.map as long as the callback returns the objects created.
the HTML element collection needs to be cast to an Array to use map
console.log("Using forEach on the HTML collection")
let profile = [];
document.querySelectorAll("form").forEach(f => {
let obj = {};
f.querySelectorAll("input").forEach(ele => obj[ele.name] = ele.value || "");
profile.push(obj)
})
console.log(profile)
// ---------------------------------------------------------------
console.log("Using Array.map on a HTML collection cast to Array")
profile = [...document.querySelectorAll("form")].map(f => {
let obj = {};
f.querySelectorAll("input").forEach(ele => obj[ele.name] = ele.value || "");
return obj;
})
console.log(profile)
<div id="formMain">
<form id="form_id_1" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" value="Joe">
<br/>
<input type="text" class="inputClass" name="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" value="1st Maint Street">
</div>
</form>
<form id="form_id_2" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" id="name1" value="Mary">
<br/>
<input type="text" class="inputClass" name="name2" id="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
</div>
</form>
</div>
var forms = document.querySelectorAll("form");
var result = Array.from(forms).map(a => {
var obj = {};
Array.from(a.querySelectorAll("[name]")).forEach(b => {
obj[b.getAttribute("name")] = b.value;
});
return obj;
});
console.log(result);
<div id="formMain">
<form id="form_id_1" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" value="Joe">
<br/>
<input type="text" class="inputClass" name="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" value="1st Maint Street">
</div>
</form>
<form id="form_id_2" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" id="name1" value="Mary">
<br/>
<input type="text" class="inputClass" name="name2" id="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
</div>
</form>
</div>
querySelectorAll (mdn) can be used to fetch the forms and inputs.
flatMap (mdn) can be used to map forms to inputs.
spread syntax [...iterable] (mdn) can be used to convert the node list returned by querySelectorAll to an array.
let inputs = [...document.querySelectorAll('form')].flatMap(a => [...a.querySelectorAll('input')]);
console.log(inputs);
<div id="formMain">
<form id="form_id_1" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" value="Joe">
<br/>
<input type="text" class="inputClass" name="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" value="1st Maint Street">
</div>
</form>
<form id="form_id_2" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" id="name1" value="Mary">
<br/>
<input type="text" class="inputClass" name="name2" id="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
</div>
</form>
</div>
you can try like below
var formMain = document.getElementById("formMain");
var formMresultAreaain = document.getElementById("resultArea");
var result = [];
var formData = '<form class="formClass">' +
'<div id="fullname">' +
'<p>Full Name</p>' +
'<input type="text" class="inputClass" name="name" value="Joe">' +
'<br/>' +
'<input type="text" class="inputClass" name="name2" value="Doe">' +
'</div>' +
'<div id="Address">' +
'<p>Address</p>' +
'<input type="text" class="inputClass" name="address" value="1st Maint Street">' +
'</div>' +
'</form>';
function addForm() {
formMain.innerHTML += formData;
}
function submitForms() {
var forms = document.getElementsByTagName("form");
var inputs;
var tempResult = {};
result = [];
for (var i = 0; i < forms.length; i++) {
inputs = forms[i].getElementsByTagName("input");
tempResult = {};
for (var j = 0; j < inputs.length; j++)
tempResult[inputs[j].name] = inputs[j].value;
result.push(tempResult);
}
console.log(result);
}
<input type="button" onclick="addForm()" value="Add Form" />
<div id="formMain">
</div>
<hr/>
<input type="button" onclick="submitForms()" value="Submit" />
I have three fields that will be filled by the user.
one for the question, and the two others for the proposed answers. I want to give the user the possibility to add the third or as much as he wants propositions whenever he clicks at add proposition. I started coding the function but it's still missed
<head>
<script>
function myFunction(){
var x = document.createElement("LABEL");
var t = document.createTextNode("Titre");
x.appendChild(t);
}
</script>
</head>
<body>
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<br>
<button onclick="myFunction()">Add proposition</button> <br><br><br>
<input type="submit" value="submit">
</form>
</body>
If I'm getting your question right, you need to add inputs to get more answers from user as he wants. If so, see the following -
var addButton = $('#add_button');
var wrapper = $('#more_answers');
$(addButton).click(function(e) {
e.preventDefault();
var lastID = $("#myForm input[type=text]:last").attr("id");
var nextId = parseInt(lastID.replace( /^\D+/g, '')) + 1;
$(wrapper).append(`<div><input type="checkbox" name="ans${nextId}" id="ans${nextId}" values="" /> <input type="text" name="ans${nextId}" id="ans${nextId}" value=""/>Delete<div>`);
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<div id="more_answers"></div>
<br>
<button id="add_button">Add proposition</button> <br><br><br>
<input type="submit" value="submit">
</form>
</body>
In your function, you have to append your label as well in its parent. Like below -
function myFunction() {
var form = document.getElementById("myForm");
var input = document.createElement("input");
form.appendChild(input)
}
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<br>
<button type="button" onclick="myFunction()">Add proposition</button> <br><br>
<input type="submit" value="submit">
</form>
If you want to put your elements at any specific place, you should create a wrapper in your form element just like below -
function myFunction() {
let wrapper = document.getElementById("dynamic-fields");
var input = document.createElement("input");
wrapper.appendChild(input)
}
<form>
<!-- ...input fields... -->
<div id="dynamic-fields"></div> <br>
<!-- ...buttons.... -->
<button type="button" onclick="myFunction()">Add proposition</button>
</form>
This way it will put those dynamically generated elements on specific place in your form page.
Try this - https://jsitor.com/IO08f-WBx
I have few textboxes and data-attrribute for installment number.
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
If my installment number is 15. i want to get controls have data-instno>=15. that means last 5 textboxes in this case.
Use jQuery Has Attribute Selector [name] to selecting target elements and use .filter() to filtering element has data-instno great than 15.
$("[data-instno]").filter(function(){
return $(this).attr("data-instno") >= 15;
}).doSomething();
$("[data-instno]").filter(function(){
return $(this).attr("data-instno") >= 15;
}).css("background", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
If you want to get value of data-instno use this
var arr = $("[data-instno]").map(function(){
return $(this).attr("data-instno");
}).get().filter(function(value){
return value >= 15;
});
var arr = $("[data-instno]").map(function(){
return $(this).attr("data-instno");
}).get().filter(function(value){
return value >= 15;
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
Just plain JavaScript:
console.log(
[].filter.call(document.getElementsByTagName('INPUT'),
function(elem) {
return elem.dataset.instno >= 15;
})
);
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
var arrNumber = new Array();
$('input[type=text]').each(function(){
if($(this).attr('data-instno') >= 15){
arrNumber.push($(this).attr('data-instno'));
}
});
use this you will get this as an array
I have an existing html form which use array to store multiple row values. So I do not have a specific name for the same field for different row. In the PHP page i match the row according to the index.
In the form below, how do I make the button + and - to increase and decrease the value of the quantity of the specific row?
ROW 1
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>`
ROW 2
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>
ROW 3
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>
In my opinion you first should to numerate items:
<input type="text" name="product[]" />
<input id="price-1" type="text" name="price[]" value="" onChange="updatePrice(1)" /> <!-- row number -->
<input id="qty-1" type="text" name="quantity[]" value="" onChange="updatePrice(1)" />
<input type="button" onclick="inc('qty-1')" value="+"/>
<input type="button" onclick="dec('qty-1')" value="-"/>
Then use javascript to manipulate items:
<script>
function inc(id) {
stepQty(id, +1);
}
function dec(id) {
stepQty(id, -1);
}
function stepQty(id, step) {
var value = $('#'+id).val();
$('#'+id).val(value + step);
}
function updatePrice(id) {
var a = $('#price-'+id).val() || 0;
var b = $('#qty-'+id).val() || 0;
$('#'+id).val(a*b);
}
</script>
So, I am fairly new to JavaScript and I want to create a box for the user to input matrix mxn then parse the input to JS. I know how to create row and column in html, but I have no idea with the JS.
This is what I have so far.
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3">
<input type="text" name="field01" size="3">
<input type="text" name="field02" size="3">
<input type="text" name="field03" size="3">
<br>
<input type="text" name="field10" size="3">
<input type="text" name="field11" size="3">
<input type="text" name="field12" size="3">
<input type="text" name="field13" size="3">
<br>
<input type="text" name="field20" size="3">
<input type="text" name="field21" size="3">
<input type="text" name="field22" size="3">
<input type="text" name="field23" size="3">
<br>
<input type="submit" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info">
</form>
<div id="resultField">
</div>
</div>
</div>
<script type="text/javascript">
function calcJacobian(){
var myArr = document.forms.inputField;
var myControls = myArr.elements['p_id'];
for(var i =0; i<myControls.length; i++){
var aControl = myControls[i];
document.getElementById("resultField").append=aControl;
}
}
</script>
After a few adjustments, the code is displayed below. Note that the variable name_value_array holds a map which store all values from the table, having as the key the input name and as stored value the input value.
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3">
<input type="text" name="field01" size="3">
<input type="text" name="field02" size="3">
<input type="text" name="field03" size="3">
<br>
<input type="text" name="field10" size="3">
<input type="text" name="field11" size="3">
<input type="text" name="field12" size="3">
<input type="text" name="field13" size="3">
<br>
<input type="text" name="field20" size="3">
<input type="text" name="field21" size="3">
<input type="text" name="field22" size="3">
<input type="text" name="field23" size="3">
<br>
<input type="button" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info">
</form>
<div id="resultField">
</div>
</div>
</div>
<script type="text/javascript">
function calcJacobian() {
var myArr = document.forms.inputField;
var myControls = myArr;
var name_value_array = [];
for (var i = 0; i < myControls.length; i++) {
var aControl = myControls[i];
// don't print the button value
if (aControl.type != "button") {
// store value in a map
name_value_array.push(aControl.value, aControl.name);
document.getElementById("resultField").appendChild(document.createTextNode(aControl.value + " "));
}
}
// show map values as a popup
alert(JSON.stringify(name_value_array));
}
</script>
Try the CSS selector string for 'starts with' aka ^= to grab all values with names starting with field, perhaps make it an array so as to save the name value numbers at the same time:
window.calcJacobian = function() {
var myArr = document.querySelectorAll('input[name^="field"]')
for (var i = 0; i < myArr.length; i++) {
var results = "\nfield: " + myArr[i].name.substring(5) + ", value: " + myArr[i].value;
var text = document.createTextNode(results);
document.querySelector('#resultField').appendChild(text);
}
}
#resultField {
white-space: pre-line;
}
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3" />
<input type="text" name="field01" size="3" />
<input type="text" name="field02" size="3" />
<input type="text" name="field03" size="3" />
<br>
<input type="text" name="field10" size="3" />
<input type="text" name="field11" size="3" />
<input type="text" name="field12" size="3" />
<input type="text" name="field13" size="3" />
<br>
<input type="text" name="field20" size="3" />
<input type="text" name="field21" size="3" />
<input type="text" name="field22" size="3" />
<input type="text" name="field23" size="3" />
<br>
<input type="button" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info" />
</form>
<div id="resultField"></div>
</div>
</div>