How to created textbox dynamically , when i click add button.
after i put the input field in the text box.
how to validate the dynamically created textbox using javascript or jquery.
<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>
<script type="text/javascript">
var intTextBox=0;
//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement(){
intTextBox = intTextBox + 1;
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML = "Text "+intTextBox+": <input type='text' id='" + intTextBox + "' name='" + intTextBox + "'/>";
contentID.appendChild(newTBDiv);
}
</head>
<body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
<p><a href="javascript:addElement();" >Add</a>
<a href="javascript:removeElement();" >Remove</a>
</p>
<div id="content"></div>
<input type="button" value="submit"/>
</body>
</html>
after when i click submit button all textbox validation must be done....
Try to copy this and test. And let's tell me that is as you need.
<!DOCTYPE HTML>
<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>
<script type="text/javascript">
var intTextBox = 0 ;//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement(){
intTextBox += 1
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML = "Text "+intTextBox%x+": <input type='text' id='%2+ intTextBox + "' name='" + intTextBox + "' />";
contentID.appendChild(newTBDiv);
}
function removeElement(){
var element = document.getElementById("strText"+intTextBox);
console.log(element);
while (element.firstChild) {
element.removeChild(element.firstChild);
}
intTextBox -=1;
}
</script>
</head><body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
<p><a href="javascript:addElement()" >Add</a>
<a href="javascript:removeElement();" >Remove</a>
</p>
<div id="content"></div>
<input type="button" value="submit"/>
</body>
</html>
See more at My jsFiddle
Note : working with FireFox & Chrome
create textbox:
var textbox = $('<input></input>');
textbox.setAttr(type, 'text');
add to container:
$('#button').onclick(function() {
$('#container').append(textbox);
});
validate:
$('#submit').onclick(function() {
if(!$('#textbox').val()) {
alert('input empty');
}
});
You could use this jQuery Validation Plugin. The demo shows that is can validate textboxes.
that's alot of questions rolled into one. You can create and insert elements in jquery with code like the following:
$('<input />', {type : 'text'}).appendTo($(body));
As far as validation is concerned, it would depend on when you want to do it. on keypress, on submit, on blur, etc. If you want a blanket validate for all inputs you'll need to delegate it to some parent element since these textboxes are created after the page is loaded:
$('body').delegate('input','keyup', function(){
/*Do stuff*/
});
But you could also attach the validation when you create the element if it needs to be specific to the field you create.
$('<input />', {type : 'text'}).bind('keyup', function(){
/*Do stuff*/
}).appendTo($(body));
I hope that steers you in the right direction. Good luck
Related
I am trying to add a text from a DOM element to an onclick function. So the text will be a parameter
I tried
$("body").append(
"<input type='submit' value='Submit Answers' onclick=displayImages(" +
$('#hidden_number').text() + ");'>")
but this gives me $('#hidden_number').text() as undefined , but if I run $('#hidden_number').text() from the console i get a value.
Is it not possible to pass a parameter this way?
More code
The html page looks like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="core/js/self_control.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").append( "<input type='submit' value='Submit Answers' onclick=displayImages( $('#hidden_number').text());'>");
});
</script>
<label for="subID">Subject ID:</label>
<input type="text" id="subID" name="subID"/>
<br><br>
<div> Please enter your subject </div>
<br>
<body>
</body>
the file self_control.js has the displayImages function
function displayImages(number){
$('body').toggleClass('blackBody'); // set the color of the expr background to black
console.log(number)
}
the way that I load the page and the number to the hidden array is:
function loadQuestionForm(number){
$.get("core/questionForm0.html", function(data) {
$("body").html(data);
var next_img = number + 1 ;
console.log(next_img);
$("body").append("<div id='hide_nubmer' style='display: none;'>"+ next_img +"</div>")
});
You can do it like this:
$("body").append("<input type='submit' value='Submit Answers' onclick=displayImages(" + $('#hidden_number').text() + ");>")
function displayImages(arg) {
console.log(arg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hidden_number">5</div>
i think it looks like just a typo?
$("body").append("<div id='hide_nubmer' style='display: none;'>"+ next_img +"</div>")
should have the id be hidden_number?
function loadQuestionForm(number){
$.get("core/questionForm0.html", function(data) {
$("body").html(data);
var next_img = number + 1 ;
console.log(next_img);
$("body").append("<div id='hidden_number' style='display: none;'>"+ next_img +"</div>")
});
I am trying to write the following source code for displaying the manually entered(From Keyboard) text in text boxes using the submit button:
HTML + JavaScript Source:
<html>
<head>
<title>Insert Values</title>
</head>
<body>
<form id="form1">
Title: <input type="text" id="title1" size="25"><br /><br />
Description: <input type="text" id="desc1" size="55"><br /><br />
<input type="button" value="Submit" onclick="doit();">
</form>
<script type="text/javascript">
function doit(){
var title = document.getElementById("title1").value;
var desc = document.getElementById("desc1").value;
document.write("<h3>Title : </h3>" + title + <br />);
document.write("<h3>Description : </h3>" + desc);
}
</script>
</body>
When I use the debugger to trace errors, it gives the message "unfound syntax error" using the browser's debugger. When the webpage is loaded in the browser, it displays the text boxes & the submit button, though after entering text & clicking on the submit button, nothing happens!
Here you are:
function doit() {
var title = document.getElementById("title1").value;
var desc = document.getElementById("desc1").value;
document.write("<h3>Title : </h3>" + title + "< br / >"); // HERE
document.write("<h3>Description : </h3>" + desc);
}
Hope this help.
You just forgot to wrap <br /> by quotes in 15th line:
document.write("<h3>Title : </h3>" + title + "<br />");
also close your html tag
</html>
function doit(){
var myValue=document.getElementById('myTextBox').value;
if(myValue==0){
alert('Pleae Enter Real Value');
}
var myTitle=document.getElementById('title');
myTitle.innerHTML=myValue;
}
<h1 id="title">Title</h1>
<input type="text" id="myTextBox">
<input type="submit" value="Click me!!" onClick="doit()">
I know this is silly question but I am new to Javascript.
I have the following listbox:
<select id = 'data' multiple='multiple'>
<option>test#email.com</option>
<option>test#email.com</option>
<option>test#email.com</option>
<option>test#email.com</option>
<option>test#email.com</option>
</select>
Under the listbox there is a textarea:
<textarea id = 'copydata'>
</textarea>
And underneath the textarea is a button:
<button id = 'add'>add email</button>
I am wondering if it is possible to copy the items that are selected in the listbox to the textarea when the user presses on the button using Javascript.
Note that the listbox has the multiple attribute so that the user can select more than one item.
Any help is greatly appreciated.
Yes it is possible, you should use jQuery though to make it easier:
$("#add").click(function(){ // This event fires when you click the add button
$("#data option:selected").each(function(){ // Loop through each selected option
$("#copydata").val($("#copydata").val() + $(this).text() + "\n"); // Add its innerhtml to the textarea
});
});
Here is the solution using core HTML and Javascript.
<html>
<head>
<script type="text/javascript">
function copyDataToTextArea() {
var _data = document.getElementById("data");
var _textArea = document.getElementById("copydata");
var _selectedData="";
for(i=0; i<document.getElementById("data").length; i++) {
var _listElement = document.getElementById("data")[i];
if(_listElement.selected) {
_selectedData = _selectedData + _listElement.value + "\n";
}
}
_textArea.value=_selectedData;
}
</script>
</head>
<body>
<select id='data' multiple='multiple'>
<option>test1#email.com</option>
<option>test2#email.com</option>
<option>test3#email.com</option>
<option>test4#email.com</option>
<option>test5#email.com</option>
</select>
<textarea id='copydata'>
</textarea>
<button id ='add' onclick="copyDataToTextArea()" >add email</button>
</body>
</html>
<html>
<title>
</title>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
function AddingTextBoxes(){
var NumOfText=$("#NumOfTextBoxes").val();
$('#NewlyCreatedSelectBoxes').empty();
for(i=1; i<=NumOfText; i++){
var ipBoxName="MyInput"+i;
var txtBoxAutoNumbering="<input type='text' name='textbx[]' style='width:50px;' value="+i+" /> ";
$('#NewlyCreatedSelectBoxes').append(txtBoxAutoNumbering);
var txtBox="<input type='text' name='textbx[]'/> "
$('#NewlyCreatedSelectBoxes').append(txtBox);
var Select_SelectionOptions="<select id='SelectOption'><option>Text_Box</option> <option>Text_Area</option><option>Radio_Button</option></select> ";
$('#NewlyCreatedSelectBoxes').append(Select_SelectionOptions);
var Select_For_Multiple_Choices="<button type='button' onclick='ChildTxtBoxes()' id='ABC'>Click for child selections</button><br><br>";
$('#NewlyCreatedSelectBoxes').append(Select_For_Multiple_Choices);
}
return false;
/*for(var i=0; i<NumOfText; i++){
var x=1;
NewlyCreatedSelectBoxes.innerHTML=NewlyCreatedSelectBoxes.innerHTML+"<br>AAA "+x+"<input type='text' name='mytext'/>";
x++;
}
return false;*/
}
function ChildTxtBoxes(){
var txtBox="<input type='text' name='textbx[]'/> "
$('#NewlyCreatedSelectBoxes').append(txtBox);
}
</script>
</head>
<body>
<form >
<div id="PHPForms" >
<!--Designing PHP forms dynamically-->
<label>Form Heading</label><input type="text"/><br><br>
<label>Number of text boxes would needed</label><input id="NumOfTextBoxes" type="text"/>
<button id="A" onclick=" return AddingTextBoxes()">Click</button>
<div id="NewlyCreatedSelectBoxes" name="Texty">
</div>
</div>
</form>
</body>
</html>
In this code once I clicked button related to "var Select_For_Multiple_Choices" variable, I shold display a text-box right below the clicked button.. Likewise whenever the button is the text-box should be shown below that button... Bt in my code though it creates a text-box it shows aftr all the text boxes.... Hw I can do this?
You can use .after() to insert after the found element. So something like this:
$(button).after(content);
You can get your code to work as expected by passing the execution context (this) to the function ChildTxtBoxes like: ChildTxtBoxes(this). You have to modify your function to:
function ChildTxtBoxes(button) {
var txtBox = "<input type='text' name='textbx[]'/>"
$(button).after(txtBox);
}
notice the use of the execution context(this) to identify the button that was clicked and the use of .after() to insert a textbox after the button as Vlad suggested.
To be honest, I don't fully understand the keyword this to explain how and why it works. You can read up more on JavaScript “this” keyword here
Here is a working demo
<html>
<head>
<title></title>
<script >
fields = 0;
function addInput() {
if (fields != 3) {
document.getElementById('text').innerHTML += "<input type='text' name='clients_form[clients_name]' size='32' maxlength='32' value='' id='clients_form_clients_name_"+fields+"' />"+
'<select id="client_category_name_'+fields+'" name="client_category[]"><option value="">Select Category</option><option value="1">internal</option><option value="2">external</option><option value="3">others</option></select>';
fields = fields+ 1;
} else {
document.getElementById('text').innerHTML += "<br />More then 3 not allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form">
<input type="button" onclick="addInput();" name="add" value="Add More" />
</form>
<div id="text">
</div>
</body>
</html>
Question: When I click on add more first and type something and click on add more again the one i entered before is removed. What is the reason behind this. And how to fix it?
Thanks In advance
.innerHtml replaces the content which you place next..so use append like
var t = document.createElement("div"),
document.getElementById("theBlah").appendChild(t);
Problem is that typing something in the input does not change its value parameter but sets its value property (know the difference), e.g. it changes this.value instead of this.attributes.value, which results in innerHTML not actually containing the typed value.
So since innerHTML += 'string' ist just like setting innerHTML = innerHTML + 'string', it resets the input value to its attribute, which is empty.
I'd really recommend to use jQuery here, because with pure JS you'd have to first create the input and select element, then apply all needed attributes with multiple .setAttribute() calls.
I used Jquery and solved it this way:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var counter = 1;
$("#addButton").click(function () {
if(counter>6){
alert("Not allowed");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.html(Added my text box and select tag here);
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
</script>
</head><body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
</div>
</div>
<input type='button' value='Add More' id='addButton'>
<input type='button' value='Remove' id='removeButton'>
</body>
</html>