Javascript created elements not posting on submission - javascript

Ive posted a few times but I'm still not coming right with this problem so below is the all the code, the problem is that the dynamically created elements are not appearing in _POST after submission. but I do see them in the modified source in firefox.
The Javascript inserts elements in between the following div,
<div id="p_scents">
</div>
but as mentioned do not show in in _POST
Below is the full source code so the problem can be replicated.
<html >
<head>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.Jcrop.js"></script>
<script type="text/javascript">
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').on('click', function() {
$('<p><label for="p_scnts"><input type="text" size="20" name="url' + i +'" value="" placeholder="Input Value" /></label> Remove</p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').on('click', function() {
if( i > 1 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>
<script type="text/javascript">
jQuery(function($){
var jcrop_api;
$('#target').Jcrop({
onChange: showCoords,
onSelect: showCoords,
onRelease: clearCoords
},function(){
jcrop_api = this;
});
$('#coords').on('change','input',function(e){
var x1 = $('#x1').val(),
x2 = $('#x2').val(),
y1 = $('#y1').val(),
y2 = $('#y2').val();
jcrop_api.setSelect([x1,y1,x2,y2]);
});
});
function showCoords(c)
{
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
};
function clearCoords()
{
$('#coords input').val('');
};
</script>
</head>
<body>
<table border=1 cellpadding="1" cellspacing="0" width=80%>
<form action="/index.php/create" method="post" accept-charset="utf-8"> <tr>
<td>
Select image
</td>
<td>
<input type="file" name="image"/>
</td>
</tr>
<tr><td colspan=2 align=center>
Add Another Input Box
</td>
</tr>
<tr><td>
Give your banner a unique name</td>
<td>
<input type="text" name="name" value="" id="name" autofocus /> </td></tr>
<tr><td>Specify email address or domain to brand</td>
<td>
<input type="text" name="domainName" value="" id="domain" /> </td></tr>
<tr><td>Status</td>
<td>
<select name="status">
<option value="enabled">Enabled</option>
<option value="disabled">Disabled</option>
</select> </td></tr>
<tr><td>Give you banner a default URL</td>
<td>
<input type="text" name="url" value="" id="url" /> </td></tr>
<tr><td valign=top>Alternate Urls
</td>
<td>
<div id="p_scents">
</div>
<input type=submit>
</form> </td>
</tr>
</table>
</body>
</html>


You have multiple nesting errors in your HTML. Your <form> tag is put immediately inside the <table> - that is incorrect! Also the enclosing tag of the form is put inside the last <td>. Your markup should look like this:
<form ...>
<table ...>
<tr ...>
<td ...>
...
</td>
...
</tr>
...
</table>
</form>

Related

Multi level add more button using jquery

I want to develop a multilevel add more button using jquery.
I did that functionality, but its not success. It has many bugs. Some Logical issues are there...
My actual requirement there is one "Add more" button. When we click this add more button one Div will open. In side that div there is one text box and another one "add more" button
For example, First i add the main option value is "Bajaj". Under this option i want to add some options like "Discover", "Platina",...
Then i click next add more button and add the next option value is "Yamaha" under this Option i need to add sub options like FZ,YBR, Ray...
<div id="tabularoptions">
<input id="btnAdd" type="button" value="Add Options" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
<?php
if ($form['tabularOptions'] != '') {
foreach ($form['tabularOptions'] as $opt) {
?>
<div style="border:1px solid #ccc;margin: 10px;">
<table>
<tr>
<td>Option Value :</td>
<td>
<input name = 'tabluarOptionValue_<?php echo $opt['id']; ?>' type="text" value = "<?php echo $opt['tabularOptionValue']; ?>" />
<input type="hidden" name="tabluarOptionId_<?php echo $opt['id']; ?>" value="<?php echo $opt['id']; ?>">
</td>
<td><input type="button" value="Remove" class="remove" /></td>
<?php
if ($form['tabularSubOptions'] != '') {
foreach ($form['tabularSubOptions'] as $optsub) {
if ($optsub['tabularOptionId'] == $opt['id']) {
?>
<tr>
<td>
<input type="text" name="tabularSuboptionValue_<?php echo $optsub['id']; ?>" value="<?php echo $optsub['tabularSuboptionValue']; ?>">
<input type="hidden" name="tabularSuboptionId_<?php echo $optsub['id']; ?>" value="<?php echo $optsub['id']; ?>">
<input type="button" class="subOptionRemove" value="X">
</td>
</tr>
<?php
}
}
}
?>
</tr>
<tr>
</tr>
<tr>
<table>
<tr class="subOptionDiv">
<td><input class = "btnAdd1" type="button" value = "Add Suboptions" /></td>
</tr>
</table>
</tr>
</table>
</div>
<?php
}
}
?>
</div>
<script>
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
$("body").on("click",".btnAdd1", function () {
$(this).closest("table").append('<tr>\n\
<td>\n\
<input type="text" name="tabularSuboptionValue_'+j+'[]">\n\
<input type="button" class="subOptionRemove" value="X">\n\
</td>\n\
</tr>');
});
$("body").on("click",".subOptionRemove", function () {
$(this).parent().remove();
});
});
var j = 1;
function GetDynamicTextBox(value) {
j=j+1;
$('#optionCount').val(j);
// alert(j);
return '<div id='+j+' style="border:1px solid #ccc;margin: 10px;"><table>\n\
<tr>\n\
<td>Option Value :</td>\n\
<td><input name = "tabluarOptionValue_'+j+'[]" type="text" value = "' + value + '" /></td>\n\
<td><input type="button" value="Remove" class="remove" /></td>\n\
</tr>\n\
<tr>\n\
</tr>\n\
<tr>\n\
<table>\n\
<tr class="subOptionDiv"><td><input class = "btnAdd1" type="button" value = "Add Suboptions" /></td></tr>\n\
<tr>\n\
<td>\n\
<input type="text" name="tabularSuboptionValue_'+j+'[]">\n\
<input type="button" class="subOptionRemove" value="X">\n\
</td>\n\
</tr>\n\
</table>\n\
</tr>\n\
</table></div>';
}
</script>

Please try this code may be usefull for you.
Put this jquery/javascript code where you js code is.
<script type="text/javascript">
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
Put this code in your php/html file where you want the text box.
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>

Try this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<table width="100%" cellpadding="0" cellspacing="0" id="type">
<tr >
<td align="left">Subcategory</td>
</tr>
<tr>
<td>Type : <input type="text" name="type" id="type" /></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" >
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" id="subtype1">
<tr>
<td>
Subtype : <input type="text" name="type" id="type" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div>
<input type="button" name="addsub" value="Add Subtype" onclick="addmore('1')" />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div>
<input type="button" name="add" value="Add Type" onclick="addmoretype()" />
</div>
Javascript
num = 2;
function addmore(id)
{
var tablename = "#subtype"+id;
$(tablename+' tr:last').after('<tr><td> Subtype: <input type="text" name="type" id="type" /> </td> </tr>');
}
function addmoretype()
{
$('#type tr:last').after('<tr> <td>Type : <input type="text" name="type" id="type" /></td></tr> <tr> <td><table width="100%" cellspacing="0" cellpadding="0" > <tr> <td> <table width="100%" cellspacing="0" cellpadding="0" id="subtype'+ num+'"> <tr> <td> Subtype : <input type="text" name="type" id="type" /></td></tr> </table></td> </tr><tr> <td> <div> <input type="button" name="addsub" value="Add Subtype" onclick="addmore('+ num+')" /> </div> </td> </tr></table> </td></tr>');
num++;
}
see working example

add select box with row using JavaScript

I want that in newly created all options of select box to be present and I want to do it javascript. But I cant figure out how to do when there are too many options
<table id="newtable">
<tr>
<td>
<input name="name" type="text" id="name"/>
</td>
<td>
<select name="gender" id="gender">
<option>Male</option>
<option>Female</option>
</select>
</td>
<td>
<input name="add_button" type="button" id="add_button" value="Add"/>
</td>
<tr>
</table>
var itemCount = 0;
$(document).ready(function() {
var objs = [];
var temp_objs = [];
$("#add_button").click(function() {
var html = "";
var obj = {
"name" : $("#name").val(),
"gender" : $("#gender").val(),
}
$("#name").val('');
$("#gender").val(''),
objs.push(obj);
itemCount++;
html = "<tr>" +
"<td><INPUT type='text' name='txt1[]' value='" + obj['name'] + "'/></td>" +
"<td><select><option>" + obj['gender'] + "</select></option></td></tr>";
$("#newtable").append(html);
});
});

Just make it as simple. Use below Code. It will solve your issue.
<script type="text/javascript">
$(document).ready(function(){
$( "#add_button" ).click(function() {
var newVal=$("#name").val();
var s= document.getElementById('gender');
s.options[s.options.length]= new Option(newVal);
});
});
</script>
And your html will be as below:
<table id="newtable">
<tr>
<td>
<input name="name" type="text" id="name"/>
</td>
<td>
<select name="gender" id="gender">
<option>Male</option>
<option>Female</option>
</select>
</td>
<td>
<input name="add_button" type="button" id="add_button" value="Add"/>
</td>
<tr>
</table>

I believe clone() will be the best option for your example. You can copy the behavior of the button as well by using clone(true, true) (sets the options withDataAndEvents and deepWithDataAndEvents). Run the code below to check:
$(document).ready(function() {
$(".add_button").click(function() {
var currentRow = $(this).parents("tr");
var nr = currentRow.clone(true, true);
nr.find(".name").val('');
currentRow.after(nr); //instead of `$("#newtable").append(nr);`: it places the new row after the clicked row
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="newtable">
<tr>
<td>
<input name="name" type="text" class="name" />
</td>
<td>
<select name="gender" class="gender">
<option>Male</option>
<option>Female</option>
</select>
</td>
<td>
<input name="add_button" type="button" class="add_button" value="Add" />
</td>
</tr>
</table>
From your code, I needed to add a slash in the last <tr> to close it and also change the ids to classes (since there are going to be a lot of them).
Hope it helps!

jQuery .submit() function not working inside of .ready() function

I have a Classic ASP application which uses a dynamic table to submit inventory information. All of my functions inside the jQuery script until I get down to the .submit() part. I am trying to check that an employee number is given as well as that there are no blank fields before the form is submitted. Any help?
Here's my form:
<form name="filter" id="theForm" method="GET" action="InventoryIssues.asp">
<table class="normsideBG" align="center" cellpadding="4" cellspacing="0" border="1" bordercolor="lightgrey" width="600px">
<tr class="norm">
<td class="bigger headerBG" align="center" colspan=6>
<b>Inventory Issues</b>
</td>
</tr>
<tr class="norm">
<td>
</td>
</tr>
<tr class="norm">
<td class="norm" align ="right">
<b>Enter Employee Number: </b><input type="text" id="employeeNum" name="employeeNum" value = "<%=employeeNum %>" />
<select id="hiddenBox" name="hiddenBox" style="display: none" >
</select>
<input type="hidden" name="action" value="set_filter">
</td>
</tr>
<tr>
<td class="norm">
To add more records click 'Add New Record'. Submit when all records are completed.
<br />
<br />
<input style="text-align: right" type="hidden" name="hasValues" value="false" />
<center>
<button type="button" id="addRec">Add New Record</button>
<button type="button" id="delRec">Remove Last Record</button><br /><br />
<input type="submit" id="sub" name="submit" class="norm" value="Submit"/>
</center>
</td>
</tr>
</table>
<table id= "tb1" class="norm sideBG" name="recordTable" align="center" cellpadding="4" cellspacing="0" border="1" bordercolor="lightgrey" width="600px">
<tr class="norm">
<td>
<b><u>PART #</u></b>
</td>
<td>
<b><u>LOCATION</u></b>
</td>
<td>
<b><u>QUANTITY</u></b>
</td>
<td>
<b><u>WHERE USED</u></b>
</td>
</tr>
<tbody class="theRow" id="theRow">
<tr>
<td class="norm">
<label id="partLabel" style="color : red;"></label>
<br />
<input type='text' name='txtbox0[]' id='txtbox0[]' onchange="javascript: changeLabel(this)" />
</td>
<td class="norm">
<select id="txtbox1[]" name="txtbox1[]" >
</select>
</td>
<td class="norm">
<input type='text' name='txtbox2[]' id='txtbox2[]' />
</td>
<td class="norm">
<input type='text' name='txtbox3[]' id='txtbox3[]' />
</td>
</tr>
</tbody>
</table>
</form>
Here is my jQuery
'<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{
var ctr = 0;
$("#addRec").click(function ()
{
var clone = $("#tb1 > tbody.theRow:last").clone();
clone.find("input").val("");
clone.insertAfter("#tb1 > tbody.theRow:last");
$("#hasValues").val(true);
});
$("#delRec").click(function ()
{
$("#tb1:last tbody.theRow:last").remove();
});
alert("at least this works");
$("form#theForm").submit(function(event)
{
var blankEmployeeNum;
var blankFields = false;
var inp = $("#employeeNum");
if (inp.val().length == 0 || inp.val() == Null)
{
alert("blank empoyee num");
blankEmployeeNum = true;
}
else
{
alert("the employee num has a value");
blankEmployeeNum = false;
}
$("#tb1 tr").each(function()
{
$("td", this).each(function()
{
var value = $(this).find(":input").val()
if (value.val().length == 0 || value.val() == Null)
{
alert("there's a blank field");
blankFields = true;
}
});
});
if (blankEmployeeNum)
{
alert("Please go back and enter an employee number before submitting.");
event.preventDefault();
}
else if (blankFields)
{
alert("One or more of the fields submitted were blank. Please go back and try again.";
event.preventDefault();
}
});
});
'

There is a script error
Update
alert("One or more of the fields submitted were blank. Please go back and try again.";
to
alert("One or more of the fields submitted were blank. Please go back and try again.");
You are missing the closing bracket.
Please note there are some more script errors too. Please resolve then by checking in console.
I have found out few for you like changeLabel is not a function etc. You really need to work a lot on the script. There are many errors.

You need to call event.preventDefault() at first inside the submit function, otherwise the event bubbles up and the form is submitted.
$("form#theForm").submit(function(event) {
event.preventDefault();

Form validation using Jquery focus and blur method

I am trying to do simple form validation by using jQuery. Actually I am try to validate the input boxes on blur and focus. I am just validating first input for now which validate user first name.It is not functioning properly.
Can any please help me?
HTML & JS CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Test
</title>
<style type="text/css">
.showerror{
display:block;
}
.noshowerror{
display:none;
}
.remerr{
display:none;
}
.redborder{
border:#F00 solid 1px;
background-color:yellow;
}
.greenborder {
border:#0F3 solid 1px;
background-color:#6F6;
}
</style>
</head>
<body>
<div style="width:450px">
<div style="float:left">
<table>
<form id="eg">
<tr>
<td>
<label>
Name:
</label>
<td>
<input type="text" id="name" />
</tr>
<tr>
<td>
<label>
Surname:
</label>
<td>
<input type="text" id="surname" />
</tr>
<tr>
<td>
<label>
Email:
</label>
<td>
<input type="text" id="email" />
</tr>
<tr>
<td>
<label>
Number:
</label>
<td>
<input type="text" id="number" />
</tr>
<tr>
<td>
<label>
Age:
</label>
<td>
<input type="text" id="age" />
</tr>
<tr>
<td>
<label>
Comment:
</label>
<td>
<input type="text" id="comment" />
</tr>
<tr>
<td>
<label>
Password
</label>
<td>
<input type="password" id="pwd" />
</tr>
<tr>
<td>
<label>
Confirm Password
</label>
<td>
<input type="password" id="cnfmpwd" />
</tr>
<tr>
<td colspan="2">
<input type="submit" value="test" />
</td>
</tr>
</form>
</table>
</div>
<div style="float:right">
<p id="fail" class="noshowerror" >
Please enter name
</p>
<p id="nameerr2" class="remerr">
Name is correct
</p>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
});
$('#name').blur(function () {
var nameRegex = /^[A-Za-z]+$/;
var fname = document.getElementById("name").value;
if (!nameRegex.test(fname)) {
$("#name").addClass('redborder');
} else if (fname == " ") {
$("#name").addClass('redborder');
} else {
$("#name").addClass('greenborder');
return false;
}
});
});
</script>
</body>
</html>
Thanks in advance

I have refined our code and its working as you intended, there were several mistake in defining the elements within table,may be you can have a look at my code on how to define it .
LIVE DEMO
HTML CODE:
<body>
<div style="width:450px">
<div style="float:left">
<form id="eg" action="/">
<table>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" id="name" />
</td>
</tr>
<tr>
<td>
<label>Surname:</label>
</td>
<td>
<input type="text" id="surname" />
</td>
</tr>
<tr>
<td>
<label>Email:</label>
</td>
<td>
<input type="text" id="email" />
</td>
</tr>
<tr>
<td>
<label>Number:</label>
</td>
<td>
<input type="text" id="number" />
</td>
</tr>
<tr>
<td>
<label>Age:</label>
</td>
<td>
<input type="text" id="age" />
</td>
</tr>
<tr>
<td>
<label>Comment:</label>
</td>
<td>
<input type="text" id="comment" />
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" id="pwd" />
</td>
</tr>
<tr>
<td>
<label>Confirm Password</label>
</td>
<td>
<input type="password" id="cnfmpwd" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="test" onclick="return false;" />
</td>
</tr>
</table>
</form>
</div>
</div>
<div style="float:right">
<p id="fail" class="noshowerror">Please enter name</p>
<p id="nameerr2" class="remerr">Name is correct</p>
</div>
</body>
JS CODE:
$(document).ready(function () {
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
});
$('#name').blur(function () {
var nameRegex = /^[A-Za-z]+$/;
// var fname = document.getElementById("name").value;
var fname = $("#name").val();
alert(nameRegex.test(fname));
if (!(nameRegex.test(fname))) {
$("#name").removeClass('greenborder').addClass('redborder');
} else if (fname == " ") {
$("#name").removeClass('greenborder').addClass('redborder');
} else {
$("#name").removeClass('redborder').addClass('greenborder');
return false;
}
});
});
When your using jQuery lib, make sure you make the most of it, i have seen that there was raw javascript syntax in your code. jQuery was designed make things easier by reducing the syntax.
Edited:
I have refined the code, so that the code work on any number of times.
Happy Coding :)

