I am trying to build a basic mad lib style code using Regex and I am unable to create new input elements and have them behave like the initial one.
I've tried swapping out (doc.replace(regex[i]... for (doc.replace(inputArray[i]... - this works partially, but in the end I am stuck with brackets around the input value.
<!-- HTML
<div id = "doc" contentEditable="true">{input1} {input2}</div>
<div id = "inputs">
<input type = "text" id = "input1"> {input1}
</div>
<br>
<button onclick="generate()">Generate</button>
<button onclick="addInput()">Add Input</button>
</div>
-->
//Global Variables
var inputNumber = 1;
var regex = [/{input1}/g];
var inputArray = ["input1"];
//Generate
function generate(){
for (var i = 0; i < inputArray.length; i++) {
var doc = document.getElementById("doc").innerHTML;
var outputArray = document.getElementById(inputArray[i]).value;
document.getElementById("doc").innerHTML = (doc.replace(regex[i], outputArray))
};
};
//Add Input
function addInput(){
inputNumber++;
var inputs = document.getElementById("inputs");
var newInput = document.createElement("div");
newInput.innerHTML = "<p><input type='text' id='input"+inputNumber+"'> {input"+inputNumber+"}</p>";
inputs.appendChild(newInput);
inputArray.push("input"+inputNumber);
regex.push("/{input"+inputNumber+"}/g")
};
I want {input2} to become the value of the input with the id of 'input2' when the function generate() is called. It just straight up doesn't work.
Here my code snippet for test.
//Global Variables
// RegEx save input
var regexInputs = /\{(input\d+)\}/g;
//Generate
function generate(){
var doc = document.getElementById("doc");
var inputs = doc.innerHTML.matchAll(regexInputs);
var input = inputs.next();
while(input.value){
doc.innerHTML = doc.innerHTML.replace(
input.value[0], document.getElementById(input.value[1]).value);
input = inputs.next();
};
}
function addInput(){
var inputs = document.getElementById("inputs");
var idxInput = inputs.children.length + 1;
var newInput = document.createElement("div");
newInput.innerHTML = "<p><input type='text' id='input"+ idxInput +"'> {input"+ idxInput +"}</p>";
inputs.appendChild(newInput);
}
<div id = "doc" contentEditable="true">{input1} {input2}</div>
<div id = "inputs">
<input type = "text" id = "input1"> {input1}
</div>
<br>
<button onclick="generate()">Generate</button>
<button onclick="addInput()">Add Input</button>
</div>
<script src="script.js" type="text/javascript"></script>
Notes:
The regexInputs is the pattern that match all inputs and store (input\d+), so using matchAll we go througth all matches.
Every match has two index 0 has "{input#}" and 1 has "input#". With this strings we just do replaces.
Related
<html>
<head>
</head>
<body style = "text-align:center;" id = "body">
<form id = "number" method="get" name="number">
<input type="text" id="number1" name="number1" value="" />
<input type="text" id="number2" name="number2" value="" />
</form>
<p id = "GFG_UP1" style = "font-size: 16px;">
</p>
<p id = "GFG_UP2" style = "font-size: 16px;">
</p>
<button onclick = "gfg_Run()">
Convert
</button>
<p id = "GFG_DOWN1" style = "color:red;
font-size: 20px; font-weight: bold;">
</p>
<p id = "GFG_DOWN2" style = "color:red;
font-size: 20px; font-weight: bold;">
</p>
<script>
var form = document.getElementById('number');
var el_up1 = document.getElementById("GFG_UP1");
var el_up2 = document.getElementById("GFG_UP2");
var el_down1 = document.getElementById("GFG_DOWN1");
var el_down2 = document.getElementById("GFG_DOWN2");
var array1 = form.elements.number1.value;
var array2 = form.elements.number2.value;
var numberArray1 = [];
var numberArray2 = [];
for (i = 0; i < array1.length; i++)
{
numberArray1[i] = "Phone" + i + ':'+array1[i];
}
el_up1.innerHTML = "Array = [" +array1+"]";;
a = i;
for (i = 0 ; i < array2.length; i++)
{
numberArray2[i] = "Phone" + a + ':'+array2[i];
a++;
}
el_up2.innerHTML = "Array = [" +array2+"]";;
function gfg_Run(){
el_down1.innerHTML =
JSON.stringify(Object.assign(numberArray1));
el_down2.innerHTML =
JSON.stringify(Object.assign(numberArray2));
}
</script>
</body>
</html>
the following code should give output of two json arrays ["number0:34","number1:24","number2:31","number3:48"]
["number0:23","number1:43","number2:65","number3:52"]
when numbers are given input in the form but no output being shown as in the script both arrays are not able to read data by the form .
error lies in the array as if i pass directly value in array in script it runs fine
help me in debug if u can
I don't think this is a complete answer to your question, but the first thing I notice is that in your for loops, you're trying to use the .length properties of array1 and array2, which aren't actually arrays:
var array1 = form.elements.number1.value;
var array2 = form.elements.number2.value;
You're setting them to the .value properties of the two inputs, which are theoretically going to be digits, but taken as strings by the .value property, because the input type is set to "text".
So Here's what I would do instead:
var form = document.getElementById('number');
var el_up1 = document.getElementById("GFG_UP1");
var el_up2 = document.getElementById("GFG_UP2");
var el_down1 = document.getElementById("GFG_DOWN1");
var el_down2 = document.getElementById("GFG_DOWN2");
/* grab the values from those text inputs, and parse them into integers (because
they will be strings because the input type is set to "text") */
var input1 = parseInt(form.elements.number1.value);
var input2= parseInt(form.elements.number2.value);
/* I also changed the names to input1 and input2 because it's confusing to have them
labeled as 'arrays' when they're actually integers */
var numberArray1 = [];
var numberArray2 = [];
/* now just use those numerical values as your exit condition in your loops */
for (i = 0; i < input1; i++)
{
/* we're also going to use Array.push() to add vlues to the `numberarray` instead of trying to assign a value to the element at "i" */
numberArray1.push("Phone" + i + ':'+ (i+1));
}
/* I'm not 100% sure what you were trying to do here, but I'm guessing that you
actually want to show the values 'numberArray1' here instead of the value of that
first input, so we'll use the 'spread' operator to put that in there */
el_up1.innerHTML = `Array = [${...numberArray1}]`;
a = i;
for (i = 0 ; i < input2; i++)
{
numberArray2.push("Phone" + a + ':'+ (i+1));
a++;
}
el_up2.innerHTML = `Array = [${...numberArray1}]`;
function gfg_Run(){
el_down1.innerHTML =
JSON.stringify(Object.assign(numberArray1));
el_down2.innerHTML =
JSON.stringify(Object.assign(numberArray2));
This question already has answers here:
Dynamically creating a specific number of input form elements
(2 answers)
Closed 3 years ago.
I have here a div
<div id='myDiv'>
</div>
And a button with input type text
<input id='myNumber' type='text'>
<button id=myBtn''>Multiply</button>
my script to add an onclick
<script>
var myDiv = document.getElementById(''myDiv");
var myNumber =
document.getElementById(''myNumber");
var myBtn = document.getElementById(''myBtn");
myBtn.onclick = function(){
}
</script>
How can i insert 5 input type text inside myDiv if the value in myText is 5
You can get the count and use the append() to append the input to #myDIv. See the snippet below.
var myDiv = document.getElementById('myDiv');
var input = document.getElementById('myNumber');
function addInput() {
let count = parseInt(input.value);
if (!isNaN(count)) {
myDiv.innerHTML = "";
for (let i = 0; i < count; i++) {
let input = document.createElement('input');
input.type = "text";
myDiv.append(input);
}
}
}
<div id='myDiv'>
</div>
<input id='myNumber' type='text'>
<button onclick="addInput()">Multiply</button>
You can use onclick() function directly on the button element. Also, check for the negative values to prevent from adding the elements on the div.
function addElement() {
let count = document.getElementById('myNumber').value;;
if (!isNaN(count) && count > 0) {
myDiv.innerHTML = "";
for (let i = 0; i < count; i++) {
let div = document.createElement('input');
myDiv.append(div);
}
}
};
<div id='myDiv'>
</div>
<input id='myNumber' type='text'>
<button id='myBtn' onclick="addElement()">Multiply</button>
I have a sample of code that returns each value in an array, in order. I have used forEach(). Is there any way to return value in customize array.
I made some function for split text-area value to all textarea and query using text string. I am able to success. But Some Problem. Below Example.
Type to Filed1 string like:
GFSD65897542
Then Click Split Button. Output: part all value to reaming text area.
Put GF value to Input Character Filed. Output: 6589
My Question is When i put value like GF then output 6589. And when put FG then also same output 6589 instead of 8965. If any solution Pls help me out. I wish to the Character strictly follow number.
Sample of Code:
$('#output1').focus(()=>{
var a=document.querySelectorAll('textarea');
var str = $('#ccMain').val();
var first = str[0];
var second = str[1];
console.log(first," ", second)
var str='';
a.forEach(e=>e.value.includes(first)||e.value.includes(second)?str+=e.value.substr(1,e.value.length):false)
$('#output1').val(str);
})
function splitText() {
var textAreas = [];
//Put all of the textareas into an array for easy access
for(let i = 1; i <= 4; i++) {
textAreas.push(document.getElementById(`value${i}`));
}
//Read the text from text1 and split it at a new line
var text = textAreas[0].value;
var [line1, line2] = text.split(/\r?\n/)
for(let i = 0; i < 4; i++) {
var combinedText = line1.substring(i, i+1) + line2.substring(i*2, (i+1)*2)
textAreas[i].value = combinedText;
}
}
$('#output').focus(()=>{
var a=document.querySelectorAll('textarea');
var str = $('#ccMain').val();
var first = str[0];
var second = str[1];
console.log(first," ", second)
var str='';
a.forEach(e=>e.value.includes(first)||e.value.includes(second)?str+=e.value.substr(1,e.value.length):false)
$('#output').val(str);
})
<html>
<head>
<title>Test Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<label>Filed1 </label>
<textarea id="value1"></textarea>
<label>Filed2:</label>
<textarea id="value2"></textarea>
<label>Filed3:</label>
<textarea id="value3"></textarea>
<label>Filed4:</label>
<textarea id="value4"></textarea>
<button onclick="splitText()">Split!</button>
<br>
<label>Input Character:</label>
<br>
<input type="text" id="ccMain" >
<textarea id="output"></textarea>
</body>
</html>
I would use a map to put the correspondence between letter and digits
$('#output').focus(()=>{
var textareas = document.querySelectorAll('textarea');
var map = new Map(Array.from(textareas, area => [area.value[0], area.value.slice(1)]));
var str = Array.from($('#ccMain').val(), c => map.get(c)).join``;
$('#output').val(str);
});
function splitText() {
//Put all of the textareas into an array for easy access
var textAreas = [];
for(let i = 1; i <= 4; i++) {
textAreas.push(document.getElementById(`value${i}`));
}
//Read the text from text1 and split it at a new line
var text = textAreas[0].value;
var [line1, line2] = text.split(/\r?\n/);
for (let i = 0; i < 4; i++) {
var combinedText = line1.substring(i, i+1) + line2.substring(i*2, (i+1)*2)
textAreas[i].value = combinedText;
}
}
$('#output').focus(()=>{
var textareas = document.querySelectorAll('textarea');
var map = new Map(Array.from(textareas, area => [area.value[0], area.value.slice(1)]));
var str = Array.from($('#ccMain').val(), c => map.get(c)).join``;
$('#output').val(str);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Filed1 </label>
<textarea id="value1"></textarea>
<label>Filed2:</label>
<textarea id="value2"></textarea>
<label>Filed3:</label>
<textarea id="value3"></textarea>
<label>Filed4:</label>
<textarea id="value4"></textarea>
<button onclick="splitText()">Split!</button>
<br>
<label>Input Character:</label>
<br>
<input type="text" id="ccMain" >
<textarea id="output"></textarea>
Well you have to be a bit more careful in your code here, ou are defining str twice in your code block.
As far as what you want to achieve, I guess you want to go for something like
str = Array.from( a )
.filter( e => e.value.includes( first ) || e.value.includes( second ) )
.map( e => e.value.substring( 1 ) )
.join('')
this would first create an array from your nodes, using Array.from and then you can filter the values you are really interested in, after which you can take the substring of the values (you don't need the e.value.length, as this is the same as when you are just defining a startIndex in the substring method
I am trying to make a dynamic form using a javascript function, but i'm amateur on this, so i'm not sure how to collect the inputs values, considering is a dynamic function. This is the HTML part:
<div>
Amount of people: <input type="text" id="member" name="member" value=""><br />
<button id="btn" onclick="addinputFields()">Show</button>
</div>
<form action="{{ url_for('red_preferente') }}" method="post">
<div id="mydiv"/><br />
<input type="submit" value="Quote"/>
</form>
And this is the JS function "addinputFields", im calling above
function addinputFields(){
var number = document.getElementById("member").value;
for (i=0;i<number;i++){
var campo_1 = document.createElement("output");
campo_1.type = "text";
campo_1.value = " Nombre: ";
mydiv.appendChild(campo_1);
var nombre = document.createElement("input");
nombre.type = "text";
nombre.id = "name"
mydiv.appendChild(nombre);
var campo_2 = document.createElement("output");
campo_2.type = "text";
campo_2.value = " Edad: ";
mydiv.appendChild(campo_2);
var edad = document.createElement("input");
edad.type = "text";
edad.id = "age"
mydiv.appendChild(edad);
var campo_3 = document.createElement("output");
campo_3.type = "text";
campo_3.value = " Modalidad: ";
mydiv.appendChild(campo_3);
var modalidades = ["Titular","Asegurado","Dependiente"];
var listado = document.createElement("select");
listado.id = "mySelect";
for (var x = 0; x < modalidades.length; x++) {
var option = document.createElement("option");
option.value = modalidades[x];
option.text = modalidades[x];
listado.appendChild(option);
}
mydiv.appendChild(listado);
}}
I'm trying to use "document.getElementById('mydiv').value" to have the input value, but i receive none value
I need each one of the input value of vars: nombre, edad, listado. Any idea?
Thanks a lot for help!
There are many possible causes of your problem. Because inputs are strings you should cast your input using
var number = parseInt(document.getElementById("member").value);
The problem seems to lie around the createElement() statements. Your <variable name>.value isn't right. That only works for the value of an <input> or <textarea>. Simpler would have been to get rid of the createElement()s. The
var campo_1 = document.createElement("output");
campo_1.type = "text";
campo_1.value = " Nombre: ";
mydiv.appendChild(campo_1);
lines could have easily been re-written
mydiv.innerHTML += "Nombre: ";
so I have this HTML code:
<form method="get" action="#" id="startForm">
<input type="text" name="period" id="period" placeholder="The number of days"/>
<input type="submit" name="submit" value="submit" id="startSubmit"/>
</form>
and this is the JavaScript code:
var btnSubmit = document.getElementById('startSubmit');
btnSubmit.addEventListener('click', function (e) {
e.preventDefault();
var myForm = document.createElement('form');
var period = document.getElementById('period').value;
for(var i = 0; i < period ; i++){
var input0 = document.createElement('input');
input0.setAttribute('type', 'text');
input0.setAttribute('placeholder', 'The count of tasks');
input0.setAttribute('style', 'margin: 10px');
input0.setAttribute('id', 'taskDone'+i);
input0.setAttribute('onchange', 'myFunction()');
document.body.appendChild(input0);
myForm.appendChild(input0);
document.body.appendChild(myForm);
function myFunction(){
var taskDone = document.getElementById('taskDone').value;
var newForm = document.createElement('form');
for(var j = 0; j < taskDone ; j++){
var input1 = document.createElement('input');
input1.setAttribute('type', 'text');
input1.setAttribute('id', 'time'+i);
document.body.appendChild(input1);
newForm.appendChild(input1);
document.body.appendChild(newForm);
};
};
};
console.log(myForm);
});
so my problem is that in the function when I try to take the value from the generated DOM element it will reset the page what I want to do is to take the number that is going to be placed into the input and make as many new inputs textboxes as it's the number is typed (it takes the number from the generated dom element and creates new dom element)
You are just doing the wastage of memory you must not place the definition of function inside a loop. You must place it outside the block or a separate definition. You should only call the function inside loop. However, inside your
myFunction()
you are trying to get the id of an element that doesn't exist as you have created the element with id = 'taskdone'+i. So you must also append 'i' inside the myFunction() to get element ids.
But I will suggest you there is a clean way to this task is just pass the element inside myFunction on changing the element value.
Use something like that :
`input0.setAttribute('onchange', 'myFunction(this)');`
Then you would no longer require the element id to get its value.
And create your myFunction like this:
function myFunction(element) {
var id = element.id;
var taskDone = element.value;
var i = id.split('taskDone')[1];
var newForm = document.createElement('form');
for (var j = 0; j < taskDone; j++) {
var input1 = document.createElement('input');
input1.setAttribute('type', 'text');
input1.setAttribute('id', 'time' + i);
document.body.appendChild(input1);
newForm.appendChild(input1);
document.body.appendChild(newForm);
};
};
See the snippet for more details and help:
var btnSubmit = document.getElementById('startSubmit');
console.log(btnSubmit);
btnSubmit.addEventListener('click', function (e) {
e.preventDefault();
var myForm = document.createElement('form');
var period = document.getElementById('period').value;
for(var i = 0; i < period ; i++){
var input0 = document.createElement('input');
input0.setAttribute('type', 'text');
input0.setAttribute('placeholder', 'The count of tasks');
input0.setAttribute('style', 'margin: 10px');
input0.setAttribute('id', 'taskDone'+i);
input0.setAttribute('onchange', 'myFunction(this)');
document.body.appendChild(input0);
myForm.appendChild(input0);
document.body.appendChild(myForm);
};
console.log(myForm);
});
function myFunction(element){
var id = element.id;
var taskDone = element.value;
var i = id.split('taskDone')[1];
var newForm = document.createElement('form');
for(var j = 0; j < taskDone ; j++){
var input1 = document.createElement('input');
input1.setAttribute('type', 'text');
input1.setAttribute('id', 'time'+i);
document.body.appendChild(input1);
newForm.appendChild(input1);
document.body.appendChild(newForm);
};
};
<form method="get" action="#" id="startForm">
<input type="text" name="period" id="period" placeholder="The number of days"/>
<input type="submit" name="submit" value="submit" id="startSubmit"/>
</form>
You need to define the function myFunction() as myFunction = function(){..}
Secondly the id attribute needs to be unique. Hence use
input0.setAttribute('id', 'taskDone'+i); to set the id and
input0.setAttribute('onchange', 'myFunction("'+i+'")');
to call the function.
Similarly access the id as
var taskDone = document.getElementById('taskDone'+i).value;
Try the fiddle - https://jsfiddle.net/djbb79d8/