I am trying to build a simple Pension calculator. Three inputs are taken in one form page and the result is displayed in another page. Output is in text format. But the following problem happens:
The output is shown as e.g. 2100021000 instead of actual 21000 this happens in all calculated results.
How to display results properly without the repeats ?
How do I display results in three separate text boxes in the results page similar to the text input form page ? I'm new to this. Need help.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title>Pension Calculator</title>
<link rel="stylesheet" href="js1/jquery.mobile-1.4.3.min.css" type="text/css"/>
<script src="js1/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js1/jquery.mobile-1.4.3.min.js" type="text/javascript"></script>
<script>
// Bind to 'pageinit' event for our data page
//$(document).delegate('#data', 'pageinit', function(){
$(document).on('pagecreate', '#page1', function() {
// Do some processing when the button with id 'calc' is clicked or tapped
$('#calc').bind('click', function() {
//event.preventDefault();
var basic = $('[name="basic"]').val(),
pbasic = $('[name="pbasic"]').val(),
gratuity = $('[name="gratuity"]').val(),
da = $('[name="da"]').val(),
years = $('[name="years"]').val(),
total = $('[name="total"]').val(),
basic = basic + (basic*da/100);
pbasic = basic/2;
da = pbasic*da/100;
gratuity = (basic) + ((da))*15/26 * years;
if
(gratuity > 1000000)
gratuity = 10000000;
total = (pbasic) + (da);
gratuity = gratuity.toFixed(2);
pbasic = pbasic.toFixed(2);
total = total.toFixed(2);
// Get to the DOM node that has the actual BMI text
// while ($total.children().length) {
// $total = $total.children().first();
// Set it to the calculated value
// $total.text(total);
$result = $('#results #gratuity');
$result.text(gratuity);
$result = $('#results #pbasic');
$result.text(pbasic);
$result = $('#results #total');
$result.text(total);
});
});
</script>
</head>
<body>
<div id="page1" data-role="page">
<header data-role="header">
<h1>Simple Pension Calculator</h1>
</header>
<div data-role="content" data-theme="a">
<div data-role="content">
<form id="theForm">
<div data-role="fieldcontain" data-inset="true">
<label for="basic">Present Basic (Basic including Grade Pay + NPA)</label>
<input type="number" name="basic" id="basic" value="0" autofocus required>
</div>
<div data-role="fieldcontain">
<label for="years">Years of Service</label>
<input type="number" name="years" id="years" value="0" required>
</div>
<div data-role="fieldcontain">
<label for="da">Existing DA (%)</label>
<input type="number" name="da" id="da" value="0" required>
</div>
</form>
<a id="calc" href="#results" data-role="button" data-icon="gear">Calculate</a>
</div>
</div>
</div>
<div id="results" data-url="results" data-role="page">
<div data-role="header">
<h1>Results</h1>
</div>
<div data-role="content">
Your Gratuity:<br>
<span id="gratuity"><span style="font-size: 52px; "><strong>24</strong></span></span><br>
Your Basic Pension:<br>
<span id="pbasic"><span style="font-size: 52px; "><strong>24</strong></span></span><br>
Your Pension:<br><br>
<span id="total"><span style="font-size: 52px; "><strong>24</strong></span></span>
</div>
</div>
</body>
</html>
Clean up your code like this:
<div id="page1" data-role="page">
<header data-role="header">
<h1>Simple Pension Calculator</h1>
</header>
<div role="main" class="ui-content">
<form id="theForm">
<div data-role="fieldcontain" data-inset="true">
<label for="basic">Present Basic (Basic including Grade Pay + NPA)</label>
<input type="number" name="basic" id="basic" value="0" autofocus required />
</div>
<div data-role="fieldcontain">
<label for="years">Years of Service</label>
<input type="number" name="years" id="years" value="0" required />
</div>
<div data-role="fieldcontain">
<label for="da">Existing DA (%)</label>
<input type="number" name="da" id="da" value="0" required />
</div>
</form>
<a id="calc" href="#results" data-role="button" data-icon="gear">Calculate</a>
</div>
</div>
<div id="results" data-url="results" data-role="page">
<div data-role="header">
<h1>Results</h1>
</div>
<div role="main" class="ui-content">
Your Gratuity:<br />
<span id="gratuity" class="resultspan"></span><br />
Your Basic Pension:<br />
<span id="pbasic" class="resultspan"></span><br />
Your Pension:<br />
<span id="total" class="resultspan"></span>
</div>
</div>
Style the results span with CSS class instead of inline:
.resultspan {
font-size: 52px;
font-weight: bold;
}
In the script, pbasic, gratuity and total are not read from the DOM but rather set during calculation, so initialize them to zero. When reading other values from the inputs, you can use parseInt() to ensure the text is converted to integers before using them in the calculations:
$('#calc').on('click', function() {
//event.preventDefault();
var basic = parseInt($('#basic').val()),
da = parseInt($('#da').val()),
years = parseInt($('#years').val()),
pbasic = 0,
gratuity = 0,
total = 0;
basic = basic + (basic*da/100);
pbasic = basic/2;
da = pbasic*da/100;
gratuity = (basic) + ((da))*15/26 * years;
if (gratuity > 1000000)
gratuity = 10000000;
total = (pbasic) + (da);
gratuity = gratuity.toFixed(2);
pbasic = pbasic.toFixed(2);
total = total.toFixed(2);
$('#results #gratuity').text(gratuity);
$('#results #pbasic').text(pbasic);
$('#results #total').text(total);
});
Working DEMO
Related
I am practicing to capture screenshot of webpage by using api.
I want to change the img src, on the button click.
Code is as follows:
<section>
<div class="urldiv">
<label for="Url">Url</label>.
<br>
<input type="text" name="Url"
id="input" value="" />
</div>
<div class="ss">
<img id="sh" src="https://api.screenshotmachine.com?key=c04d3a&url=screenshotmachine.com&dimension=1024x768"/>
</div>
<button onclick="changeimg()">Capture</button>
</section>
And this is JavaScript:
<script type="text/javascript" charset="utf-8">
var url = document.getElementById("input").value;
function changeimg() {
document.getElementById("screenshot").src = "https://api.screenshotmachine.com?key=c04d3a&url=" + url + "&dimension=1024x768";
}
</script>
You should get the input value inside the function and the img id is sh not screenshot
Now it's work
const input = document.getElementById("input");
function changeimg() {
document.getElementById("sh").src = "https://api.screenshotmachine.com?key=c04d3a&url=" + input.value + "&dimension=1024x768";
}
<section>
<div class="urldiv">
<label for="Url">Url</label>.
<br>
<input type="text" name="Url" id="input" value="" />
<button onclick="changeimg()">Capture</button>
</div>
<div class="ss">
<img id="sh" src="https://api.screenshotmachine.com?key=c04d3a&url=screenshotmachine.com&dimension=1024x768"/>
</div>
</section>
How can i get total of dynamically created each fields value
<div class="rf-row count-container">
<input class="total">
<div class="row">
<input class="add-monthly">
</div>
<div class="row">
<input class="add-monthly">
</div>
<div class="row">
<input class="add-monthly">
</div>
</div>
Please check this code this may help
<!DOCTYPE html>
<html>
<head>
Demo
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="rf-row count-container">
<input class="total">
<div class="row">
<input class="add-monthly" value="5">
</div>
<div class="row">
<input class="add-monthly" value="5">
</div>
<div class="row">
<input class="add-monthly" value="5">
</div>
</div>
<script>
$(document).ready(function(){
var value = 0;
$('.count-container .row').each(function(){
value += parseInt($(this).find('.add-monthly').val()) ? parseInt($(this).find('.add-monthly').val()) : 0
})
$('.total').val(value);
});
</script>
</body>
</html>
check below link
https://codepen.io/anon/pen/gdpZpR?editors=1010
Since you have jquery tagged, the following is the way you'd iterate over all your inputs of class add-monthly and sum their values together, finally returning the sum value:
function sumFields() {
var totalSum = 0;
$("input.add-monthly").each(function () {
totalSum += $(this).val();
});
return totalSum;
}
If you are dynamically adding input fields, I would suggest delegating the change functionality to the parent .count-container. Once the event is triggered, I am iterating over the .add-monthly fields to sum up their values. To help JavaScript understand that these values are floats (since I assume we are dealing with a currency), I am using parseFloat() to insure the value can be added to the sum. Lastly, I am setting the value of .sum-monthly to use toFixed() to format a number using a fixed-point notation (again I am assuming we are dealing with a currency).
$(document).ready(function() {
$('.count-container').on('change', '.add-monthly', function() {
let total = 0;
$('.add-monthly').each(function() {
total += parseFloat($(this).val()) || 0;
});
$('.sum-monthly').val(total.toFixed(2));
}).find('.add-monthly').change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rf-row count-container">
<input class="sum-monthly" readonly>
<div class="sub-rf-row">
<input class="add-monthly">
</div>
<div class="sub-rf-row">
<input class="add-monthly">
</div>
<div class="sub-rf-row template">
<input class="add-monthly">
</div>
</div>
var classes = document.getElementsByClassName('add-monthly')
classes = [...classes]
var result = classes
.map(item => +item.value)
.reduce((a, b) => a + b, 0);
document.getElementsByClassName('sum-monthly')[0].value = result
console.log('summ', result)
<div class="rf-row count-container">
SUM: <input class="sum-monthly"/><br/>
<div class="sub-rf-row">
<input class="add-monthly" type="number" value="1">
</div>
<div class="sub-rf-row">
<input class="add-monthly" type="number" value="4">
</div>
<div class="sub-rf-row template">
<input class="add-monthly" type="number" value="0">
</div>
</div>
I want to make a book catalog with JQuery to add books to a author. In the code That I have I am trying to add a author and have his books be in a array with his number only. Separated by other authors and their own arrays of books.
For example, when I press the button to add a author a input box appears so that I can add the authors name also a button to add a book that when I press that button I get an input box to add a books name.
When I press the add author again I want to be able to add another author with the same input boxes as before (adding more books to that author).
Also to add multiple books assigned to that author.
I have already done this in the pics but I get an array of everything. I want it to be separated by author.
author1 has an array of {book1, book2, book3...}
author2 has an array of {book13, book14, book15}
(i'm a beginner at JQuery)
This is the code that I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="my-form">
<form role="form" method="post">
<p class="all_fields">
<button class="add_author">Add Author</button>
<div id="commonPart" class="commonPart">
<label for="author1">Author <span class="author-number">1</span></label>
<br/>
<input type="text" name="author" value="" id="author1" />
<br/>
<button class="add_book">Add book</button>
<div>
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function($){
var wrapper = $(".all_fields"); //Fields wrapper
var commonPart = $("#commonPart");
var add_author = $(".add_author"); //Add button ID
var add_subButton = $(".add_book"); //Add sub button ID
$('.my-form .add-box').click(function(){
var n = $('.all_fields').length + 1;
if( 15 < n ) {
alert('Stop it!');
return false;
}
$(add_author).click(function(e){
e.preventDefault();
var htmlToAdd = $('<label for="author' + n + '">Author <span class="author-number">' + n + '</span></label><br/><input type="text" name="author' + n + '" value="" id="author' + n + '" /><br/><button class="add_book">Add book</button><a class="add-book" href="#">Add Book</a><div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
htmlToAdd.hide();
$('.my-form p.all_fields:last').after(htmlToAdd);
box_html.fadeIn('slow');
return false;
});
$(add_book).click(function(e){
e.preventDefault();
var htmlToAdd = $('<div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
htmlToAdd.hide();
$('.my-form p.all_fields:last').after(htmlToAdd);
box_html.fadeIn('slow');
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>
updated code(fixed some bugs..), try this....
<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="my-form">
<button onclick="addAuthor()" >Add Author</button><br><br>
<div id="addAuth"></div>
<br><br>
<button onclick="submit()" >Submit</button>
</div>
<div id="result" ></div>
</div>
<script type="text/javascript">
var authors = 0;
function addAuthor(){
authors++;
var str = '<div id="auth'+authors+'"><input type="text" name="author" id="author'+authors+'" />'
+'<button onclick="addMore(\'auth'+authors+'\')" >Add Book</button>'
+'</div>';
$("#addAuth").append(str);
}
var count=0;
function addMore(id){
count++;
var str = '<div id="bookDiv'+count+'">'
+'<input class="'+id+'" type="text" name="book'+id+'" />'
+'<span onclick="addMore(\''+id+'\')" style="font-size: 20px; background-color: green; cursor:pointer;">+</span>'
+'<span onclick="removeDiv(\'bookDiv'+count+'\')" style="font-size: 20px; background-color: red; cursor:pointer; margin-left:1%;">-</span>'
+'</div>';
$("#"+id).append(str);
}
function removeDiv(id){
var val = confirm("Are you sure ..?");
if(val){
$("#"+id).slideUp(function(){$("#"+id).remove();});
}
}
function submit(){
var arr = [];
for(i=1; i<=authors; i++){
var obj = {};
obj.name = $("#author"+i).val();
obj.books = [];
$(".auth"+i).each(function(){
var data = $(this).val();
obj.books.push(data);
});
arr.push(obj);
}
$("#result").html(JSON.stringify(arr));
}
</script>
</body>
</html>
Please try this code and include jquery min js :
<div class="my-form">
<form role="form" method="post">
<p class="all_fields">
<div id="commonPart" class="commonPart">
<label for="author1">Author <span class="author-number"></span></label>
<input type="text" name="author" value="" id="author1" />
<br/>
<div>
<label for="author1">book <span class="author-number"></span></label>
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
<button type="button" class="add_author" onclick="AddCustomMOre();">Add More</button>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
<script> function AddCustomMOre(){
$(".all_fields ").append('<div id="commonPart" class="commonPart"><label for="author1">Author <span class="author-number"></span></label> <input type="text" name="author" value="" id="author1" /> <br/> <div><label for="author1">book <span class="author-number"></span></label> <input type="text" class="bookName" name="authBook[]"/></div> Remove</div>');
} </script>
You can try this....
<p class="all_fields">
<button class="add_author">Add Author</button>
<div class="commonPart">
<label for="author1">Author <span class="author-number">1</span></label>
<br/>
<input type="text" name="author1" value="" id="author1" />
<br/>
<button div-id="1" class="add_book">Add book</button>
<div id="books1">
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
</p>
<script>
var c=1;
$(".add_author").on("click",function(){
c++;
$(".all_fields").append('<div class="commonPart"><label for="author'+c+'">Author <span class="author-number">'+c+'</span></label><br/><input type="text" name="author'+c+'" value="" id="author'+c+'" /><br/><button class="add_book" div-id="'+c+'">Add book</button><div id="books'+c+'"><input type="text" class="bookName" name="authBook[]"/></div></div>');
});
$(".add_book").on("click",function(){
var id=$(this).attr("div-id");
$("#books"+id).append('<input type="text" class="bookName" name="authBook[]"/>');
});
</script>
I've read a lot about uncaught reference errors here and think I have the idea down - when the script is trying to call a function or reference a variable that hasn't been initialized yet. However, I am uncertain how to fix this, and why in my case one function works and the other doesn't.
I have one JS file with two functions in it, and one HTML file with a form. The form calls function1 onSubmit, and that works fine. A radio button inside of the form calls function2 onClick, and that's when I get the error:
Uncaught ReferenceError: toggleGender is not defined onclick # forms.html:20
Why would my first function work and not the second? It seems to me like they are operating under the same premise.
function calculatePFT()
{
var userForm = document.getElementById('userValues');
var pullups = userForm.userPullups.value;
var crunches = userForm.userCrunches.value;
var runMinutes = userForm.userMinutes.value;
var runSeconds = userForm.userSeconds.value;
var runScore = 0;
if(runMinutes < 18) { runScore = 100; }
else
{
var minDiff = runMinutes - 18;
var minPoints = minDiff * 6;
var secPoints = Math.ceil(runSeconds/10);
runScore = 100 - (minPoints + secPoints);
}
var score = parseInt(pullups*5) + parseInt(crunches) + parseInt(runScore);
document.getElementById('scoreBox').innerHTML = "You scored " + pullups + " pullups and " + crunches + " crunches and a run time of " + runMinutes + " minutes " + runSeconds + " seconds. TOTAL SCORE: " + score;
}
function toggleGender(var gender)
{
alert("Inside");
var maleForm = document.getElementById('male');
var femaleForm = document.getElementById('female');
if(gender == "f")
{
alert("Female");
maleForm.style.display = 'none';
femaleForm.style.display = 'block';
}
else
{
alert("Male");
maleForm.style.display = 'block';
femaleForm.style.display = 'none';
}
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Javascript Testing</title>
<link rel="stylesheet" href="style.css" />
<script src="scripts.js"></script>
</head>
<body>
<section id="wrapper">
<h3>PFT Calculator</h3>
<form action="#" id="userValues" method="post" onSubmit="calculatePFT()">
<div id="gender">
<span class="maleFemale">Male <input type="radio" name="maleFemale" value="male" CHECKED onClick="toggleGender('m')" /></span>
<span class="maleFemale">Female <input type="radio" name="maleFemale" value="female" onClick="toggleGender('f')" /></span>
</div>
<div id="male">
<div class="scoreLine">
<div class="label">Pullups:</div>
<div class="entry"><input type="number" name="userPullups" min="0" max="20" default="18" class="scoreEntry" required /></div>
</div>
</div>
<div id="female">
<div class="scoreLine">
<div class="label">Hang:</div>
<div class="entry"><input type="number" name="userHang" min="0" max="150" default="70" class="scoreEntry" required /></div>
</div>
</div>
<div class="scoreLine">
<div class="label">Crunches:</div>
<div class="entry"><input type="number" name ="userCrunches" min="0" max="100" default="100" class="scoreEntry" required /></div>
</div>
<div class="scoreLine">
<div class="label">Run (Minutes):</div>
<div class="entry"><input type="number" name="userMinutes" min="0" max="100" default="19" class="scoreEntry" required /></div>
</div>
<div class="scoreLine">
<div class="label">Run (Seconds):</div>
<div class="entry"><input type="number" name="userSeconds" min="0" max="59" default="30" class="scoreEntry" required /></div>
</div>
<div style="text-align:center;"><input type="submit" value="Calculate Score!" id="submitButton" /></div>
</form>
<span id="scoreBox"></span>
</section>
</body>
</html>
function toggleGender(var gender)
You have a syntax error here. Argument names should not be prefixed by var. This causes the functional declaration to fail (hence why you get a reference error when you try to call it).
function calculatePFT()
{
var userForm = document.getElementById('userValues');
var pullups = userForm.userPullups.value;
var crunches = userForm.userCrunches.value;
var runMinutes = userForm.userMinutes.value;
var runSeconds = userForm.userSeconds.value;
var runScore = 0;
if(runMinutes < 18) { runScore = 100; }
else
{
var minDiff = runMinutes - 18;
var minPoints = minDiff * 6;
var secPoints = Math.ceil(runSeconds/10);
runScore = 100 - (minPoints + secPoints);
}
var score = parseInt(pullups*5) + parseInt(crunches) + parseInt(runScore);
document.getElementById('scoreBox').innerHTML = "You scored " + pullups + " pullups and " + crunches + " crunches and a run time of " + runMinutes + " minutes " + runSeconds + " seconds. TOTAL SCORE: " + score;
}
function toggleGender(gender)
{
alert("Inside");
var maleForm = document.getElementById('male');
var femaleForm = document.getElementById('female');
if(gender == "f")
{
alert("Female");
maleForm.style.display = 'none';
femaleForm.style.display = 'block';
}
else
{
alert("Male");
maleForm.style.display = 'block';
femaleForm.style.display = 'none';
}
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Javascript Testing</title>
<link rel="stylesheet" href="style.css" />
<script src="scripts.js"></script>
</head>
<body>
<section id="wrapper">
<h3>PFT Calculator</h3>
<form action="#" id="userValues" method="post" onSubmit="calculatePFT()">
<div id="gender">
<span class="maleFemale">Male <input type="radio" name="maleFemale" value="male" CHECKED onClick="toggleGender('m')" /></span>
<span class="maleFemale">Female <input type="radio" name="maleFemale" value="female" onClick="toggleGender('f')" /></span>
</div>
<div id="male">
<div class="scoreLine">
<div class="label">Pullups:</div>
<div class="entry"><input type="number" name="userPullups" min="0" max="20" default="18" class="scoreEntry" required /></div>
</div>
</div>
<div id="female">
<div class="scoreLine">
<div class="label">Hang:</div>
<div class="entry"><input type="number" name="userHang" min="0" max="150" default="70" class="scoreEntry" required /></div>
</div>
</div>
<div class="scoreLine">
<div class="label">Crunches:</div>
<div class="entry"><input type="number" name ="userCrunches" min="0" max="100" default="100" class="scoreEntry" required /></div>
</div>
<div class="scoreLine">
<div class="label">Run (Minutes):</div>
<div class="entry"><input type="number" name="userMinutes" min="0" max="100" default="19" class="scoreEntry" required /></div>
</div>
<div class="scoreLine">
<div class="label">Run (Seconds):</div>
<div class="entry"><input type="number" name="userSeconds" min="0" max="59" default="30" class="scoreEntry" required /></div>
</div>
<div style="text-align:center;"><input type="submit" value="Calculate Score!" id="submitButton" /></div>
</form>
<span id="scoreBox"></span>
</section>
</body>
</html>
i want to iterate through a group of radio buttons generated dynamically and get their labels, but when i attempt to print their values nothing appears, see this script demo for an example http://jsfiddle.net/HaBhk/20/ and here's my html where the generated buttons will go
<div data-role="content">
<div data-role="collapsible" data-inset="true">
<h1>AddVote</h1>
<div data-role="fieldcontain" >
<input type="text" name="name" id="question" value="" /><br>
<div data-role="controlgroup" data-type="horizontal" >
<label for="name"><a href="" id="AddButton" data-role="button"
data-icon="plus">Add</a><a href="" id="RemoveButton" data-role="button"
data- icon="delete">Delete</a>
</label>
<input type="text" name="option" id="option" value="" /><br>
</div>
<div data-role="fieldcontain">
<form name="OptionsForm" id="InputForm" method="get">
<div id="after" data-role="controlgroup">
/////Generated radio buttons goes here
</div>
</form>
</div>
<a href="#approve" id="publishButton" data-role="button"
data-inline="true"data-transition="flip">Preview</a>
</div><!-- /content -->
below is my script to get radio buttons values:
$('#publishButton').click(function(){
var result
var y=document.getElementById('question').value
var form='<Question value=' + y + '/>'+'<br>'
alert(form);
$('input:radio').each(function() {
var value=$('input:radio').val()
'<option value='+value + '/>'+'<br>'
alert(result);
});
Here is some sample code that will return the relevant labels for the radio options.
var labels = [];
$('input:radio').each(function(){
labels.push($('label[for='+$(this).attr('id')+']').text());
});
alert(labels);
$('#publish').click(function () {
var labs = $(':radio + label'),
alertString =[];
for (var i = 0, labLen = labs.length; i < labLen; i += 1) {
alertString[i] = labs[i].id;
};
alert(alertString.join("\n"));
});
Try this: http://jsfiddle.net/HaBhk/24/
<input type="text" name="option" id="option" value="" /><br>
<div id="AddButton" data-role="button" data-inline="true">Add</div>
<div id="RemoveButton" data-role="button" data-inline="true">remove</div>
<div id="publishButton" data-role="button" data-inline="true">publish</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup"><legend>Choose an Option:</legend><br><br>
<div id="after">
</div>
</fieldset>
</div>
<script type="text/javascript">
function createRadioElement(elem, label, checked) {
var id = 'option1_' + label;
$('#after').append($('<div><input type="radio" name="option1" id="'+id+ '" value="1"/><label for="' + id + '">'+label + '</label></div>'));
}
$('#AddButton').click(function() {
var x = document.getElementById('option').value;
createRadioElement(this, $('#option').val());
});
$('#RemoveButton').click(function() {
$('#after').children().children("input[checked='checked']").parent().remove();
});
$('#publishButton').click(function() {
var result;
$('#after input:radio').each(function() { // only radio buttons in #after
var value = $(this).next('label').html();
alert(value);
});
});
</script>