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
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 have updated my script code to the following after reading about documentation on migrating from 1.2 to 1.3.
var app = angular.module("APP", []);
app.controller('Ctrl', function ($scope) {
$scope.id = [{
id: 'id #1'
}];
$scope.addNewId = function () {
var newId = $scope.id.length + 1;
$scope.id.push({
'id': 'id #' + newId
});
};
$scope.removeId = function (index) {
if (index >= 1) {
$scope.id.splice(index, 1);
}
};
});
This is the code for the form:
<!DOCTYPE html>
<html lang = "en" ng-app = "APP">
<head>
<meta charset = "utf-8">
<title>Add New ID</title>
<link rel="stylesheet" href="form.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script type = "text/javascript" src = "form.js"></script>
</head>
<body ng-controller="Ctrl">
<section>
<h1>Add New Stuff</h1>
<form name = "form" id = "form">
<div ng-model = "indiv">
<fieldset class="ids" data-ng-repeat="indiv in id">
<legend>ID</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name" size="60"> 
<label for="age">Age:</label>
<input type="text" name="age" id="age" size="60"> 
<button type="button" name="lookup" id="lookup">LOOKUP</button> 
<button class="remove" ng-click="removeId($index)">Remove ID</button><br>
</fieldset>
<br>
<button class="addfields" ng-click="addNewId()">Add ID</button>
</div>
<input type="submit" name="submit" id = "submit" value="SUBMIT">
</form>
</section>
</body>
It is supposed to add a new set of input fields to a form. Please help
An id attribute can't contain space nor sharp character here you are setting :
{id: 'id #1'}
May be a part of the answer if you're attributing this value to the id of each input in your ng-repeat.
can you show us the form ?
I know I am probably doing this in the least elegant way possible but I'm still a beginner. I want to generate a user form where people input variables. On the click of a button those variables appear in the proper place in a paragraph (Ex.. name, Date). I put together some pieces from code that copies text from one box to another... now I want to create a paragraph below where the variables populate in the middle of the relevant sentence.
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>textBoxes.html</title>
<script type = "text/javascript">
function sayHi(){
// THIS is WHERE input VARIABLES are set, followed by the OUTPUT
//this defines the First Week of Sickness Paid Start Date
var BPCName = document.getElementById("BPCName");
var OUTBPC = document.getElementById("OUTBPC");
var name = BPCName.value;
OUTBPC.value = " " +name+ ""
//This defines the last week of Sickness Benefits Paid
var LWPName = document.getElementById("LWPName");
var OUTLWP = document.getElementById("OUTLWP");
var name = LWPName.value;
OUTLWP.value = " " +name+ ""
//This defines Total Weeks of Sickness Benefits Paid
var TWSPName = document.getElementById("TWSPName");
var OUTTWSP = document.getElementById("OUTTWSP");
var name = TWSPName.value;
OUTTWSP.value = " " +name+ ""
// This Defines the Date the Medical Was received
var MEDRName = document.getElementById("MEDRName");
var OUTMEDR = document.getElementById("OUTMEDR");
var name = MEDRName.value;
OUTMEDR.value = " " +name+ ""
//This Defines the Medical Provider
var MEDPName = document.getElementById("MEDPName");
var OUTMEDP = document.getElementById("OUTMEDP");
var name = MEDPName.value;
OUTMEDP.value = " " +name+ ""
// THis Defines the Date of Incapacity indicated on the Medical
var INCName = document.getElementById("INCName");
var OUTINC = document.getElementById("OUTINC");
var name = INCName.value;
OUTINC.value = " " +name+ ""
} // end sayHi
</script>
<link rel = "stylesheet"
type = "text/css"
href = "textBoxes.css" />
</head>
<body>
<h1>Automatic</h1>
<form action = "">
<fieldset>
<label>Start Date: </label>
<input type = "text"
id = "BPCName" />
<input type = "button"
value = "click me"
onclick = "sayHi()"/>
<input type = "text"
id = "OUTBPC" />
</fieldset>
</form>
<form action = "">
<fieldset>
<label>Last Week of Benefits Paid: </label>
<input type = "text"
id = "LWPName" />
<input type = "button"
value = "click me"
onclick = "sayHi()"/>
<input type = "text"
id = "OUTLWP" />
</fieldset>
<form action = "">
<fieldset>
<label>Total Weeks of Sickness Benefits Paid: </label>
<input type = "text"
id = "TWSPName" />
<input type = "button"
value = "click me"
onclick = "sayHi()"/>
<input type = "text"
id = "OUTTWSP" />
<form action = "">
<fieldset>
<label>Date Medical Received: </label>
<input type = "text"
id = "MEDRName" />
<input type = "button"
value = "click me"
onclick = "sayHi()"/>
<input type = "text"
id = "OUTMEDR" />
<form action = "">
<fieldset>
<label>Name of Practitioner: </label>
<input type = "text"
id = "MEDPName" />
<input type = "button"
value = "click me"
onclick = "sayHi()"/>
<input type = "text"
id = "OUTMEDP" />
<form action = "">
<fieldset>
<label>Date of Incapacity Indicated on Medical: </label>
<input type = "text"
id = "INCName" />
<input type = "button"
value = "click me"
onclick = "sayHi()"/>
<input type = "text"
id = "OUTINC" />
<form action = "">
</fieldset>
</form>
<h2> Example Document</h2>
<p>The client was sent an EForm form requesting submission of original medical to confirm eligibility for benefits.
The client was paid XXXXX weeks of benefits during the period XXXX to XXXXX
The client submitted an original doctor’s note signed by XXXX dated XXX
Claimant notified in writing that claim is on order.
The medical addresses all weeks in which sickness benefits were paid.
</P>
</html>
Here's an example using jQuery and a regular expression:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Replace example</title>
</head>
<body>
<p id="text">Hello, my name is {{ name }}.</p>
<p>
<form>
<input type="text" id="name" value="Sally">
</form>
<button id="name-button">Replace</button>
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Replace {{ name }} when the user clicks the button
$('#name-button').click(function() {
var currentText = $('#text').html();
var name = $('#name').val();
var newText = currentText.replace(/{{ name }}/, name)
$('#text').html(newText);
});
});
</script>
</body>
</html>
Here's a demo.
As answered by Joseph.. it is the way to do it in Jquery. But that suggested solution replaces one pattern at a time, which means you will have to click the button again to replace the other string with same pattern(if you have one).
Its like: (Using Joseph's code to demonstrate)
<!DOCTYPE html>
<html>
<head>
<title>Replace example</title>
</head>
<body>
<p id="text">Hello, my last name is {{ name }}. Also my father's last name is {{ name }}.</p> <!-- Don't mind the sentence -->
<p>
<form>
<input type="text" id="name" value="Sally">
</form>
<button id="name-button">Replace</button>
</p>
</body>
</html>
All you got to do is search them globally which can be done by passing global flag that is /g. So the Jquery becomes:
var newText = currentText.replace(/{{ name }}/g, name)
Everything is same as Joseph's just a little modified.
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>
my intension is to send a hidden count value form view to controller in spring mvc,everything is working but iam not getting the count in the controller,plese do some favour
my view is
<HTML>
<HEAD>
<script type="text/javascript" src="resources/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var i = 1;
//var c = 0;
$("#AddSection").click(function() {
i++;
$("<div />").append($("<input />", {
type: "text",
name: "Section" + i
})).appendTo("#someContainer");
//c = i;
document.getElementsByName("Count").Value = i;
alert(i);
});
$("input").live("click", function() {
$("span").text("Section: " + this.name);
});
});
</SCRIPT>
</HEAD>
<BODY>
<form method="get" action="addProfile">
ProfileName<input type="text" name="pname"><br />
SectionName<input type="text" name="Section1">
<input type="button" id="AddSection" value="AddSection">
<div id="someContainer"></div>
<input type="hidden" id="hiddenSection" name="Count" />
<span></span> <input type="submit" value="save">
</form>
</BODY>
</HTML>
You have a typo:
document.getElementsByName("Count").Value = i;
// ^----Typo!
value is lowercase:
document.getElementsByName("Count")[0].value = i;
// ^----Fixed!
// ^-------- return HTML Collection, take first.
Better use id:
document.getElementById("hiddenSection").value = i;
You're using jQuery, so you can use one of the following:
$("#hiddenSection").val(i);
$('input[name="Count"]').val(i);