$('#name').blur(function(){
trigger the blur event.
To listen for the blur event, made by the user :
$('#name').on("blur", function(){

if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
can be changed by :
<input type="text" name="name" id="name" placeholder="Name Please" />
http://www.w3schools.com/tags/att_input_placeholder.asp
For your issue :
var fname = $("#name").val(); //jQuery style
$('#name').on("blur", function(){
// we want element #name a range of letters
var regexp = /^([A-Za-z])+$/;
// if the element #name contains a range of letters defined in var regexp
if (!nameRegex.test(fname)) {
$("#name").addClass('redborder');
return true;
}
// if the element #name is empty, does not contain string
if ( $("name").length === 0 ) {
$("#name").addClass('redborder');
return true;
}
// if we are still here, means that the element #name is valid
$("#name").addClass('greenborder');
return false;
}
// on focus name input
$("#name").on("focus", function() {
// if the input get the redborder class, then reset
if ( fname.hasClass("redborder") ){
fname.removeClass("redborder");
}
}

Javascript jQuery textbox creation and output

Currently, I have a two table rows with two textboxes. I want to buid a button which allows the user to add and subtract an author row depending on how many they want. Once they increase the amount of authors they need for input, the user clicks on the generate button, the input from the textboxes will be outputed at the bottom of the page. I was trying to pull this off with javascript and jQuery. I am a ten day old student with javascript and jQuery and feel as if I have bit off more than I can chew.
An example of what I want can be found at this lnk: http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/. However, I need the input from the textboxes outputed on the same page.
<!DOCTYPE html>
<head>
</head>
<body>
<table>
<tbody>
<tr>
<td>Author</td>
<td><input type="text" id="1" class="normalinput" placeholder="Last"></td>
<td><input type="text" id="2" class="normalinput" placeholder="First"></td>
</tr>
<tr>
<td>Second Author (If Any)</td>
<td><input type="text" id="3" class="normalinput" placeholder="Last"></td>
<td><input type="text" id="4" class="normalinput" placeholder="First"></td>
</tr>
</tbody>
</table>
<br>
<br>
<output id="20"></output>
<br>
<br>
</body>
</html>
<script type=text/javascript>
function myFunction()
{
var firstlast=document.getElementById("1").value;
if (firstlast==null || firstlast=="")
{
firstlast;
}
else if(firstlast!=null || firstlast!="")
{
firstlast=document.getElementById("1").value + ", ";
}
var firstfirst=document.getElementById("2").value;
if (firstfirst==null || firstfirst=="")
{
firstfirst;
}
else if(firstfirst!=null || firstfirst!="")
{
firstfirst=document.getElementById("2").value + ". ";
}
var secondlast=document.getElementById("3").value;
if (secondlast==null || secondlast=="")
{
secondlast;
}
else if(secondlast!=null || secondlast!="")
{
secondlast=document.getElementById("3").value + ", ";
}
document.getElementById("20").innerHTML = firstlast + firstfirst + secondlast;
}
</script>

The jQuery
//wait for the document to be ready
$(document).ready(function()
{
// when generate authors is clicked
$("#generate-authors").click(function()
{
// get the first author row in your table
var author = $(".author-row:first");
// for the amount of authors put into the text box
// insert a copy of the row after the last row
for(i = 0; i < parseInt($("#author-amount").val()); i++)
$(".author-row:last").after(author.clone());
});
// when output data is clicked
$("#output-data").click(function()
{
// go through all the author rows
$(".author-row").filter(function()
{
// add them to the output element
$("#output").append("<p>" + $(this).find("[placeholder=\"Last\"]").val() + ", " + $(this).find("[placeholder=\"First\"]").val() + ".</p>");
});
});
});
The html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
// put the script here
</script>
</head>
<body>
<input id="author-amount" type="text" />
<input id="generate-authors" type="button" value="Generate" />
<br />
<input id="output-data" type="button" value="Output Data" />
<table>
<tbody>
<tr class="author-row">
<td>Author</td>
<td><input type="text" id="1" class="normalinput" placeholder="Last"></td>
<td><input type="text" id="2" class="normalinput" placeholder="First"></td>
</tr>
</tbody>
</table>
<br />
<output id="output"></output>
</body>
</html>

See this Example might be this is that what you want
HTML
<table id="table">
<tbody>
<tr>
<td>Author</td>
<td><input type="text" id="1" class="normalinput" placeholder="Last"></td>
<td><input type="text" id="2" class="normalinput" placeholder="First"></td>
</tr>
<tr>
<td>Second Author (If Any)</td>
<td><input type="text" id="3" class="normalinput" placeholder="Last"></td>
<td><input type="text" id="4" class="normalinput" placeholder="First"></td>
</tr>
</tbody>
</table>
<input type="button" id="generat" value="add">
<input type="button" id="remove" value="remove">
<input type="button" id="display" value="display">
<output id="20"></output>
JS
$(document).ready(function(){
$("#generat").click(function(){
var clone = $("#table tr:first").clone();
$("#table tbody:last").append(clone);
});
$("#remove").click(function(){
$("#table tbody tr:last").remove();
});
$("#display").click(function(){
$("#20").html("");
$("table tr").each(function(){
$(this).find("input").each(function(){
$("#20").append(($(this).val()));
});
});
})
});
LINK

Categories

Resources