I want generate textboxes dynamically according to user input. If user enter the integer value in the textbox, if he/she enter 5 i want generate 5 textboxes. This code is working in Firefox but not working in IE and Netscape; please help me how to do this or point out any other mistake in this code to me. Also, the technology we are using is Struts 2.
Please help me.
JavaScript code:
function generate()
{
var tot = document.getElementById("totmob").value;
var tbl = document.getElementById("sim");
for(var i =1;i<=tot;i++)
{
tbl.innerHTML = 'Mobile No'+i+' <input type="text" size = "20" maxlength= "20" name= hoardingregister.mobileno> <br> \n';
}
HTML code:
<td>
<s:textfield id="totmob" label="Total Mobile Number" />
<td>
<td>
<input type="button" value="ADD" onclick="generate()"/>
</td>
</tr>
</table>
<div id="sim">
</div>
for(var i =1;i<=tot;i++)
{
tbl.innerHTML = 'Mobile No'+i+' <input type="text" size = "20" maxlength= "20" name= hoardingregister.mobileno> <br> \n';
}
should be
for(var i =1;i<=tot;i++)
{
tbl.innerHTML += 'Mobile No'+i+' <input type="text" size = "20" maxlength= "20" name= hoardingregister.mobileno> <br> \n';
}
because you need to append to the inner HTML, rather than replace it.
You've also used a <td> instead of a </td>
Can you try something else than InnerHtml - you can try this:
use GetElementByID to get the element you want to add text boxes to
remove any existing child items if required
Add textboxes as child items to the selected node
From your javascript code, it looks you should use following code:
tbl.innerHTML +=
instead of
tbl.innerHTML =
inside the for loop.
The code below works perfect for me in IE as well as Firefox. When you say It's nt working, what do you mean ?
function generate()
{
var tot = document.getElementById("totmob").value;
var tbl = document.getElementById("sim");
for(var i =1;i<=tot;i++)
{
tbl.innerHTML = tbl.innerHTML +'Mobile No'+i+' <input type="text" size = "20" maxlength= "20" name= hoardingregister.mobileno> <br> \n';
}
}
</script>
<body>
<table>
<tr>
<td>
<span>Total Mobile Number </span>
<input type="text" id="totmob" />
<td>
<td>
<input type="button" value="ADD" onclick="generate()"/>
</td>
</tr>
</table>
<div id="sim">
</div>
</body>
</html>
add a unique identifier to the name of the input or a unique id to it.
like:
for(var i =1;i<=tot;i++)
{
tbl.innerHTML += 'Mobile No'+i+' <input type="text" size = "20" maxlength= "20" name= hoardingregister.mobileno'+i+'> <br> \n';
}
or you put a id into it like:
id="input"+i
But if you are changing the value in the text box without refreshing the page more text boxes are adding after the previously added text box. But it is wrong whenever we change the value in the text box only tat number of new text boxes should be added instead of keeping the previous text boxes too. Can you please change the coding according to the conditions I said.
Related
Unable to get a While Loop with function is not working with onclick() function. This is the HTML code with the JavaScript function:-
I would like a test a While Loop function, where I enter a random name in a text field and click the Show Me and the resulting output - each letter of the full name should appear vertically downwards in a column. However, when I click the onclick function, there is no output result.
function verticalFullName() {
var fullname = document.getElementById("fullname").value
if (fullname == "") { //Fred Smith
document.getElementById("output").innerHTML = "Please input a name.";
} else {
var i = 0;
while (i < fullname.length) {
document.getElementById("output").innerHTML += fullname[i] + "<br>";
i++; //i = i + 1
}
}
}
<tr>
<td class="label_col">Full Name:</td>
<td class="input_col"><input name="fullname" id="output" type="text" onblur="verticalFullName();"></td>
</tr>
<button onclick="verticalFullName()">Show me</button>
<p id="fullname"></p>
Your input id is "output" not "fullname"
You have the input field name="fullname" and id="output"
Your best solution is probably to swap the id of fullname and output though to get the desired result!
<tr>
<td class="label_col">Full Name:</td>
<td class="input_col"><input name="fullname" id="fullname" type="text" onblur="verticalFullName();"></td>
</tr>
<button onclick="verticalFullName()">Show me</button>
<p id="output"></p>
JSFiddle with the code: http://jsfiddle.net/wxLa80od/
I have a html page which is looks like:
<form action="cvformphp.php" method="post">
<table id="cvtable">
<tr><td><h2>Personal Info</h2></td></tr>
<tr><td>Name* </td> <td><input type="text" name="name"></td></td>
<tr><td>Email* </td><td><input type="Email" name="email"></td></tr>
<tr><td><h2>Experiences</h2></td></tr>
<tr><td>Job role </td><td><input type="text" id="role1" name="role1"></td> <td>Company name</td><td><input type="text" id="comp1" name="comp1"></td </tr>
<input type="text" hidden="hidden" value="1" id="countexp" name="countexp"/>
<tbody id="exp" name="exp"></tbody>
<tr><td></td><td><input type="button" id="2" value="+ Add More" onclick="addExp()"/></td></td></tr>
</table>
</form>
with javascript code
<script>
var countBox =2;
function addExp()
{
document.getElementById("countexp").value= countBox;
document.getElementById("exp").innerHTML +="<br/><tr><td>Job role</td><td>
<input type='text' id='role"+ countBox +"' name='role"+ countBox+"'/></td>
<td>Company name</td><td><input type='text' name='comp"+ countBox +"'
id='comp"+countBox +"''/> </td></tr>";
countBox += 1;
}
</script>
The code is running well but the problem is when I click "Add more" button the dynamic added fields is getting empty!
I want to fill all data in the form so I can pass them to php file.
Could someone perhaps tell me please how I can not clear the fields?
Thanks in advance.
When using innerHtml, you ALWAYS replace the content with the newly defined content, even if you use +=. That's why your dynamic content is empty after each click on the button.
I will provide 2 solutions for this problem. One of them requires the use of jQuery, the other doesn't (but is more complicated):
Solution 1 (WITH jQuery)
function addExp()
{
document.getElementById("countexp").value= countBox;
$("#exp").append("<tr><td>Job role</td> \
<td><input type='text' id='role"+ countBox +"' \
name='role"+ countBox+"'/></td><td>Company name</td>\
<td><input type='text' name='comp"+ countBox +"' \
id='comp"+countBox +"''/> </td></tr>");
countBox += 1;
}
jsFiddle: http://jsfiddle.net/wxLa80od/4/
Solution 2 (WITHOUT jQuery)
function addExp()
{
document.getElementById("countexp").value= countBox;
var newChild = document.createElement("tr");
document.getElementById("countexp").value= countBox;
// Create an empty <tr> element and add it to the 1st position of the table:
var row = document.getElementById("exp").insertRow(-1);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
// Add some text to the new cells:
cell1.innerHTML = "Job role";
cell2.innerHTML = "<input type='text' id='role"+ countBox +"' name='role"+ countBox+"'/>";
cell3.innerHTML = "Company name";
cell4.innerHTML = "<input type='text' name='comp"+ countBox +"'id='comp"+countBox +"''/>";
countBox += 1;
}
jsFiddle: http://jsfiddle.net/wxLa80od/2/
Also a quick note: do NOT use <br/> in between two rows <tr>, it can create a mess really quickly. Please use css for this (example: margin-bottom: 15px;)
innerHTML does not get the value inputted from keyboard. You may use appendChiled. In that case you should create element using createElement statement. It is easier to use jquery. Try following code
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
var countBox =2;
function addExp()
{
document.getElementById("countexp").value= countBox;
$("#exp").append("<br><tr><td>Job role</td><td><input type='text' id='role"+ countBox +"' name='role"+ countBox+"'/></td><td>Company name</td><td><input type='text' name='comp"+ countBox +"' id='comp"+countBox +"''/> </td></tr>");
countBox += 1;
}
</script>
</head>
<body>
<form action="cvformphp.php" method="post">
<table id="cvtable">
<tr><td><h2>Personal Info</h2></td></tr>
<tr><td>Name* </td> <td><input type="text" name="name"></td></td>
<tr><td>Email* </td><td><input type="Email" name="email"></td></tr>
<tr><td><h2>Experiences</h2></td></tr>
<tr><td>Job role </td><td><input type="text" id="role1" name="role1"></td> <td>Company name</td><td><input type="text" id="comp1" name="comp1"></td ></tr>
<input type="text" hidden="hidden" value="1" id="countexp" name="countexp"/>
<tbody id="exp" name="exp"></tbody>
<tr><td></td><td><input type="button" id="2" value="+ Add More" onclick="addExp()"/></td></td></tr>
</table>
</form>
</body>
</html>
According to answer of this question I agreed. But! we can do the needful for the required/expected result as below and also can make your own stuff for the expected/required result if you know JavaScript well.
function getInputValues(container){
if(!(container instanceof Node) || !(container instanceof HTMLElement)){
container = document.querySelector(container);
}
let values = {};
container.querySelectorAll("INPUT").forEach((el)=>{
values[el.name] = el.value;
});
return values;
}
function setInputValues(container, values){
if(!(container instanceof Node) || !(container instanceof HTMLElement)){
container = document.querySelector(container);
}
Object.keys(values).forEach((key)=>{
container.querySelector("INPUT[name='"+key+"']").value = values[key];
});
}
Before the document.getElementById("exp").innerHTML += you have to get the values and after the added/updated html you have to set the values for the same inputs and if you want to use input name as array then you can set the index values also and also can change the input attribute from name to id or any other unique attribute from the function of getInputValues to make everything woks perfectly.
I wrote this code for my own project and you also can make your own if required otherwise it'll help's you
I would like to select all the contents of the text-boxes when a user clicks on it. But, since my document contains almost 5 text-boxes, instead of giving each text-box an ID selector or onfocus attribute, I would like to select all the text-boxes.
For example: var x = document.getElementsByTagName("p");
The above code selects all the paragraphs in a document. So, I need a similar code for all textboxes. I have tried replacing input and input[type=text] Nothing worked.
Try this out:-
http://jsfiddle.net/adiioo7/zvgHx/
JS:
var x = document.getElementsByTagName("INPUT");
var y = [];
var cnt2 = 0;
for (var cnt = 0; cnt < x.length; cnt++) {
if (x[cnt].type == "text") y.push(x[cnt]);
}
alert("Total number of text inputs: " + y.length);
HTML:
<input type="text" id="input1" value="input1"></input>
<input type="text" id="input2" value="input2"></input>
<input type="text" id="input3" value="input3"></input>
<input type="text" id="input4" value="input4"></input>
<input type="text" id="input5" value="input5"></input>
So, array y will hold all inputs with type as text.
Use jQuery: $('input[type=text]') That will do the trick.
http://jquery.com/
I have this form.
<table><tr><td>
<FORM>
<label> ID </label></td>
<td>
<input type=text id="inputp1_id" size=24 class="text">
</td></tr>
<tr><td>
<label>Type</label></td><td><select id="inputp1_type" name="inputp1_type"><option value="text">Text</option><option value="integer">Integer</option><option value="float">Float</option><option value="list_values">List of values</option>
<option value="range">Range</option><option value="selection_collapsed">Selection (collapsed)</option><option value="selection_expanded">Selection (expanded)</option><option value="subimage">Subimage selection</option>
<option value="polygon">Polygon selection</option><option value="horizontal_separator">Horizontal separator</option></select>
</td></tr>
<tr><td> <label > Description</label></td> <td><input type=text id="inputpi_description" size=24 class="text"> </td><!--style=" width:300px; height:20px;"-->
</tr>
<tr><td> <label>Value</label></td><td> <input type="text" name="inputp1_value" id="inputp1_value" class="text" size=24></td></tr>
<tr><td> <label > Info (help)</label></td><td>
<input type=text id="input1_value" size=24 class="text"></td></tr>
<tr><td><label > Visible?</label></td><td><input type="checkbox" name="inputp1_visible" id="inputp1_visible"></td></tr></table>
<!--</form>--></div>
But (it's possible?) can create the id's input box?
Because the variable these are "numbered".
For example the first id in the form is inputp1_id but the number i want use how variable.
It's possible create the id with the Javascript o Jquery?
l=3
Id='inputp' +l+'_id'
After this create the input text has the id=inputp3_id
Here is one example on how to generate html contents dynamically with jquery and javascript. Both methods, although they look similar, give a bit different results: jquery generates one additional <tbody> tag, while javascript inserts the new rows directly to <table>. I recommend you to inspect the result in the Firefox's DOM Inspector by pressing Ctrl+Shift+I. IT's very handy and effective tool. And here is the algorythm:
var i=0; // this is simple counter
function generate_row_dynamically_in_jquery() {
i++;
var new_row = $('<tr/>');
var new_cell1 = $('<td>ID <input type="text" name="inputp'+i+'_id" id="inputp'+i+'_id" size="24" class="text"/></td>');
var new_cell2 = $('<td>Visible? <input type="checkbox" name="inputp'+i+'_visible" id="inputp'+i+'_visible"> </td>');
new_row.append(new_cell1).append(new_cell2);
$('#table1').append(new_row);
}
function generate_row_dynamically_in_javascript() {
i++;
var new_row = document.createElement('tr');
var new_cell1 = document.createElement('td');
new_cell1.innerHTML = 'ID <input type="text" name="inputp'+i+'_id" id="inputp'+i+'_id" size="24" class="text"/>';
var new_cell2 = document.createElement('td');
new_cell2.innerHTML = ' Visible? <input type="checkbox" name="inputp'+i+'_visible" id="inputp'+i+'_visible">';
new_row.appendChild(new_cell1);
new_row.appendChild(new_cell2);
document.getElementById('table1').appendChild(new_row);
}
& #jsfiddle
I have this code in my page. with two textboxes and one textarea.
<fieldset>
<legend><b>Search Criteria</b></legend>
<table>
<tr>
<td>
Find Text:
<input type="text" style="width:150px" id="txtFind"/>
<input type="button" id="btnfind" value=" Find "/>
</td>
</tr>
<tr>
<td>
Replace Text:
<input type="text" style="width:150px" id="Text1"/>
<input type="button" value="Replace Text" id="btnReplace"/>
</td>
</tr>
</table>
</fieldset>
<br />
<fieldset>
<legend><b>Result</b></legend>
<table>
<tr>
<td>
<%:Html.TextArea("Hello ASP.NET here")%>
</td>
</tr>
</table>
</fieldset>
in my first textbox if I enter "here" then I click the Find button it should find the text
if I enter "MVC" on second text box click Replace Text button it should replace the text "here" to "MVC" ("Hello ASP.NET MVC").,
Please can any one help me out? How to do this with javascript or jquery?
Thanks
Asuming your textarea has id="textarea", you should do this:
$("#btnfind").click(function(){
var find = $("#txtFind").val();
var replace = $("Text1").val();
var text = $("#textarea").val();
while(text.indexOf(find) >= 0){
text = text.replace(find, replace);
}
$("#textarea").val(text);
});
(Note that we're not using Regular expressions to replace because the text to find is dynamic so we'd have to escape the 'find' text).
Hope this helps. Cheers
this should get you started: http://jsfiddle.net/DD7t5/
using jQuery and a highlight jQuery plugin
var $result = $('#result'),
$txtFind = $('#txtFind'),
$txtReplace = $('#txtReplace');
$('#btnFind').click(function() {
$result.removeHighlight();
var findValue = $txtFind.val();
if (findValue.length > 0) {
$result.highlight(findValue) // find and highlight
}
});
$('#btnReplace').click(function() {
$result.text($result.text().replace(eval('/' + $txtFind.val() + '/gi'),
$txtReplace.val())); // replace
});