I try to add input dynamically. However each input I add is blank without a name.
$(document).ready(function() {
var moreUploadTag = '';
$('#attachMore').click(function() {
moreUploadTag += '<input type="text"/>';
jQuery(moreUploadTag).detach().appendTo("#boxed");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="boxed">
<input type="text" name="" />
</div>
<p id="attachMore">attachMore</p>
The purpose I left it blank without a name is I want to crate the name dynamically:
$('#addName').click(function(){
//$('input').attr("name", $(this).attr("name") + "test");
var named = $('input').val();
$('input').attr("name", $('input').attr("name") + named);
});
$(document).ready(function() {
$('#attachMore').click(function() {
var moreUploadTag = '';
moreUploadTag += '<input type="text"/>';
jQuery(moreUploadTag).detach().appendTo("#boxed");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxed">
<input type="text" name="" />
</div>
<p id="attachMore">attachMore</p>
<p id="addName">addName</p>
However it adds name to all input.
My question is how to add name input each of the inputs?
Thanks in advance for the help. Cheers.
Are you looking for something like this?
$('#addName').click(function(){
$('input').each(function(){
var input = $(this);
input.attr("name", input.val());
});
});
$(document).ready(function() {
$('#attachMore').click(function() {
var moreUploadTag = '';
moreUploadTag += '<input type="text"/>';
jQuery(moreUploadTag).detach().appendTo("#boxed");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxed">
<input type="text" name="" />
</div>
<p id="attachMore">attachMore</p>
<p id="addName">addName</p>
I think the problem is you need to tell jquery what name goes with what input.
var inputHtml = '<div class="inputGroup"><input type="text" /><button class="addName">add name</button></div>';
var yourname = 'allen';
$('.body').on('click', '.addInput', function() {
$('.target').prepend(inputHtml);
});
$('.body').on('click', '.addName', function() {
if($(this).siblings('input').length) {
$(this).siblings('input').attr('name', yourname);
// debug
alert($(this).parent().children('input').attr('name'));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="body">
<div class="target"></div>
<button class="addInput">add input</button>
</div>
Related
I am trying to get the values from the added input fields and display it in the textarea.
The values of the input fields will be added once the codeBtn has been clicked and will add it in the textarea. I only have managed to get the values from the first input fields that has been created in HTML.
Moreover, I have tried to add the new value input fields.
let titleValue2 = $('#titleInput2').val();
let contentValue2 = $('#contentInput2').val();
totalString += (titleValue1 + contentValue1 + titleValue2 + contentValue2)
But this will give me 'undefined' when I only want to display the values of titleInput1 and contentInput1.
Basically what I'm trying is to get the values from each added input fields to the textarea.
Can anyone please help me? Thank you
Sample HTML Code:
<div class="btn-section">
<button class="addButton">+</button>
<button class="codeButton">Generate code</button>
</div>
<div class="container">
<label for="">Titel:</label>
<input type="text" id="titleInput1">
<label for="">Content:</label>
<input type="text" id="contentInput1">
</div>
<div class="newInputs">
</div>
<textarea name="" id="textInput" cols="30" rows="10"></textarea>
JQuery Code:
let inputCount = 1;
let totalString = ''
const defaultInput_firstpart = `<label for="">Titel:</label>
<input type="text" id="titleInput`
const defaultInput_secondpart = `">
<label for="">Content:</label>
<input type="text" id="contentInput`
const defaultInput_lastpart = `">`
function addNewInputs() {
$('.newInputs').append(defaultInput_firstpart + inputCount + defaultInput_secondpart + inputCount + defaultInput_lastpart)
}
function addValues() {
let titleValue1 = $('#titleInput1').val();
let contentValue1 = $('#contentInput1').val()
let titleValue2 = $('#titleInput2').val();
let contentValue2 = $('#contentInput2').val()
totalString += (titleValue1 + contentValue1 + titleValue2 + contentValue2)
}
$(document).ready(function() {
$('.addButton').on('click', function() {
inputCount++;
addNewInputs();
})
$('.codeButton').on('click', function() {
addValues();
$('#textInput').text(totalString)
})
})
Instead using dynamically created id use classes to get inputs value.
Below is the example
let inputCount = 1;
let totalString = ''
const defaultInput_firstpart = `<div class="nwlist"><label for="">Titel:</label>
<input type="text" class="titleInput" id="titleInput`
const defaultInput_secondpart = `">
<label for="">Content:</label>
<input type="text" class="contentInput" id="contentInput`
const defaultInput_lastpart = `"></div>`
function addNewInputs() {
$('.newInputs').append(defaultInput_firstpart + inputCount + defaultInput_secondpart + inputCount + defaultInput_lastpart)
}
function addValues() {
totalString = "";
$(".nwlist").each(function(){
totalString = totalString + $(this).find(".titleInput").val() + " " + $(this).find(".contentInput").val() + " ";
})
}
$(document).ready(function() {
$('.addButton').on('click', function() {
inputCount++;
addNewInputs();
})
$('.codeButton').on('click', function() {
addValues();
$('#textInput').text(totalString)
})
})
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="btn-section">
<button class="addButton">+</button>
<button class="codeButton">Generate code</button>
</div>
<div class="container">
<div class="nwlist">
<label for="">Titel:</label>
<input type="text" class="titleInput" id="titleInput1">
<label for="">Content:</label>
<input type="text" class="contentInput" id="contentInput1">
</div>
<div class="newInputs">
</div>
</div>
<textarea name="" id="textInput" cols="30" rows="10"></textarea>
</body>
</html>
Hope it will help.
I am using clone to generate dynamic HTML on click of button ,
following is my HTML for the same.
<input id="AddPhoneType" onclick="setEmailValues()" value="Gen Email" type="button">
<div style="margin-top: 10px;" class="ExtAddEmailTemplate" id="ExtAddEmailTemplate">
<input name="RemoveEmail" class="RemovePhoneBtn" value="-" id="RemoveEmail" type="button">
<input type="text" name="txtExtEmail" class="ExtEmailClass" value="" placeholder="Email" /></div>
<div id="EmailContainer"> </div>
And following is the script
$(document).ready(function () {
$('#AddExtEmail').click(function () {
$('<div/>', {
'class': 'ExtAddEmail', html: GetHtmlForEmail()
}).hide().appendTo('#EmailContainer').slideDown('slow');
});
});
function setEmailValues() {
$('<div/>', {
'class': 'ExtAddEmail', html: GetHtmlForEmail()
}).hide().appendTo('#EmailContainer').slideDown('slow');
}
function GetHtmlForEmail()
{
var len = $('.ExtAddEmail').length;
var emailValue = 'oner#one.com,twor#two.com';
var emaiArray = emailValue.split(",");
var $html = $('.ExtAddEmailTemplate').clone();
$html.find('[name=txtExtEmail]')[0].name = "txtExtEmail" + len;
return $html.html();
}
Now on click of button I need to generate 2 text box let say with respective email ID let say "oner#one.com", "twor#two.com"
Now my issue is that I am not able to set the value while generating the HTML
I have tried following
$html.find('[type=text]')[0].val('oner#one.com');
Have try finding using class , text etc. but was not able to set the value.
I also need to set value of dropdown , assuming that if I may able to set value of text box, will able to it do for dropdown also.
I am able to do it after HTML getting generated
$('#EmailContainer .ExtEmailClass').each(function () {
this.value = 'oner#one.com';
});
But I think if we can set value while generating HTML is most appropriate solution.
Thanks
You can use the below code it is working perfectly,
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Tring Reset</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<input id="AddPhoneType" onclick="setEmailValues()" value="Gen Email" type="button">
<div style="margin-top: 10px;" class="ExtAddEmailTemplate" id="ExtAddEmailTemplate">
<input name="RemoveEmail" class="RemovePhoneBtn" value="-" id="RemoveEmail" type="button">
<input type="text" name="txtExtEmail" class="ExtEmailClass" placeholder="Email" /></div>
<input type="button" id="AddExtEmail" value="+"/>
<div id="EmailContainer"> </div>
<script>
$(document).ready(function () {
$('#AddExtEmail').click(function () {
$('<div/>', {
'class': 'ExtAddEmail', html: GetHtmlForEmail()
}).hide().appendTo('#EmailContainer').slideDown('slow');
});
});
function setEmailValues() {
$('<div/>', {
'class': 'ExtAddEmail', html: GetHtmlForEmail()
}).hide().appendTo('#EmailContainer').slideDown('slow');
}
function GetHtmlForEmail()
{
var len = $('.ExtAddEmail').length;
var emailValue = 'oner#one.com,twor#two.com';
var emaiArray = emailValue.split(",");
var $tryiy = $('.ExtAddEmailTemplate').clone();
$tryiy.find('[name=txtExtEmail]')[0].name = "txtExtEmail" + len;
$tryiy.find('[name=txtExtEmail'+len+']').attr("value",emaiArray[0]);
return $tryiy.html();
}
</script>
</body>
</html>
I have set the value using the attr("value",emaiArray[0]); property of the element using jquery and it is working fine
So my dilemmna is that I don't know how to record what the user inputs. (my goal as of now is to simply print what the user enters in an input box, not to add the numbers)
var x = document.getElementById('textboxone').value;
Why isn't this working?
<!DOCTYPE html>
<html>
<head>
<link href="cssFiles/ttt.css" rel="stylesheet" type="text/css"></link>
<script Language ="JavaScript">
//create skeleton divs
function createDivs () {
var s;
s = '<div class="simplebox" id="divBody">Bla 3 bla</div>';
document.write(s);
}
//create body skeleton
function createBodyDivs (sID) {
var s;
s = '<div class="smallerbox" id="divInput">';
s += '<div id="textboxone"><span>Add <input type="text" ></input></span></div>';
s += '<div id="textboxtwo"><span>To <input type="text" ></input></span></div>';
s += '<div id= style="margin-top: 100px;"><span> Click here to find the answer! <input type="button" value = "Answer Generator" OnClick="(this.form)"></input></span></div>';
var oDiv = document.getElementById(sID);
oDiv.innerHTML = s;
}
//adding the two numbers from input boxes
function addnumbers(form){
var x = document.getElementById('textboxone').value;
alert(x)
}
</script>
</head>
<body>
<script Language ="JavaScript">
createDivs();
createBodyDivs('divBody');
</script>
</body>
</html>
Check out AngularJS my friend! :)
JSFIddle Demo
<div ng-app="">
<input type="text" ng-model="data.message" />
<h1>{{data.message}}</h1>
<div class="{{data.message}}"></div>
</div>
using: https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js
I've quickly checked the code and first of all you input button will not trigger addNumbers(form) since the onclick of the input doesn't point of that function.
Then for the function itself, document.getElementById('textboxone').value returns undefined because the actual value you want is in the <input> and not in the <div id="textboxone">
So if you have you're createBodyDivs function modified so that the id where on the input, then this document.getElementById('textboxone').value would actually return the correct value.
function createBodyDivs (sID) {
var s;
s = '<div class="smallerbox" id="divInput">';
s += '<div><span>Add <input type="text" id="textboxone" ></input></span></div>';
s += '<div><span>To <input type="text" id="textboxtwo" ></input></span></div>';
s += '<div id= style="margin-top: 100px;"><span> Click here to find the answer! <input type="button" value = "Answer Generator" OnClick="(this.form)"></input></span></div>';
var oDiv = document.getElementById(sID);
oDiv.innerHTML = s;
}
For the click binding, you button should be the following for it to work:
<input type="button" value = "Answer Generator" OnClick="addnumbers()"></input>
Hi I'm trying to create a family tree of some sort. I have a drop down box that's it options are being dynamically added when I make a new family and prompts the user to add a child of the selected family.
I'm trying to append the child after the table of the selected family but I have no idea what kind of ID are being generated when they're dynamically made
code is below
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
//To Create Familes
$('#submit').on('click', function() {
var table = $('<table></table>').addClass('table');
var family = document.getElementById('famname').value;
$('#family input[type = text],input[type = text],input[type = text],input[type = text]').each( function() {
str = '<td>' + $(this).val() + '</td>';
$(this).val('');
table.append( str );
});
$('#container').append(table);
$('#select').append($('<option />', { text: family } ) );
});
//To Create child to right family
$('#submit2').on('click', function() {
var child = prompt("Enter the name of the child you wanna put to the selected family ");
something.after(child);
});
});
</script>
</head>
<body>
<form id ="family" method = "post" target="_parent">
Enter Family Name <input type = "text" name = "famname" id = "famname" > <br>
Enter Address <input type = "text" name = "address"> <br>
Enter Father's name <input type = "text" name = "dad"> <br>
Enter Mother's name<input type = "text" name = "mom"> <br>
<input id="submit" type="button" value="Submit" name="submit">
</form>
<p>Select Which family you want to add a child to</p>
<form id = "child">
<select id ="select"></select>
<input id="submit2" type="button" value="Submit" name="submit">
</form>
<div id = "container">
</div>
</body>
</html>
any idea's of how to append after the selected families? or is there a better of doing this
the best way is to actually add elements rather than HTML for example:
var test = document.createElement('table');
test.setAttribute('id', 'test_id');
document.body.appendChild(test);
console.log(document.getElementById('test_id'));
to reference it, be sure to add an id and/or a class using the setAttribute javascript call or the .attr() or .prop() methods in jquery.
That's not very clear as to exactly what you're trying to do, but here's a tidier version that adds the child as a new row after the family's row:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="mystyle.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script>
$(function() {
var cur_id = 0;
//To Create Familes
$('#submit').on("click", function(ev) {
var id = "family" + cur_id++,
$row = $('<tr id="' + id + '"></tr>');
$('#select').append('<option value="' + id + '">' + $("#famname").val() + '</option>');
$('#family :text')
.each(function() {
$row.append('<td>' + $(this).val() + '</td>');
})
.val("");
$('#container table').append($row);
});
//To Create child to right family
$('#submit2').click(function(ev) {
var child = prompt("Enter the name of the child you wanna put to the selected family "),
id = $("#select").val();
$("#" + id)
.after("<tr><td>" + child + "</td></tr>");
});
});
</script>
</head>
<body>
<form id ="family" method = "post" target="_parent">
<label>Enter Family Name <input type="text" name="famname" id="famname"></label><br>
<label>Enter Address <input type="text" name="address"></label><br>
<label>Enter Father's name <input type = "text" name="dad"></label><br>
<label>Enter Mother's name <input type="text" name="mom"></label><br>
<input id="submit" type="button" value="Submit" name="submit">
</form>
<p>Select Which family you want to add a child to</p>
<form id="child">
<select id="select"></select>
<input id="submit2" type="button" value="Submit" name="submit">
</form>
<div id="container">
<table class="table"></table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
//To Create Familes
$('#submit').on('click',function(){
var table = $('<table></table>').addClass('table');
var family = document.getElementById('famname').value;
$('#family input[type = text],input[type = text],input[type = text],input[type = text]').each(function() {
str = '<td>' + $(this).val() + '</td>';
$(this).val('');
table.append(str);
table.addClass(family);
});
$('#container').append(table);
$('#select').append($('<option />', {text: family, value:family}));
});
//To Create child to right family
var fam, child, str;
$(document).on('change', '#select', function(){
$('#submit2').show();
$('#child_name').show();
fam = $(this).children('#select :selected').val();
});
$(document).on('click', '#submit2', function(){
child = $('#child_name').val();
$('#submit2').hide();
$('#child_name').hide();
str = '<td>' + child + '</td>'
$('.'+fam).append(str);
});
});
</script>
</head>
<body>
<form id ="family" method = "post" target="_parent">
Enter Family Name <input type = "text" name = "famname" id = "famname" > <br>
Enter Address <input type = "text" name = "address"> <br>
Enter Father's name <input type = "text" name = "dad"> <br>
Enter Mother's name<input type = "text" name = "mom"> <br>
<input id="submit" type="button" value="Submit" name="submit">
</form>
<p>Select Which family you want to add a child to</p>
<select id ="select">
</select>
<input type="text" id="child_name" style="display:none;">
<input id="submit2" type="submit" value="button" name="submit" style="display:none;">
<div id = "container">
</div>
</body>
</html>
this should do, I tested this already...hope this helps
Found a nice website for an alternative to using /forms in share point. My code below though does not print my input to the screen. Any Suggestions.
<script type="text/javascript">
function printvalues()
{
var div = document.getElementById("divId");
div.innerHTML += "test";
div.innerHTML += inputobj1.value;
}
</script>
<div id="divId">
username: <input name="inputobj1" value="" />
<button id="idButton" type="button" onclick ="printvalues();">
Generate!
</button>
<div id="divId">
</div>
There's two issues with your code.
First, you're missing a closing </div> tag; and you have two <div> elements with the same id property! I think you should remove the first div's id property.
Second, your <input /> is missing the id property, therefore it's not automatically defined by inputobj1.
Try this markup:
<script type="text/javascript">
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += "test";
div.innerHTML += document.getElementById("inputobj1").value;
}
</script>
<div>
username: <input id="inputobj1" name="inputobj1" value="" />
<button id="idButton" type="button" onclick ="printvalues();">Generate!</button>
<div id="divId"></div>
</div>
Here's a working jsFiddle.
<script type="text/javascript">
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += "test";
div.innerHTML += inputobj1.value;
}
</script>
<div id="divId2">
username: <input name="inputobj1" value="" />
<button id="idButton" type="button" onclick ="javascript:printvalues();">
Generate!
</button>
<div id="divId"></div>
</div>
or
<div id="divId2">
username: <input name="inputobj1" value="" />
<button id="idButton" type="button">
Generate!
</button>
<div id="divId"></div>
</div>
<script type="text/javascript">
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += "test";
div.innerHTML += inputobj1.value;
}
$('#idButton').click(function(){
printvalues()
})
</script>
You had 2 divId's as well, i made an assumption on witch on to use
this doesnst work because you have two div with id="idButton" and your markup is not closed
this may also work as you tagged jquery
function printvalues() {
var value = $('input[name="inputobj1"]').val();
var $div = $('<div>',{text:value});
$('#divId').append($div);
}
or using the divId div
function printvalues() {
var value = $('input[name="inputobj1"]').val();
$('#divId').text(value);
}