We Keep Coding

Use .innerHTML to define a input field with ng-model

I want to create multiple input fields in a for-loop and assign a unique ng-model name to each field so I can use the values later.
Here is how I did it. inputmap is a map.
<script cam-script type="text/form-script">
for (let i=0;i<3;i++){
var name = "inputmap.item"+ i.toString(); // inputmap.item0, inputmap.item1, inputmap.item2, etc
document.getElementById("inputs").innerHTML += "<input type='text' ng-model='" + name + "' required/><br>"
}
</script>
<div id="inputs"></div>
But when I look at the $scope.inputmap, it's empty.
When I hardcode the input fields like:
<div id="inputs">
<input type='text' ng-model='inputmap.item0' required/><br>
<input type='text' ng-model='inputmap.item1' required/><br>
<input type='text' ng-model='inputmap.item2' required/><br>
</div>
I was able to get the values I entered in the fields. I am new to HTML and any help/hints is appreciated.

First you have += on document.getElementById("inputs").innerHTML += "<input type='text' ng-model='" + name + "' required/><br>" and can be changed to just =
There are to ways to do this. I think if you change document.getElementById("inputs").innerHTML += "<input type='text' ng-model='" + name + "' required/><br>" to document.getElementById("inputs").innerHTML = `<input type='text' ng-model="${name}" required/><br>` then that will add it in correctly. Never done this though and might not work where you can do my second way of doing it:
for(let i = 0; i < 3; i++) {
let input = document.createElement('input') //Creates input element
let wrapper = document.getElementById('inputs') //Gets the div element
let name = `inputmap.item${i.toString()}` //Gets the name
input.setAttribute('ng-model', name) // Sets 'ng-model' attribute to name
wrapper.appendChild(input) //Sets 'wrapper' as 'input' parent
}
Hope this helps!

How to set html id to a variable

$('#submit').click(
function (event) {
event.preventDefault();
let number = 0;
$("#tasklist").append("<li id='addedtask number'>" + $('#task_to_add').val() + "</li>" +
"<form action='index.html' method='get'> <input type='submit' id='remove index' value='remove'></input> </form>");
}
);//end of submit
I am adding this button dynamically with jquery and I would like to increment the id of this button, how would I do this?
I would like it to be equivalent of this after the first time it should be:
<input type='submit' id='remove index 1' value='remove>
and after second:
<input type='submit' id='remove index 2' value='remove>
If I try to put a variable int the id like 'remove index myvar' i think it will just treat myvar like a string. Is there a way to get to be treated like a variable?
Please advise and thanks.

var currentId = 1;
$("#submit").click(function(event) {
event.preventDefault();
$("#tasklist").append(
"<li id='addedtask'>" +
$('#task_to_add').val() +
"</li>" +
"<form action='index.html' method='get'>" +
"<input type='submit' id='remove-index-" + currentId++ + "' value='remove'></input>" +
"</form>"
);
});

HTML Dynamic Form empty array value

I have some dynamic inputs that are supposed to insert into an array value then passed to my PHP forloop so I can insert into my MYSQL DB.
I am having an issue where my array is coming up empty.
At first, I was getting an error saying invalid object passed to the array. I added
if (is_array($faqQuestions) || is_object($faqQuestions)) {
}
arround my foreach loop to figure out that is not getting the correct values.
So I know my issue has to be in my form.
So the first visible input is as follows...
<div id="dynamicInput">
<input name="faqQuestions[]" type="name" class="form-control seller input" placeholder="Question" value="<?php echo $question ?>">
<textarea class="about-textarea" name="faqAnswers[]" rows="3" placeholder="Answer"><?php echo $answer; ?></textarea>
</div>
<input class="add-another-button" type="button" value="Add Another +" onClick="addInput('dynamicInput');">
So the two input names are faqQuestions[] and faqAnswers[].
If the user click adds another, the same form inputs should appear with the same name as an array.
var counter = 1;
var limit = 5;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Faq " + (counter + 1) + " <br><input name='faqQuestions[]' type=\"name\" class=\"form-control seller-input\" placeholder=\"Question\"\n" +
" value=\"<?php echo $question ?>\">\n" +
" <textarea class=\"about-textarea\" name='faqAnswers[]' rows=\"3\"\n" +
" placeholder=\"Answer\"><?php echo $answer; ?></textarea>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
And the PHP that is capturing the array
$faqQuestions = $_POST["faqQuestions"];
if (is_array($faqQuestions) || is_object($faqQuestions)) {
foreach ($faqQuestions as $question) {
//I have tried assigning each variable like $q1 = $question[0]
}
}
I have been trying to figure out why my array is empty but I just dont see it.
Hope someone out there can help! Thanks

How to put required validation in javascript innerhtml input box

function edit_row(id)
{
document.getElementById("monthly_val"+id).innerHTML="<input type='text' id='monthly_text"+id+"' value='"+monthly+"' onkeyup='this.value=Comma(this.value)' 'required'>";
}
The above code is an example of my input field and i want to put required validation so that the data will not be saved when the field is empty.

Try this...
var a = document.getElementById("monthly"+id),
b = document.createElement("INPUT");
b.setAttribute("pattern", "regexp string");
b.setAttribute("formnovalidate", " false");
b.setAttribute("type", "text");
//add other attributes
a.appendChild(b);
/*
Just replace the regexp string*/

if you have textbox id then you can easily find and then you can check input empty or not. you need use this process before saving data.
document.getElementById("monthly_val" + id).innerHTML = "<input type='text' id='monthly_text" + id + "' value='" + monthly + "' onkeyup='this.value=Comma(this.value)'>";
if ($('#monthly_text' + id + '').val() == '') { alert('wala'); }
use this. it helps you

jquery uncertain error?

i am using this code to access all the hidden elements from a form:
function get_hidden_val(ids,form_id)
{
var get_check_val = document.getElementById(ids);
if(get_check_val.checked){
var div = $('<div></div>')
.appendTo('form#bulk_add_cart')
.attr('id',"bulk_"+form_id)
$("form#" +form_id).find('input[type="hidden"]').each(function(){
var value =$(this).val();
var name = $(this).attr("name");
var tags = "<input type='hidden' value='" + value + "' name='"+name+"'>";
$('div#' +form_id).append(tags);
});
}
else
{
$("form#bulk_add_cart").find('div#' +form_id).remove();
}
}
My problem is when I click the first checkbox it give me the result but when i click the second checkbox it doesn't and also the another problem is when i click first checkbox it shows total hidden elements but when i second time checked it, it show 4 less ?
Please suggest a solution.
Thanks

#user704302: Missing >, update var tags to --
var tags = "<input type='hidden' value='" + value + "' id='"+id+"'>";