I want to add multiple html elements dynamically on button click and get values of each. Also one can delete created element on button click. HTML elements will be textbox and other text box for phone number.
I've tried to create single text box on button click. Fiddle: https://jsfiddle.net/dvkeojqn/
HTML:
<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br />
<input id="btnGet" type="button" value="Get Values" />
JS:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function () {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
alert(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> ' +
'<input type="button" value="Remove" class="remove" />'
}
</script>
try replacing this function..
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function () {
var valuesarr = new Array();
var phonearr = new Array();
$("input[name=DynamicTextBox]").each(function () {
valuesarr.push($(this).val());
});
$("input[name=phoneNum]").each(function () {
phonearr.push($(this).val());
});
alert(valuesarr); alert(phonearr);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> <input name = "phoneNum" type="text" /> <input type="button" value="Remove" class="remove" />';
}
and HERE is the FIDDLE.
Try to replace this JavaScript code..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function () {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
alert(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> <input name = "DynamicTextBox" type="text" value="'+ value +'" /> <input type="button" value="Remove" class="remove" />';
}
</script>
Related
My problem is that the button stops working for the following panels. I guess it's an id problem, but I have no idea how to fix it (I know very little about javascript)
Html:
<div class="card-body">
<button id="Addpanel">Add panel</button>
</div>
My scripts:
<script>
$(function() {
$('#Addpanel').click(function(){
var newDiv = $('<div class="panel-default"><br /><div class="form-control"><input type="text" id="fieldnum" name="fieldnum" value="">Fill number<a type="button" id="filldetails" class="btn" onclick="addFields()">Add</a></div><div id="container" class="form-control" />'
);
$(".card-body").append(newDiv);
});
});
</script>
Second:
<script type='text/javascript'>
function addFields(){
var number = document.getElementById("fieldnum").value;
var container = document.getElementById("container");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
var input = document.createElement("input");
input.type = "text";
input.name = "input" + (i+1);
input.className = "form-control";
container.appendChild(input);
}
}
</script>
You Should use like this:
$(function () {
var count = 0;
$('#Addpanel').click(function () {
var newDiv = $('<div class="panel-default"><br /><div class="form-control"><input type="text" id="fieldnum' + count + '" name="fieldnum" value="">Fill number<a type="button" id="filldetails' + count + '" class="btn" onclick="addFields()">Add</a></div><div id="container' + count + '" class="form-control" />');
$(".card-body").append(newDiv);
count++;
});
});
I am trying to add multiple file uploading functionality to a my website. Basically I have a button "add files" which triggers and appends a input fields of file type which can be used to upload a document.
Both on change and click events are not triggered. Thanks
files = $('.button-container');
fileSerialNumber = 1;
var addFileInputBtn = $('<button class="add-file">+ Add file</button><br><br>')
files.append(addFileInputBtn)
addFileInputBtn.click(function (event) {
event.preventDefault();
addFileInputBtn.text("+ Add another file")
var fileBoxContainer = $('<div class="fileBoxContainer"/><br>')
var fileNameLabel = $('<label style="margin-left: 20px;" for="namefile' + fileSerialNumber + '"> Name: </label>');
var fileName = $('<input class="file-name" name="namefile' + fileSerialNumber + '" type="text"></input>');
var rmButton = $("<button class='remove-button' style='color:grey;'><i class='fa fa-times-circle' aria-hidden='true'></i></button>");
var fileInput = $('<input class="file-input" name="file' + fileSerialNumber + '" type="file"></input>')
fileBoxContainer.append(fileInput);
fileBoxContainer.append(fileNameLabel);
fileBoxContainer.append(fileName);
fileBoxContainer.append(rmButton);
files.append(fileBoxContainer);
debugger
fileInput.on('change', function () {
debugger
var fName = this.value
fName = fName.replace(/.*[\/\\]/, '');
fileName.val(fName);
});
rmButton.click(function (event) {
event.preventDefault();
fileBoxContainer.remove();
});
fileSerialNumber += 1;
})
$('.remove-button').click(function (event) {
event.preventDefault();
$('.fileBoxContainer').remove();
});
<html>
<head>
<script src="https://use.fontawesome.com/f65531ab46.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form class="button-container">
</form>
</body>
</html>
I am trying to add some functionality to the entered tags in this image searcher using the flickr API. I have it working but it only works when I write the string within the code. For example I have "cats" in the for now. My goal is the pass the entered value from the textbox (id="textbox1") into the tags in the script above. I want to be able to search from the text box and not go into the code. Thanks for any tips/advice!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.2.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#button").click(function() {
$("#images").empty();
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
tags: "cats",
tagmode: "any",
format: "json"
}, function(data) {
console.log(data);
$.each(data.items, function(i, item) {
$(".buttonclick").remove();
$('<img/>').attr("src", item.media.m).appendTo('#images');
if (i == 1) return false;
});
});
});
$('#images').on('click', 'img', function() {
var $imgClone = $(this).clone().attr('src', $(this).attr('src').replace('_m.', '_b.'));
$('#main').html($imgClone);
});
});
$(document).ready(function() {
var counter = 2;
$("#addButton").click(function() {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label></label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function() {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function() {
var msg = '';
for (i = 1; i < counter; i++) {
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
<h1>Image Search</h1>
<button type="button" id="button">Search</button>
<input type='button' value='Remove Tag' id='removeButton'>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<input type='textbox' id='textbox1'>
<input type='button' value='Add tag' id='addButton'>
</div>
</div>
<div id="images" /></div>
</body>
</html>
In $.getJSON you can switch "cats" with
$("#textbox1").val(),
and it will use the value of the input (whatever the user has typed into it) as the value of "tags".
//Stuff before
tags:$("#textbox1").val(),
//Stuff after
I hope this helped!
Edit:
In case you want to learn more about jQuery's .val(), you can read the documentation here.
I would like to make the text bold by clicking a button. See below code, the problem I'm having is that I'm unable to pass the textarea ID to the boldTF() function.
<button type="button" id="tfButton">Add text</button>
<div id="InputsWrapper"></div>
<script>
$(document).ready(function() {
var tfCont = 0;
var InputsWrapper = $("#InputsWrapper");
var x = InputsWrapper.length;
var namefield = $("#tfButton");
$(namefield).click(function() {
tfCont++;
$(InputsWrapper).append('<div>' + '<div class="name" id="InputsWrapper_0' + tfCont + '">' + '<input type="textarea" id="field_' + tfCont + '" class="fTypex" placeholder="Type Here"/>' + '<br /><button type="button" onclick="boldTF("field_' + tfCont + '")">Bold</button>' + '<br>' + '</div>' + '</div>');
x++;
return false;
});
function boldTF(tmp){
document.getElementById(tmp).style.fontWeight = "bold";
//alert(tmp);
};
});
</script>
Thank you.
Remove the inline event handler and use event delegation:
$(document).on('click', 'button', function () {
$(this).closest('div.name').find('input').css('font-weight', 'bold')
})
jsFiddle example
Many issues
<input type="textarea" should be <input type="text" or <textarea ...></textarea>
Use the class to get at the field
No need to mix DOM access with jQuery
jQuery can attach event handlers on dynamically created objects using delegation.
Working fiddle
$(function () {
$("#tfButton").on("click", function(e) {
e.preventDefault;
var tfCont = InputsWrapper.length;
$("#InputsWrapper").append(
'<div class="name" id="InputsWrapper_0' + tfCont + '">' +
'<input type="text" id="field_' + tfCont + '" class="fTypex" placeholder="Your first name"/>' +
'<br /><button type="button" class="boldTF">Bold</button><br /></div>');
});
$("#InputsWrapper").on("click", ".boldTF", function(e) {
e.preventDefault();
$(this).parent().find(".fTypex").css({"font-weight":"bold"});
});
});
Here i want to display selected check-box text. Help me how to do this
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery_1.9.0.js"></script>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var counter = 1;
var cars = new Array("Paul","Catherine","Steve","Paul","Catherine","Steve","Paul","Catherine","Steve","Paul","Catherine","Steve");
$(document).ready( function() {
$("#checkall").click(function() {
if ($(this).is(':checked')){
$(":checkbox").attr("checked", true);
}
else{
$(":checkbox").attr("checked", false);
}
});
// Uncheck All
for (var i=0;i<cars.length;i++){
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<input type="checkbox" />'+cars[i]+'</br>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
}
});
function checkState(){
var isChecked = $('#checkall').is(':checked');
if(isChecked){
// here i want to display all check-boxes data
} else{
// here i want to display Selected Check-boxes data
}
}
</script>
</head>
<body>
</br>
<div id="TextBoxesGroup">
<div id="TextBoxDiv1">
<input type="checkbox" id="checkall" value="check" />select</br>
<br />
</div>
</div>
<input type = "button" onClick = "checkState()" value = "GetName" id = "button" />
</body>
</html>
Do this to get the names
Changes add checkbox function to (otherwise you won't have any values):
newTextBoxDiv.after().html('<input type="checkbox" value="' + cars[i] + '" />'+cars[i]+'</br>');
Update your if else:
var isChecked = $('[type=checkbox]:checked');
var names = "";
isChecked.each(function(){
names += $(this).val();
});
alert(names);
Live fiddle: http://jsfiddle.net/nyu5T/
Look at jQuery's serialize()
console.log($(":checked").serialize());
I know you have an answer but this addresses several issues: fiddle showing it working:http://jsfiddle.net/WGKuX/
Markup: fix bad html for </br> and remove onclick from markup (in code later)
<br />
<div id="TextBoxesGroup">
<div id="TextBoxDiv1">
<input type="checkbox" id="checkall" value="check" />select
<br />
</div>
</div>
<input type="button" value="GetName" id="button" />
now for some code: comments on each portion
var counter = 1;
var cars = ["Paul", "Catherine", "Steve", "Paul", "Catherine", "Steve", "Paul", "Catherine", "Steve", "Paul", "Catherine", "Steve"]; //change to simpler declaration
$(document).ready(function () {
$("#checkall").click(function () {
$(".myCars").prop("checked", $(this).is(':checked'));
}); // simplify
$("#TextBoxesGroup").on("change", ".myCars", function () {
$("#checkall:checkbox").prop("checked", ($(".myCars").length == $(".myCars:checked").length));
}); // assume "select" means "select all", if all are checked, check the select otherwise uncheck
var mylist = "";
var i = 0;
for (i = 0; i < cars.length; i++) {
mylist += "<div id='TextBoxDiv" + (counter + i) + "'><input class='myCars' type='checkbox' value='" + cars[i] + "' />" + cars[i] + '<br /></div>';
}// note the class added to the checkboxes
$(mylist).appendTo("#TextBoxesGroup"); // simplify the insertion, only hit DOM once
});
$('#button').click(checkState); //event handler moved from markup
function checkState() {
var names = "";
// build list based on the seleck all check state
var checkslist = $('#checkall').prop('checked') ? $('.myCars[type=checkbox]') : $('.myCars[type=checkbox]:checked');
checkslist.each(function () {
names += $(this).val();
});
alert(names);
}