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>
Related
I want to calculate the average of inputs that have been inputted through dynamically added number text fields into another text field called, average. Please guide how can I calculate the average of dynamic fields using javascript.
<html>
<body>
<form>
<table id="dynamic_field">
<td>
<div>
<input type="hidden" class="form-control" name="uuid[]"/>
</div>
</td>
<td><input type="text" class="form-control" id="average" name="average"/></td>
<td>
<div>
<label>Enter number</label>
<input type="text" class="form-control" name="number[]" />
</div>
</td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
<input type="submit" name="submit" id="submit" value="Submit">
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var max_input = 7;
var i = 1;
$("#add").click(function(){if (i < max_input) {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><div><input type="hidden" class="form-control" name="uuid[]"/></div></td><td> </td><td><div><label>Enter number</label><input type="text" class="form-control" name="number[]" /></div></td><td> </td><td valign="bottom"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr><tr><td> </td><td> </td></tr>');
}});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("#submit").on('click',function(){
var formdata = $("#main-form").serialize();
$.ajax({
url :"action.php",
type :"POST",
data :formdata,
cache :false,
success:function(result){
alert(result);
$("#main-form")[0].reset();
}
});
});
});
</script>
You can use each loop to iterate through all your number input and on each iteration store value of input inside some variable and then divide this total with count and finally add result inside your average input-box.
Demo Code :
$(document).ready(function() {
var max_input = 7;
var i = 1;
$("#add").click(function() {
if (i < max_input) {
i++;
$('#dynamic_field').append('<tr id="row' + i + '"><td><div><input type="hidden" class="form-control" name="uuid[]"/></div></td><td> </td><td><div><label>Enter number</label><input type="text" class="form-control" name="number[]" /></div></td><td> </td><td valign="bottom"><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr><tr><td> </td><td> </td></tr>');
}
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$(document).on("input", "input[name*=number]", function() {
var total = 0;
//get length of input field
var count = parseInt($("input[name*=number]").length);
//loop through each inputs
$("input[name*=number]").each(function() {
//add
total += $(this).val() != "" ? parseInt($(this).val()) : 0
})
//put value inside input box
$("#average").val(total / count);
})
});
<html>
<body>
<form>
<table id="dynamic_field">
<tr>
<td>
<div>
<input type="hidden" class="form-control" name="uuid[]" />
</div>
</td>
<td><input type="text" class="form-control" id="average" name="average" /></td>
<td>
<div>
<label>Enter number</label>
<input type="text" class="form-control" name="number[]" />
</div>
</td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
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>
I'm trying to generate a text-box after a button click event. The code is as follows.
<div id="welcomeDiv" class="answer_list" > WELCOME </div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
</div>
<?php if(isset($_POST['button'])) { ?>
<?php echo "<script type=\"text/javascript\">
function showDiv() {
<input type="text" id="textInput" value="..." />
document.getElementById('welcomeDiv').style.display = "block"; </script> ";
}
</script>" ?> ;
<?php } ?>
But the button click event function is not working properly. Any thoughts?
You can also create css and make visible textfield on button click
Hope below example will help you
function onButtonClick(){
document.getElementById('textInput').className="show";
}
.hide{
display:none;
}
.show{
display:block;
}
<div class="answer_list" > WELCOME </div>
<input type="button" name="answer" value="Show Text Field" onclick="onButtonClick()" />
<input class="hide" type="text" id="textInput" value="..." />
You don't need use PHP! Is better to use Jquery for this action.
$(document).ready(function() {
$("#myButton").click(function() {
$("#myButton").after('<input type="text" id="textInput" value="">');
});
});
input{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="welcomeDiv" class="answer_list"> WELCOME </div>
<br>
<input type="button" id="myButton" name="answer" value="Show Div" />
Hi Ryan please check this code it will create a text box and add it before button.
<div id="welcomeDiv" class="answer_list" > WELCOME </div>
<div id="tbox_div">
</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
<script>
function showDiv(){
var newtextbox ='';
if (!document.getElementById("textInput")) {
newtextbox += '<input type="text" id="textInput" value="..." />';
document.getElementById('tbox_div').innerHTML+=newtextbox;
}
}
if you want to add more that one text boxes then remove this if condition.
if (!document.getElementById("textInput"))
Using JQuery you can do it like, here's a FIDDLE
<div id="welcomeDiv" class="answer_list"> WELCOME </div>
<br>
<input type="button" id="myButton" name="answer" value="Show Div" />
<br>
<br>
<input type="text" id="textInput" value="" hidden/>
$(document).ready(function() {
$("#myButton").click(function() {
$("#textInput").show();
});
});
Using Plain JavaScript, here's a FIDDLE
<div id="welcomeDiv" class="answer_list"> WELCOME </div>
<br>
<input type="button" id="myButton" name="answer" value="Show Div" onclick="showInputBox()" />
<br>
<br>
<input type="text" id="textInput" value="" hidden/>
<script>
function showInputBox() {
if (document.getElementById("textInput")) {
document.getElementById("textInput").style.display = 'block';
alert("Yes");
} else {
//IF INPUT BOX DOES NOT EXIST
var inputBox = document.createElement("INPUT");
inputBox.setAttribute("type", "text");
inputBox.setAttribute("id", "dynamicTextInput");
document.body.appendChild(inputBox);
alert("No");
}
}
</script>
Theres a multi smtp form I found online. However the next and previous buttons are embedded into each fieldset and I would like them to be outside of thefieldset so they can be used for all the sets. Not just one.
And for the last one I'd .show() the submit button. As well as hide the previous button for the very first one.
Can this be done?
<fieldset>
<input type="text" name="firstname" placeholder="First Name">
<input type="button" name="next" class="next" value="Next">
</fieldset>
<fieldset>
<input type="text" name="lastname" placeholder="Last Name">
<input type="button"name="previous" class="previous" value="Previous">
<input type="button" name="next" class="next" value="Next">
</fieldset>
<fieldset>
<input type="text" name="email" placeholder="E-mail">
<input type="button" name="previous" class="previous" value="Previous">
<input type="submit" name="submit" value="Submit">
</fieldset>
$(document).ready(function(){
var current = 1,current_step,next_step,steps;
steps = $("fieldset").length;
$(".next").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().next();
next_step.show();
current_step.hide();
setProgressBar(++current);
});
$(".previous").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().prev();
next_step.show();
current_step.hide();
setProgressBar(--current);
});
setProgressBar(current);
});
You just need to keep track of the fieldsets and the current position.
Then, wrapping them in jQuery calls everything is easy. See this example, based on your code:
$(document).ready(function() {
var current = 0,
$form = $("form"),
$steps = $form.find("fieldset"),
numSteps = $steps.length;
function setProgressBar(pos) {
console.log("Step: " + pos);
}
function checkButtons() {
if (current <= 0) {
$(".prev").hide();
} else {
$(".prev").show();
}
if (current >= numSteps - 1) {
$(".next").hide();
$(".submit").show();
} else {
$(".next").show();
$(".submit").hide();
}
}
$(".next").click(function() {
$($steps[current]).hide();
$($steps[++current]).show();
setProgressBar(current);
checkButtons();
});
$(".prev").click(function() {
$($steps[current]).hide();
$($steps[--current]).show();
setProgressBar(current);
checkButtons();
});
checkButtons();
setProgressBar(current);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<input type="text" name="firstname" placeholder="First Name">
</fieldset>
<fieldset style="display:none">
<input type="text" name="lastname" placeholder="Last Name">
</fieldset>
<fieldset style="display:none">
<input type="text" name="email" placeholder="E-mail">
</fieldset>
</form>
<input type="button" style="display:none" name="prev" class="prev" value="Previous">
<input type="button" style="display:none" name="next" class="next" value="Next">
<input type="submit" style="display:none" name="submit" class="submit" value="Submit">
You also need to take care of the visibility of the buttons, which is what the checkButtons function is for. I am sure more elegant approaches are possible, but this one works.
Also note the display: none styles on the elements which are hidden at start.
I have a form with input fields.
Once,I clicked on submit button I want to generate 2 input fields with a "plus / +" icon. So, when I click on "+" icon it will generate input fields.
Here is the html part:
<label>Name</label>
<input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium"/>
<label>Id</label>
<input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">
<button id="demo_submit" class="btn" name="demo_submit" type="button">Submit</button>
I suggest to have a look at existing plugins (For example - Jquery SheepIt! Plugin) and see how that is coded.
To add dynamically form elements this can be done with the clone() method and DocumentFragment - http://ejohn.org/blog/dom-documentfragments/
Working example at http://plnkr.co/edit/szYoU4GCeLWX8b9DcsYT
<script type="text/javascript">
function addFields () {
var newNode1 = document.createElement('input'),
newNode2 = document.createElement('input');
newNode1.type = newNode2.type = "text"; document.forms[0].appendChild(newNode1);
document.forms[0].appendChild(newNode2);
}
</script>
<form>
<label>Name</label>
<input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium"/>
<label>Id</label>
<input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">
<button id="demo_submit" class="btn" name="demo_submit" type="button" onclick="addFields()">Submit</button>
</form>
$(".addInput").click(function {
$("form").append( PUT INPUT ELEMNT HERE);
});
Check this out.
HTML
<label>Name</label>
<input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium" />
<label>Id</label>
<input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">
<button id="demo_submit" class="btn" name="demo_submit" type="button">Submit</button>
<button id="demo_add" class="btn" name="demo_add" type="button">Add more</button>
<div id='add'></div>
jQuery
$('#demo_add').click(function () {
$inputName = "<input type='text' placeholder='Name'/>";
$inputId = "<input type='text' placeholder='Id'/>";
$br = "<br/>";
$('#add').append($inputName);
$('#add').append($inputId);
$('#add').append($br);
});
Hopefully it helps.