i'm trying to use .innerHTML and appendChild to generate a new input with a value that is equal to a 's value. However it doesn't seem to be working and I don't understand why..
Here is my JS code:
function generateClass() {
var value = document.getElementById("Classes").value;
var originalDiv = document.getElementById("selectDiv");
var newDiv = document.createElement("div");
newDiv.innerHTML = "<input type='text' name='class' value='" + value + "' disabled />"
originalDiv.appendChild(newDiv);
}
The select is simply:
<select name="class" id="Classes">
can anyone tell me what i'm doing wrong?
Thanks
Sorry Guys,
I've fixed my problem, i'd been an idiot with some earlier JS code.
Sorry for wasting your time.
Related
I'm having an HTML page with an input line and a submit button.
I'm wanting to automatically generate a new line under the line if we change the first line content.
Before searching for this, I just made a second button named "Add new line" (explicit).
HTML part
print '<input type="button" id="addLineButton" value="Ajouter ligne"/>';
print '<input type="submit" id="valider" value="Rechercher"/>';
JS part
$("#addLineButton").click(function(e){
e.preventDefault();
var newLine = "";
document.getElementById("nbLines").textContent = Number(document.getElementById("nbLines").textContent) + 1;
var nbLines = Number(document.getElementById("nbLines").textContent);
newLine += "<input type='text' id='line"+nbLines+"' placeholder='Ref article'/><input type='number' id='qty"+nbLines+"' placeholder='Qté étiquettes'/><br>"
$("#zoneOF").append(newLine);
});
$("#zoneOF") is a div, and nbLines is a label which is used to count how many lines we already have.
I'm then searching (but not founding because I don't know how to formulate it clearly) what can I do to remove my addLineButton and automate the line adding (surely with on change event).
I wouldn't be surprised if you didn't understood sthg, then don't hesitate to ask me to reformulate.
Thank you in advance.
Ok I resolved it, by simply making my code recursive.
$(document).ready(function(){
var newLine = "";
document.getElementById("nbLines").textContent = Number(document.getElementById("nbLines").textContent) + 1;
var nbLines = Number(document.getElementById("nbLines").textContent);
newLine += "<input type='text' id='line"+nbLines+"' placeholder='Ref article'/><input type='number' id='qty"+nbLines+"' placeholder='Qté étiquettes'/><br>"
$("#zoneOF").append(newLine);
$('#line'+nbLines).on('change', function() {
setNewLine();
});
function setNewLine() {
var newLine = "";
document.getElementById("nbLines").textContent = Number(document.getElementById("nbLines").textContent) + 1;
var nbLines = Number(document.getElementById("nbLines").textContent);
newLine += "<input type='text' id='line"+nbLines+"' placeholder='Ref article'/><input type='number' id='qty"+nbLines+"' placeholder='Qté étiquettes'/><br>"
$("#zoneOF").append(newLine);
$('#line'+nbLines).on('change', function() {
setNewLine();
});
}
I make a new line at the document creation, and I put the on change event on it. The on change calls a function which creates a new line, and the function calls herself when the on change event is triggered on the new line.
Different behavior is occurring in different browser for HTML <input> attribute. I have generated input attribute from Javascript by clicking a button. Checkbox is visible in Firefox browser but not showing in Chrome browser. The generated HTML code is
<input id="0" class="col-sm-1" onclick="checkImage(this)" name="images[0].isActiveDefault" type="checkbox">
FireFox Browser
Chrome Browser
Any help or suggestion to resolve this problem will be appreciate.
EDIT added JavaScript Code
function addImagerow(tableId) {
var rowValue = parseInt(document.getElementById('image-add').value);
var tableData = "<tr><td><input id = '"
+ rowValue
+ "' class='col-sm-1' onclick='checkImage(this)' name='images["
+ rowValue
+ "].isActiveDefault' type='checkbox'></td><td>Default</td>"
+ "<tr>";
document.getElementById('image-add').value = rowValue + 1;
$(tableData).appendTo(tableId);
}
After having waste a lot of time I found the issue. Though the issue is silly, I have learned a lesson from it. Ok, the issue was on the design. From the input field I remove the class='col-sm-1'. And its working fine.
I added the bootstrap css for input field but not for table data field.
var tableData = "<tr><td><input id = '"
+ rowValue
+ "' class='col-sm-1' onclick='checkImage(this)' name='images["
+ rowValue
+ "].isActiveDefault' type='checkbox'></td><td>Default</td>"
+ "<tr>";
TO
var tableData = "<tr><td><input id = '"
+ rowValue
+ "onclick='checkImage(this)' name='images["
+ rowValue
+ "].isActiveDefault' type='checkbox'></td><td>Default</td>"
+ "<tr>";
And my analysis says that I when I added the col-sm-1 into the input field the <td> is not expanding that's why the input field is hide.
I have a script below that adds an element to my form, another text input field. It adds the new text input field but if I type something into the first one then add a new field it removes the input text from the first one.
I cant see where im going wrong here, im fairly new to JavaScript so please go easy :)
function addAnother() {
var id = 1;
var elemebt = document.getElementById('quest');
var number = elemebt.getElementsByTagName('*').length;
var add = number + 1;
var element = '<input type="text" name="question[]" id="quest'+ add +
'" placeholder="Example: What previous experiance do you have?" class="form-control" id="cloan"><a id="name'+
add +'" onClick="removeEle('+ add +')">Remove</a>';
document.getElementById('quest').innerHTML += element;
}
In JavaScript, the following two statements are practically identical:
str = str + ' more text ';
str += ' more text ';
The key point here is that in the end, the value of str is COMPLETELY OVERWRITTEN.
In your case, that means the innerHTML of the "quest" element is overwritten and the browser completely recreates it's children nodes, thus reseting any state and input values.
To overcome this, you can use the appendChild method but you first need to create the element to append. The easiest way to do that given you have a string of your HTML is to inject that string into a dummy element using the innerHTML property:
var target = document.getElementById('target');
var tDiv = document.createElement('div');
var htmlString = '<input type="text"></input>';
tDiv.innerHTML = htmlString;
target.appendChild(tDiv.children[0]);
<div id="target">Keep my content safe!</div>
I have a script which adds a new form when a button is clicked to a HTML page with the code as following:
<script>
var counter = 1;
var limit = 10;
function addInput(divName){
if (counter == limit) {
alert("Max number of forms, " + counter );
}
else
{
var newdiv = document.createElement('div');
newdiv.innerHTML = "<form name='frmMain' action='prelucrare.php' method='POST'><div class='slot' id='dynamicInput' align='center'> Masina " + (counter +1 ) + "<table border='1'><tr><td align='right'><label for='marca'>Marca:</label></td><td colspan='2' align='left'>"
+ "<select id='marc' name='marc'><option selected value=''></option>"
+ "<tr><td align='right'><label for='motorizare1'> Motorizare:</label></td> <td><input type='range' name='motorizare1[]Input' min='0.6' max='5' step='0.1' value=2 id=motor1 oninput='outputUpdate1(value)'></td><td><output for=motorizare1 id=moto1>2</output></td></tr>"
+ "</div></form>"
;
}
document.getElementById(divName).appendChild(newdiv);
counter++;
}
</script>
<input type="button" value="Adauga" onClick="addInput('dynamicInput');">
And I have the script bellow which changes the value from the slider.
<script>
function outputUpdate1(mot1) {
document.querySelector('#moto1').innerHTML = mot1;
}
</script>
My problem is that the JS code only changes the input for the first form, even if the slider is activated from another form. In short, the slider should return the value in the form from which it is activate; not only in the first form added.
Thank you!
Going along with my comment, the problem is stemming from the id value being the same across all of your output elements (moto1). You've actually got all the variables you need to make them unique since you're tracking a count of the number of forms on the page (your counter variable). You can use this in place of your current output HTML:
"<input type='range' name='motorizare1[]Input' min='0.6' max='5' step='0.1' value=2 id='motor_" + counter + "' oninput='outputUpdate1(value)'/>"
"<output for=motorizare1 id='moto_" + counter + "'>"
You can update your function to parse out the correct index for the output you want to update since they should be in sync if you use the HTML above:
function outputUpdate1(mot) {
// Get the counter part of the range element's id
var index = mot.id.split('_')[1];
document.querySelector('#moto_' + index).innerHTML = mot;
}
You may need to make some tweaks to code you haven't provided in the question, but that's one way of making the id values unique and how to access them without knowing the exact id ahead of time.
i use a javascript to add a input box in my table as below:
var inputtopik = "topik" + 1;
$("#titleinput tbody").append("<tr><td> Topik " + topikno +
" : </td><td><input type='text' id='" +
inputtopik +"' style='WIDTH:498px;' ></td></tr>");
and then try to get the value by this
var topik = document.getElementById('inputtopik').value;
but got an error state
Uncaught TypeError: Cannot read property 'value' of null
i wonder why? maybe it cannot find the input box that ive just add? how to fix?
help :(
the value of inputtopik is "topik1". So you should do
var topik = document.getElementByID(inputtopik).value;
without the single quotes.
if you are using jQuery... one other way to get the value of input text is this:
var topik = $('#topik1').val();