How can i create dynamic/multiple <textarea> using JavaScript - javascript

I want to add multiple textarea using Javascript as a user input number of description in no_of_description input HTML tags.
Here is my code:
<div class="container">
<label for="no_of_description">No of Description</label>
<input type="number" id="no_of_description" name="no_of_description" value="1">
<hr/>
<form class="form" action="" method="POST">
<!-- if no_of_description is 1 (default)-->
<div class="form-group">
<label for="description_1">Description 1</label>
<textarea class="form-control" id="description_1" rows="3" cols="8"></textarea>
</div>
<!-- if no_of_description is 2, another description be added using javascript-->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

Follo Below way to create html form field dynamically.
<html>
<head>
<script type='text/javascript'>
function addFields(){
var number = document.getElementById("member").value;
var container = document.getElementById("container");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
container.appendChild(document.createTextNode("TextBox " + (i+1)));
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i;
container.appendChild(input);
container.appendChild(document.createElement("br"));
}
}
</script>
</head>
<body>
<input type="text" id="member" name="member" value="">Number of TextBox:<br />
Add
<div id="container"/>
</body>
</html>

Related

How to make javascript interact with something in a different element (html)?

I am trying to make a webpage with a form where you have an input box and a slider. The slider should display the value of the slider but it only works if put it directly in to the main class but not if I put it in anything else for example the form.
So it works if I put the slider part in main class like this.
<div class="main">
<!-- slider -->
<div class="box">
<input step="0.1" type="range" min="0.1" max="5" value="1" name="amount">
</div>
<!-- value display -->
<div class="value">1</div>
<div class="field">
<h1>Halao</h1><br><br>
<form action="https://formsubmit.co/your#email.com" method="POST">
<input type="text" name="name" placeholder="Name" required><br><br>
<br>
<button type="submit">Send</button>
</form>
</div>
</div>
<script>
const slider = document.querySelector("input");
const value = document.querySelector(".value");
value.textContent = slider.value
slider.oninput = function(){
value.textContent = this.value;
}
</script>
</body>
But if it put in the form the value display does not show.
<div class="main">
<div class="field">
<h1>Halao</h1><br><br>
<form action="https://formsubmit.co/your#email.com" method="POST">
<input type="text" name="name" placeholder="Name" required><br><br>
<!-- slider -->
<div class="box">
<input step="0.1" type="range" min="0.1" max="5" value="1" name="amount">
</div>
<!-- value display -->
<div class="value">1</div>
<br>
<button type="submit">Send</button>
</form>
</div>
</div>
<script>
const slider = document.querySelector("input");
const value = document.querySelector(".value");
value.textContent = slider.value
slider.oninput = function(){
value.textContent = this.value;
}
</script>
</body>
I would really appreciate it if some one could explain why it is not working and help me to get it working.
In the form, you have a
<input type="text" name="name" placeholder="Name" required>
which gets selected as querySelector('input')
Either use querySelector('input[type="range"]'), add it id, or a class

Get inputs value in javascript using arrays

I am using HTML and javascript to getting some values from the user. I have one input text and two buttons on the page. first button for adding input text to form and the second button for sending data to javascript script. my code is like the following code :
function add_input_function() {
var html = "<input type='text' placeholder='Your text' id='text_input[]'/><br/>";
$("#container").append(html);
}
function send_function() {
var inputs = document.getElementById("text_input");
for (var i = 0; i < inputs; i++) {
console.log(inputs.value);
}
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<form method="post">
<div id="container">
<input class="input" type="text" placeholder="Your text" id="text_input[]" /><br/>
</div>
<br/>
<input onclick="add_input_function()" type="button" id="add" value="Add Input">
<br/>
<input onclick="send_function()" type="button" id="add" value="Send">
</form>
I want to get all of the values and show them in the console and separate with -. Can you help me?
(My for loop doesn't work now)
Add some class for each input, then when you click on send button, grab all element by class selector, and iterate loop on element to get value
<form method="post">
<div id="container">
<input class="input info" type="text" placeholder="Your text" /><br/>
</div>
<br/>
<input onclick="add_input_function()" type="button" id="add" value="Add Input">
<br/>
<input onclick="send_function()" type="button" id="add" value="Send">
</form>
<script>
function add_input_function() {
var html = "<input type='text' class='info' placeholder='Your text' /><br/>";
$("#container").append(html);
}
function send_function() {
var inputText = [];
var inputs = document.getElementsByClassName("info");
for (var i = 0; i < inputs.length; i++) {
console.log(inputs[i].value);
inputText.push(inputs[i].value)
}
var finalContent = inputText.join(' - ');
console.log(finalContent);
}
</script>
This is an alternative
function add_input_function() {
var html = "<input type='text' placeholder='Your text' id='text_input[]'/><br/>";
$("#container").append(html);
}
function send_function() {
let result = '';
$('input[type="text"]').each(function(index){
result += $(this).val() + '-';
});
alert(result);
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<form method="post">
<div id="container">
<input class="input" type="text" placeholder="Your text" id="text_input[]" /><br/>
</div>
<br/>
<input onclick="add_input_function()" type="button" id="add" value="Add Input">
<br/>
<input onclick="send_function()" type="button" id="add" value="Send">
</form>
i hope it helps...
var index=1;
var inpidarr=[];
inpidarr.push("text_input0")
function add_input_function() {
var html = "<input type=\"text\" placeholder=\"Your text\" id=\"text_input".concat(String(index))+"\"/><br/>";
$("#container").append(html);
inpidarr.push("text_input".concat(String(index)))
index++;
}
function send_function() {
;
for(i=0;i<inpidarr.length;i++)
{
console.log(document.getElementById(inpidarr[i]).value);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form method="post">
<div id="container">
<input class="input" type="text" placeholder="Your text" id="text_input0"/><br/>
</div>
<br/>
<input onclick="add_input_function()" type="button" id="add" value="Add Input">
<br/>
<input onclick="send_function()" type="button" id="add" value="Send">
</form>

HTML/Javascript form

I am doing a simple form using HTML/CSS and Javascript. The idea is that the form will ask the user to type his name, email, age and phone number. After that whenever the user clicks on the "Done" button, these headers will disappear.
"Enter your name"
"Enter your age"
"Enter your email"
"Enter your phone"
When I wrote the javascript code, these headers didn't disappear. So what is the problem?
function display(){
var input1 = document.getElementById("userA").value;
document.getElementById("username").innerHTML = input1;
var input2 = document.getElementById("ageA").value;
document.getElementById("age").innerHTML = input2;
var input3 = document.getElementById("emailA").value;
document.getElementById("email").innerHTML = input3;
var input4 = document.getElementById("phoneA").value;
document.getElementById("phone").innerHTML = input4;
}
</script>
<div>
<h1>Personal Information</h1>
</div>
<div class="container">
<img src="download.png">
<form name='myform'>
<div class="form-input">
<h2 id="username">Enter your name</h2>
<input id="userA" type="text" name="username" >
</div>
<div class="form-input">
<h2 id="age">Enter your age</h2>
<input id="ageA" type="text" name="age">
</div>
<div class="form-input">
<h2 id="email">Enter your email</h2>
<input id="emailA" type="text" name="email">
</div>
<div class="form-input">
<h2 id="phone">Enter your phone</h2>
<input id="phoneA" type="text" name="phone">
</div>
<input type="submit" id="done" onclick="display()" value="Done" name="done">
</form>
<h1 id= "time"></h1>
</div>
</body>
You are submitting the form, that will reload the page, so all changes done by your javascript is lost.
Try changing the submit button to a normal button e.g.
change
<input type="submit" id="done" onclick="display()" value="Done" name="done">
to
<button type="button" onclick="display()" >Done</button>
Have a look at this - it is basically the same, except it doesn't submit the form (because of the return false)
function display(){
var input1 = document.getElementById("userA").value;
document.getElementById("username").innerHTML = input1;
var input2 = document.getElementById("ageA").value;
document.getElementById("age").innerHTML = input2;
var input3 = document.getElementById("emailA").value;
document.getElementById("email").innerHTML = input3;
var input4 = document.getElementById("phoneA").value;
document.getElementById("phone").innerHTML = input4;
return false;
}
<div>
<h1>Personal Information</h1>
</div>
<div class="container">
<img src="download.png">
<form name='myform'>
<div class="form-input">
<h2 id="username">Enter your name</h2>
<input id="userA" type="text" name="username" >
</div>
<div class="form-input">
<h2 id="age">Enter your age</h2>
<input id="ageA" type="text" name="age">
</div>
<div class="form-input">
<h2 id="email">Enter your email</h2>
<input id="emailA" type="text" name="email">
</div>
<div class="form-input">
<h2 id="phone">Enter your phone</h2>
<input id="phoneA" type="text" name="phone">
</div>
<input type="submit" id="done" onclick="return display()" value="Done" name="done">
</form>
<h1 id= "time"></h1>
</div>

Checking a var is checked

In my case my checkboxes are not ticked by default so when the checkbox var html is ticked I would like it to show the alert.
Is there anyway that this can be done via a variable/use of #id or do I have to do something along the lines of ($('.checkbox_check').is(':checked'))?
I am just trying not to bloat my code if possible.
Code:
<!DOCTYPE html>
<html>
<head>
<title>E-mail Sig Generator</title>
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
rel="stylesheet">
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var name = $('#name').val();
var position = $('#position').val();
var phone = $('#phone').val();
var email = $('#email').val();
var address = $('#address').val();
var facebook = $('#facebook').val();
var website = $('#website').val();
var html = $('#showInline');
var file = $('#html');
if(html)
{
alert("muppets");
}
});
</script>
</head>
<body style="background:#000;">
<div style="width:980px; margin-left:auto; margin-right:auto;">
<table border="0" cellpadding="0" cellspacing="0" width="980px">
<tr>
<td style="text-align:center; background:#000;"></td>
</tr>
</table>
</div>
<div style=
"width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
<form class="form-group" id="email" method="post" name="email" style=
"width:380px; padding:20px;">
<div class="form-group">
<label for="name">Name</label> <input class="form-control" id=
"name" type="text">
</div>
<div class="form-group">
<label for="position">Position</label> <input class=
"form-control" id="position" type="text">
</div>
<div class="form-group">
<label for="phone">Phone</label> <input class="form-control"
id="phone" type="tel">
</div>
<div class="form-group">
<label for="email">E-Mail</label> <input class="form-control"
id="email" type="email">
</div>
<div class="form-group">
<label for="address">Address</label> <input class=
"form-control" id="address" type="text">
</div>
<div class="form-group">
<label for="facebook">Facebook</label> <input class=
"form-control" id="facebook" type="text">
</div>
<div class="form-group">
<label for="website">Website</label> <input class=
"form-control" id="website" type="text">
</div>
<div class="form-group">
<div class="checkbox">
<label><input id="html" type="checkbox" value="">
<strong>Download as a HTML file</strong></label>
</div>
</div>
<div class="form-group">
<label><input id="showInline" type="checkbox" value="">
<strong>Show as HTML Code</strong></label>
</div>
</form>
<div id="inlineDIV" onchange="showInlineDIV()" style="display:none;">
<textarea id="showInlineHTML" readonly="readonly">
</textarea>
</div>
</div>
</body>
</html>
For that you have to attach event delegate to jquery .change() event
$(document).ready(function(){
var html = $('#showInline');
html.change(function() {
alert("muppets : "+ $(this).is(":checked"));
});
});
Try the FIDDLE.
Hope this helps..
You can use the var html directly as it is a valid jquery object. Use below code -
if(html.is(':checked'))
{
alert("muppets");
}
$(document).ready(function() {
var html = $('#showInline');
if (html.prop('checked')) {
alert("muppets");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
<form class="form-group" id="email" method="post" name="email" style="width:380px; padding:20px;">
<div class="form-group">
<label>
<input id="showInline" type="checkbox" value="" checked>
<strong>Show as HTML Code</strong>
</label>
</div>
</form>
</div>
First I suggest you to change jquery and bootstrap library sequence on page.
Please follow below code.
<!DOCTYPE html>
<html>
<head>
<title>E-mail Sig Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
type="text/javascript"></script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
rel="stylesheet">
<script>
$(document).ready(function() {
var name = $('#name').val();
var position = $('#position').val();
var phone = $('#phone').val();
var email = $('#email').val();
var address = $('#address').val();
var facebook = $('#facebook').val();
var website = $('#website').val();
var html = $('#showInline');
var file = $('#html');
$("input[type='checkbox']").on("click",function() {
alert("muppets");
});
});
</script>
</head>
<body style="background:#000;">
<div style="width:980px; margin-left:auto; margin-right:auto;">
<table border="0" cellpadding="0" cellspacing="0" width="980px">
<tr>
<td style="text-align:center; background:#000;"></td>
</tr>
</table>
</div>
<div style=
"width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
<form class="form-group" id="email" method="post" name="email" style=
"width:380px; padding:20px;">
<div class="form-group">
<label for="name">Name</label> <input class="form-control" id=
"name" type="text">
</div>
<div class="form-group">
<label for="position">Position</label> <input class=
"form-control" id="position" type="text">
</div>
<div class="form-group">
<label for="phone">Phone</label> <input class="form-control"
id="phone" type="tel">
</div>
<div class="form-group">
<label for="email">E-Mail</label> <input class="form-control"
id="email" type="email">
</div>
<div class="form-group">
<label for="address">Address</label> <input class=
"form-control" id="address" type="text">
</div>
<div class="form-group">
<label for="facebook">Facebook</label> <input class=
"form-control" id="facebook" type="text">
</div>
<div class="form-group">
<label for="website">Website</label> <input class=
"form-control" id="website" type="text">
</div>
<div class="form-group">
<div class="checkbox">
<label><input id="html" type="checkbox" value="">
<strong>Download as a HTML file</strong></label>
</div>
</div>
<div class="form-group">
<label><input id="showInline" type="checkbox" value="">
<strong>Show as HTML Code</strong></label>
</div>
</form>
<div id="inlineDIV" onchange="showInlineDIV()" style="display:none;">
<textarea id="showInlineHTML" readonly="readonly">
</textarea>
</div>
</div>
</body>
</html>
$(document).on('click', '#showInline', function() {
if (html.get(0).checked) {
alert('Checked')
}
});
HERE
Try this
if(html.prop('checked')){
alert('Do something');
}
I want to make you notice that you may have an scope issue with the html variable, as it is declared inside the closure of the function called on document ready. So once the function is executed the variable "disappears". One solution might be declare the variables you want to initialize as global vars, meaning outside any function declaration.
var html; //declare as global
$(document).ready(function() {
var name = $('#name').val();
var position = $('#position').val();
var phone = $('#phone').val();
var email = $('#email').val();
var address = $('#address').val();
var facebook = $('#facebook').val();
var website = $('#website').val();
var file = $('#html');
html = $('#showInline'); //initialize
if(html)
{
alert("muppets");
}
});
Although it is not a very elegant solution. You may think of using a class and initialize a instance on your document ready callback.

Adding HTML fields with Add user Button

I want to add fields in my HTML code via an "ADD USER button such that all the validations done in the First three fields Email Name & Phone number should be same in the new generated 3 fields.I have used Jquery validate plugin.
My HTML code is as follows
<!DOCTYPE html>
<!--<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>-->
<html>
<head>
<meta charset="utf-8">
<title>Manageuser_addUser</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--<script src="plugin/validation/dist/additional-methods.min.js"></script>-->
<script src="plugin/validation/dist/jquery.validate.min.js"></script>
<script src="plugin/utilities/validationutils.js"></script>
</head>
<body>
<div>
<h1>Manage Users!</h1>
<form id="formRegistration" method="post" action="">
<div>
<label for="email">Email Id*</label>
<input id="email" type="email" name="email" value="" placeholder="Enter your Email Id" />
</div>
<div>
<label for="name">Name*</label>
<input id="name" type="text" name="name" value="" placeholder="Enter your Name" />
</div>
I am trying to use this section of js and J query but its not working
<script type="text/javascript">
var i = 3;
function addField(tableid)
{
var row = document.createElement("tr");
var col1 = document.createElement("td");
var col2 = document.createElement("td");
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("name","field" + i );
col1.appendChild(document.createTextNode("Field" + i));
col2.appendChild(input);
row.appendChild(col1);
row.appendChild(col2);
var table = document.getElementById(tableid);
table.appendChild(row);
i++;
}
<div>
<label for="phone">Phone</label>
<input id="phone" type="text" name="phone" value="" placeholder="+xx-xxxxxxxxxx" />
</div>
<div>
<input type="submit" name="add" value="Add User" id="publiclogin">
</div>
<div>
<input type="submit" name="add" value="Add more Fields" id="">
</div>
</form>
</div>
</body>
Your javascript code seems incomplete, there should be:
$("#formRegistration").validate();
within the script tags

Categories