How to save loop data in the database in php and javascript? - javascript

I'm developing a form, which has got some fields and whose data gets saved in the sql server database.
I'm able to save the data to the database for the rest of the form, however I'm stuck at a button which upon clicking shows more fileds. It's a loop which runs five times, so the user will have an option of adding details of their mentors for five times. I'm not sure how to save the data of the loop in the database.
Here's the code:
<div class="container" >
<form class="cmxform" action ='functions/processform.php' id="Form1" method="post" enctype="multipart/form-data">
<div id="FormResult1" class="hide" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="resultFormContent1"></div>
</div>
<h1>Contact Information</h1>
<div class="form-row">
<div class="container">
<div class="form-group col-md-6">
<label for="fName">First Name </label>
<input type="text" class="form-control" id="fName" name="fName" required>
</div>
<div class="form-group col-md-6">
<label for="lName">Last Name </label>
<input type="text" class="form-control" id="lName" name="lName" required>
</div>
<div class="form-group col-md-6">
<label for="uEmail">University Email </label>
<input type="email" class="form-control" id="uEmail" name="uEmail" required>
</div>
</div>
</div>
<div id=new_site></div>
<button type="button" class="btn btn-default" onClick="addSite()">Add Mentor</button>
<button type="button" class="btn btn-default" onClick="removeSite()">Remove Mentor</button>
<input type="hidden" value="1" id="total_sites">
<div class="form-group col-md-12">
<button class="btn btn-info btn-primary" id="registerSubmit" type="submit">Submit</button>
</div>
<script>
function addSite() {
var new_total_sites = parseInt($('#total_sites').val()) + 1;
if ($('#total_sites').val() >= 4) {
$('button:contains("Add Mentor")').prop('disabled', true);
}
var new_label= "<label id='new_label9_" + new_total_sites
+ "'><h1>Mentor#"+ new_total_sites +"</h1></label><br>";
var new_site_label = "<label id='new_label1_" + new_total_sites
+ "'>Length of Time in Research: </label>";
var new_site_input = "<input id='new_site_"
+ new_total_sites
+ "' type='text' class='form-control col-md-12' list='sites' name='site[]'></br>";
var new_slot_label = "<label id='new_label2_" + new_total_sites
+ "'>Research Institution</label>";
var new_slot_input = "<input class='form-control col-md-12' id='new_slot_"
+ new_total_sites + "' name='slots[]'></br>";
var new_research_label = "<label id='new_label3_" + new_total_sites
+ "'>Research Mentor</label>";
var new_research_input = "<input class='form-control' id='new_research_"
+ new_total_sites + "' name='slots[]'></br>";
var new_form_group_label= "<label id='new_label4_" + new_total_sites
+ "'>Type of Research</label><br>";
var new_basic_label = "<input type='checkbox' id='checkbox1" + new_total_sites +"' value='basic'><label for='basic' id='basic"+ new_total_sites +"'>Basic</label></br>";
var new_clinical_label = "<input type='checkbox' id='checkbox2" + new_total_sites +"' value='clinical'><label for='clinical' id='clinical"+ new_total_sites +"'>Clinical</label></br></div>";
var new_form_label= "<label id='new_label5_" + new_total_sites
+ "'><h1>Mentor's Contact Information</h1></label>";
var new_mentor_label = "<label id='new_label6_" + new_total_sites
+ "'>Mentor's Phone</label>";
var new_mentor_input = "<input class='form-control' id='new_mentor_"
+ new_total_sites + "' name='slots[]'></br>";
var new_mentoremail_label ="<label id='new_label7_" + new_total_sites
+ "'>Mentor's Email</label>";
var new_mentoremail_input = "<input class='form-control' id='new_mentoremail_"
+ new_total_sites + "' name='slots[]'></br>";
var new_describeresearch_label = "<label id='new_label8_" + new_total_sites
+ "'>Describe your research</label></div>";
var new_describeresearch_input = "<input class='form-control' id='new_describeresearch_"
+ new_total_sites + "' name='slots[]'></br>";
$('#new_site').append(new_label);
$('#new_site').append(new_site_label);
$('#new_site').append(new_site_input);
$('#new_site').append(new_slot_label);
$('#new_site').append(new_slot_input);
$('#new_site').append(new_research_label);
$('#new_site').append(new_research_input);
$('#new_site').append(new_form_group_label);
$('#new_site').append(new_basic_label);
$('#new_site').append(new_clinical_label);
$('#new_site').append(new_form_label);
$('#new_site').append(new_mentor_label);
$('#new_site').append(new_mentor_input);
$('#new_site').append(new_mentoremail_label);
$('#new_site').append(new_mentoremail_input);
$('#new_site').append(new_describeresearch_label);
$('#new_site').append(new_describeresearch_input);
$('#total_sites').val(new_total_sites)
}
function removeSite() {
var last_total_site = $('#total_sites').val();
if (last_total_site > 1) {
$('#new_label9_' + last_total_site).remove('');
$('#new_label1_' + last_total_site).remove('');
$('#new_site_' + last_total_site).remove('');
$('#new_label2_' + last_total_site).remove('');
$('#new_slot_' + last_total_site).remove('');
$('#new_label3_' + last_total_site).remove('');
$('#new_research_' + last_total_site).remove('');
$('#new_label4_' + last_total_site).remove('');
$('#basic' + last_total_site).remove('');
$('#clinical' + last_total_site).remove('');
$('#checkbox1' + last_total_site).remove('');
$('#checkbox2' + last_total_site).remove('');
$('#new_label5_' + last_total_site).remove('');
$('#new_label6_' + last_total_site).remove('');
$('#new_mentor_' + last_total_site).remove('');
$('#new_label7_' + last_total_site).remove('');
$('#new_mentoremail_' + last_total_site).remove('');
$('#new_label8_' + last_total_site).remove('');
$('#new_describeresearch_' + last_total_site).remove('');
$('#total_sites').val(last_total_site - 1);
}
}
</script>
</body>
</html>
processform.php
<?php
ob_start();
require_once 'db-connect.php';
require_once 'email.php';
if(isset($_POST['pEmail'])){
$fName = filter_input(INPUT_POST, "fName") ? filter_input(INPUT_POST, 'fName') : null;
$lName = filter_input(INPUT_POST, "lName")? filter_input(INPUT_POST, 'lName') : null;
$uEmail = filter_input(INPUT_POST, "uEmail")? filter_input(INPUT_POST, 'uEmail') : null;
$conn = DB::databaseConnection();
$conn->beginTransaction();
$sql = "INSERT INTO dbo.form ( FirstName,LastName,universityemail)VALUES
( :fName,:lName,universityemail)
$stmt = $conn->prepare($sql);
$stmt->bindParam(':fName', $fName);
$stmt->bindParam(':lName', $lName);
$stmt->bindParam(':universityemail', $uEmail);
if ($stmt->execute()) {
$conn->commit();
if (Form::mailer($fName, $lName,$uEmail))) {
echo
'<script >
alert("Thank you for registration.");
window.location = "www.google.com/";
</script>';
return true;
} else {
$conn->rollback();
echo '
<script>
alert("Error, please try submitting again. Error code 1");
window.history.back();
</script>';
return false;
}
}
}
The rest of the fields gets saved in the database, I'm just not sure how to save the loop data in the same way.

Related

User can add new input field with click on button - how to limit/set max fields?

The user can add a new input-field with a click on "Add". My problem is that there is no limit but I want to limit the max. input-fields to 50. Im not that good with js but I think it could done with:
if id or input-field = 50
than disable Add-button. And enable if id or input-field is under 50.
This is my code so far:
function addFormField() {
var id = document.getElementById("id").value;
$("#divTxt").append(
"<p id='row" +
id +
"'><label for='txt" +
id +
"'>Field " +
id +
" <input type='text' size='20' name='txt[]' id='txt" +
id +
"'> &nbsp<a href='#' onClick='removeFormField(\"#row" +
id +
"\"); return false;'>Remove</a><p>"
);
id = id - 1 + 2;
document.getElementById("id").value = id;
}
function removeFormField(id) {
$(id).remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Add</p>
<form action="#" method="get" id="form1">
<input type="hidden" id="id" value="1">
<div id="divTxt"></div>
<p><input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset"></p>
</form>
Thank you

You can set a variable and add 1 to it until the count reaches 50 like this
let currentCount = 0;
function addFormField() {
if(currentCount < 50){
currentCount+= 1;
var id = document.getElementById("id").value;
$("#divTxt").append(
"<p id='row" +
id +
"'><label for='txt" +
id +
"'>Field " +
id +
" <input type='text' size='20' name='txt[]' id='txt" +
id +
"'> &nbsp<a href='#' onClick='removeFormField(\"#row" +
id +
"\"); return false;'>Remove</a><p>"
);
id = id - 1 + 2;
document.getElementById("id").value = id;
}else{
alert('You can not add more then 50')
}
}
function removeFormField(id) {
$(id).remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Add</p>
<form action="#" method="get" id="form1">
<input type="hidden" id="id" value="1">
<div id="divTxt"></div>
<p><input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset"></p>
</form>

You have to check for the length of child p tags of your div like this:
if($("#divTxt > p").length) < 50 ){
var id = document.getElementById("id").value;
$("#divTxt").append(
"<p id='row" +
id +
"'><label for='txt" +
id +
"'>Field " +
id +
" <input type='text' size='20' name='txt[]' id='txt" +
id +
"'> &nbsp<a href='#' onClick='removeFormField(\"#row" +
id +
"\"); return false;'>Remove</a><p>"
);
id = id - 1 + 2;
document.getElementById("id").value = id;
}

I'm relatively new to Javascript. I'm creating a CRUD based application and I need help in the Edit function

I am trying to create a pure Javascript CRUD application. The data is displayed in an HTML Table.
I have created the Create, Read and delete function. In the Edit function, I want the data to be displayed on a text box when the edit link is clicked and should also have a save button.
How should I proceed ?
var name = document.getElementById('Name').value;
var age = document.getElementById('Age').value;
var email = document.getElementById('Email').value;
var password = document.getElementById('Password').value;
var confirmpassword = document.getElementById('ConfirmPassword').value;
var dob = document.getElementById('DOB').value;
//add
var users = [];
function data(name, age, email, dob) {
var user = {
"name": name,
"age": age,
"email": email,
"dob": dob
}
users.push(user);
read(users);
console.log(users);
}
//Read
function read(users) {
var html = "<table border='1|1'>";
html += "<tr>";
html += "<th>" + "Name" + "</th>"
html += "<th>" + "Age" + "</th>"
html += "<th>" + "Email" + "</th>";
html += "<th>" + "DOB" + "</th>";
html += "<th>" + "Edit" + "</th>";
html += "<th>" + "Delete" + "</th>";
html += "</tr>"
var userhtml = document.getElementById('user');
userhtml.innerHTML = '';
for (var i = 0; i < users.length; i++) {
html += "<tr>";
html += "<td>" + users[i].name + "</td>";
html += "<td>" + users[i].age + "</td>";
html += "<td>" + users[i].email + "</td>";
html += "<td>" + users[i].dob + "</td>";
html += "<td>" + "<a href='#' onclick='editUsers()'>Edit</a>" + "</td>";
html += "<td>" + "<a href='#' onclick='deleteUsers()'>Delete</a>" + "</td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("user").innerHTML = html;
}
function deleteUsers(i) {
debugger;
users.splice(i, 1)
read();
console.log(users);
}
<form action="#" onsubmit="data(name, age, email, dob)">
<div class="form-group">
<label class="form-text">Name :</label>
<input type="text" id="Name" placeholder="Enter Name" class="form-control" />
<span id="ErrorName" class="text-danger"></span>
</div>
<div class="form-group">
<label class="form-text">Age :</label>
<input type="text" id="Age" placeholder="Enter Age" class="form-control" />
<span id="ErrorAge" class="text-danger"></span>
</div>
<div class="form-group">
<label class="form-text">Email :</label>
<input type="text" id="Email" placeholder="Enter Email" class="form-control" />
<span id="ErrorEmail" class="text-danger" />
</div>
<div class="form-group">
<label class="form-text">Password :</label>
<input type="password" id="Password" placeholder="Enter Password" class="form-control" />
<span id="ErrorPassword" class="text-danger"></span>
</div>
<div class="form-group">
<label class="form-text">Confirm Password :</label>
<input type="password" id="ConfirmPassword" placeholder="Confirm Password" />
<span id="ErrorConfirmPassword" class="text-danger"></span>
</div>
<div class="form-group">
<label class="form-text">Date of Birth :</label>
<input type="date" id="DOB" class="form-control" />
<span id="ErrorDOB" class="text-danger"></span>
</div>
<div class="form-group col-xl-4 text-center">
<input type="submit" id="Submit" class="btn btn-success" />
</div>
</form>
<div class="user" id="user">
</div>

function editUsers(index) {
var x = document.getElementById('edit');
x.style.display = "block";
debugger;
var userhtml1 = document.getElementById('edit');
userhtml1.innerHTML = '';
for (var i = 0; i < users.length; i++) {
if (i == index) {
userhtml1.innerHTML += ' <div class="form-group"> Name :<input class="form-control" id="EditName" type="text" value ="' + users[i].name + '"><br />' +
'Age :<input class="form-control" id="EditAge" type="text" value="' + users[i].age + '"> <br /> ' +
'Email :<input class="form-control" id="EditEmail" type="text" value="' + users[i].email + '"> <br /> ' +
'DOB :<input class="form-control" id="EditDOB" type="text" value="' + users[i].dob + '"> <br /> ' +
'<button class="edit" onclick="updateUser(' + i + ')">Update</button>';
}
else {
userhtml1.innerHTML += '';
}
}
}
//CRUD - UPDATE
function updateUser(index) {
debugger;
var updatename = document.getElementById('EditName').value;
var updateage = document.getElementById('EditAge').value;
var updateemail = document.getElementById('EditEmail').value;
var updatedob = document.getElementById('EditDOB').value;
if (updatename == '' || updateemail == '' || updateage == '' || updatedob == '') {
alert("Please Fill the Fields!");
}
else {
users[index].name = updatename;
users[index].email = updateemail;
users[index].age = updateage;
users[index].dob = updatedob;
read(users);
var x = document.getElementById('edit');
x.style.display = "none";
}
}

How to store dynamically added rows into database mysql php

I'm stuck on this for a couple of days. I hope any of you can help me out.
Usually when you ask user input through an HTML form you can access the data by calling the $_POST function.
The problem in this approach is that I don't have a static set of input fields. When the user clicks on the addition button another input field shows up and they can make as many input fields as feel neccesary.
I do know that I should loop through it, but I don't have alot of experience in doing this. See the code below which adds dynamic rows in Jquery/Javascript:
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Source Name #'+ counter + ' : </label>' +
'<input type="text" placeholder ="Source Name" name="source_name' +
counter +
'" id="textbox' + counter + '" value="" > <label>IP address from #'+
counter + ' : </label>' +
'<input type="text" placeholder="IP Address From"
name="source_ip_from' + counter +
'" id="textbox' + counter + '" value="" > <label>IP address till #'+
counter + ' : </label>' +
'<input type="text" placeholder="IP Address Till"
name="source_ip_till' + counter +
'" id="textbox' + counter + '" value="" >'
);
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==2){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
The code below is where the form is created and posted in HTML/PHP
<form method="post" class="form-inline" action="addverkeersstroom.php">
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Source Data : </label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0"
placeholder="Source" name="source_name">
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0"
placeholder="APP Nummer" name="source_app">
<?php
mysql_connect('localhost', '', '');
mysql_select_db('');
$sql = "SELECT * FROM zone";
$result = mysql_query($sql);
echo "<select name='zone_1' id='zone_1' class='form-control
ip_or_zone'>";
echo "<option value=''></option>";
while ($row = mysql_fetch_array($result)) {
echo "<option value='". $row['idzone'] . "'>" . $row['zone_naam'] . "
</option>";
}
echo "</select>";
?>
OR <input type="text" class="form-control ip_or_zone" placeholder="IP
Address from" name="source_ip_from">
<input type="text" class="form-control ip_or_zone" placeholder="IP
Address till" name="source_ip_till">
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0"
placeholder="NAT IP" name="source_nat">
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0"
placeholder="Netmask" name="source_netmask">
</div>
</div>
<input type='button' value='+' id='addButton'>
<input type='button' value='-' id='removeButton'>
And last but not least the code below that should insert it into the database.
<?php
session_start();
if(isset($_POST['submit'])) {
echo $source_name = $_POST['source_name'];
echo $source_app = $_POST['source_app'];
echo $source_zone = $_POST['zone_1'];
echo $source_ip_from = $_POST['source_ip_from'];
echo $source_ip_till = $_POST['source_ip_till'];
echo $source_nat = $_POST['source_nat'];
echo $source_netmask = $_POST['source_netmask'];
echo $destination = $_POST['destination'];
echo $dest_app = $_POST['destination_app'];
echo $dest_zone = $_POST['zone_2'];
echo $dest_ip_from = $_POST['dest_ip_from'];
echo $dest_ip_till = $_POST['dest_ip_till'];
echo $dest_nat = $_POST['destination_nat'];
echo $dest_netmask = $_POST['destination_netmask'];
mysql_connect('localhost', '', '');
mysql_select_db('');
//Maak een nieuwe verkeersstroom aan in de database
mysql_query("INSERT INTO verkeersstroom(changes_idchange, protocol, tcpudp,
port_nr)
VALUES('".$changeid."', '".$protocol."', '".$tcpudp."', '".$portnr."')");
$verkeerstroomid = mysql_insert_id();
//Maakt de eigenschappen van de verkeersstroom aan
mysql_query("INSERT INTO verkeersstroom_eigenschappen(changes_idchange,
verkeersstroom_idverkeersstroom, source_name, source_app, source_zone,
source_ip_from, source_ip_till, source_nat, source_netmask, destination,
destination_app, destination_zone, destination_ip_from, destination_ip_till,
destination_nat, destination_netmask)
VALUES('".$changeid."', '".$verkeerstroomid."', '".$source_name."',
'".$source_app."', '".$source_zone."', '".$source_ip_from."',
'".$source_ip_till."', '".$source_nat."', '".$source_netmask."',
'".$destination."', '".$dest_app."', '".$dest_zone."', '".$dest_ip_from."',
'".$dest_ip_till."', '".$dest_nat."', '".$dest_netmask."')");
header("Location:"."");
}
After submitting the dynamic values are like: source_name2, source_ip_from2, source_ip_till2, destination2, dest_ip_from2, dest_ip_till2
and counting up to the amount of rows generated by pressing the addition(+) button.
Like I said before I need to loop through the query somehow like this;
foreach source_name(or source_name2 or 3,4 etc), source_ip_from, source_ip_till, destination, dest_ip_from, dest_ip_till
Insert it seperately into the table like everything with a 2 in the same row and everything with a 3 in the same row and counting up like that.
I hope anyone can help me it is giving me an headache ;-p

html forms allow you to give input fields a name:
<input type='text' name='name' value='22'>
In the event you get multiple inputs but you do not know how many. You can make an array of the input fields by changing the <input name='name'> to <input name='name[]'>
Then you can write a simple for loop in php to work through the array:
<?php
$count = count($_POST['name']);
$name = $_POST['name'];
for($i = 0; $i < $count; $i++){
// do your sql stuff with:
$name[$i]; // this is the value of the inputfield number $i.
}
?>
Also I'd advice to look into using prepared statements. With your current php code you are vulnerable to SQL-injection.
<?php
$sql = "INSERT INTO verkeersstroom(`changes_idchange`, `protocol`, `tcpudp`, `port_nr`)
VALUES( ?, ?, ?, ?);";
$stmt = mysql_connect('localhost', '', '')->prepare($sql);
$stmt->bind_param("ssss", $changeid, $protocol, $tcpudp, $portnr);
$stmt->execute;
?>
This is an example, for more look at: http://php.net/manual/en/mysqli.quickstart.prepared-statements.php

JavaScript / JQuery html element append doesn't take attributes of parent - no PHP version

I am using a JQuery after method to append an HTML row to an existing row, but the attributes of the parent are not inherited. What am I doing wrong?
<html>
<head>
<title>AppendTest_min</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body bgcolor="Teal">
<div class="container">
<div class="form-group">
<div class="table-responsive">
<form name="budgetform" id="budgetform">
<table class="table" id="spreadsheet">
<tr id="row1">
<td id="inputtd">
<input type="text" id="descr1" name="descr[]" size="25" class="inputrow" style="font-weight:bold; background-color:Wheat">
<input type="text" id="dueday1" name="dueday[]" style="text-align: center; background-color:Ivory" size="6" class="inputrow">
<button type="button" name="add" id="add1" style="font-weight:bold; background-color:AntiqueWhite; font-size:7px" class="btn_add">+</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.btn_add', function() {
var button_id = $(this).attr("id");
// alert("HELLO");
// alert(button_id);
// get number part of ID
var nLen = button_id.length
var numsize = nLen - 3;
var nIdx = button_id.substr(3, 2);
var sIdx = nIdx.toString();
// alert(sIdx);
var sRowRef = "#row";
var sAddToThisRowRef = sRowRef + sIdx;
nIdx++;
sIdx = nIdx.toString();
var sRemIdx = "rem" + sIdx;
var sAddIdx = "add" + sIdx;
// var sNewRow = '<tr id="row'+nIdx+'"><td><input type="text" id="descr'+nIdx+'" name="descr[]" placeholder="Enter New Description" size = "25" class="inputrow" style="font-weight:bold; background-color:Wheat"/>';
var sNewRow = '<tr id="row' + nIdx + '"><td><input type="text" id="descr' + nIdx + '" name="descr[]" placeholder="Enter New Description" size = "25" class="inputrow" style="font-weight:bold; background-color:Wheat"/>';
sNewRow = sNewRow + '<input type="text" id="duedate' + nIdx + '" name="dueday[]" placeholder="Date Day" size = "6" class="inputrow"; background-color:Ivory" />';
sNewRow = sNewRow + '<button type="button" name="add" id=' + sAddIdx + ' style="font-weight:bold; background-color:AntiqueWhite; font-size:7px" class="btn_add">+</button></tr>';
$(sAddToThisRowRef).after(sNewRow);
// $(sAddToThisRowRef).append(sNewRow);
var sJustAddedRowRef = sRowRef + sIdx;
});
});
</script>
I am not seeing the cellspacing attribute inherited.
This one has had me stumped for a while... Thx!

The behavior you're seeing is because HTML compacts multiple whitespaces into one space character.
Whitespace is present between the <input> and <button> tags in the HTML, so a single space appears between the two input fields and the button in the first row. But no whitespace is present in the HTML constructed in your JavaScript code, so there is no space between those controls in subsequent rows.
The solution is to add a single space ( ) in between the controls as your code constructs them (see lines 2 and 3 below):
var sNewRow = '<tr id="row' + nIdx + '"><td><input type="text" id="descr' + nIdx + '" name="descr[]" placeholder="Enter New Description" size = "25" class="inputrow" style="font-weight:bold; background-color:Wheat"/>';
sNewRow = sNewRow + ' <input type="text" id="duedate' + nIdx + '" name="dueday[]" placeholder="Date Day" size = "6" class="inputrow"; background-color:Ivory" />';
sNewRow = sNewRow + ' <button type="button" name="add" id=' + sAddIdx + ' style="font-weight:bold; background-color:AntiqueWhite; font-size:7px" class="btn_add">+</button></tr>';

Use clone with insertAfter in your scenario. I think its best suited for what your doing.
For Example:
$("#car2").clone().insertAfter("div.car_well:last");
Or you can use try this as well:
$("div[id^='car']:last").after($('#car2').clone());

JQuery 1.6.2 is the .live() function "guilty"?

I'm trying to post a <form> in <div id="contactform"> but it does not work. The debugger does not mention any error and nothing is displayed (the form).
This my HTML code :
<!DOCTYPE html>
<html>
<head>
<title>Contacts</title>
<link rel="stylesheet" href="style/main.css" type="text/css">
<script src="vendor/couchapp/loader.js"></script>
<script src="recordedit.js"></script>
</head>
<body>
<div id="account"></div>
<h1>Contacts</h1>
<div id="items"><div id="add">Add Contact</div>
<div id="contacts"></div>
<div id="contactform"></div>
</body>
</html>
And this is the JavaScript code in the helper " recordedit.js " :
function contactform(doctoedit) {
var formhtml;
formhtml =
'<form name="update" id="update" action="">';
if (doctoedit) {
formhtml = formhtml +
'<input name="docid" id="docid" type="hidden" value="' + doctoedit._id + '"/>';
}
formhtml = formhtml +
'<table>';
formhtml = formhtml +
'<tr><td>Name</td>' +
'<td><input name="name" type="text" id="name" value="' + (doctoedit ? doctoedit.name : '') +
'"/></td></tr>';
formhtml = formhtml +
'<tr><td>Phone</td>' +
'<td><input name="phone" type="text" id="phone" value="' + (doctoedit ? doctoedit.phone : '') +
'"/></td></tr>';
formhtml = formhtml + '<tr><td>Email</td>' +
'<td><input name="email" type="text" id="email" value="' + (doctoedit ? doctoedit.email : '') +
'"/></td></tr>';
formhtml = formhtml +
'</table>' +
'<input type="submit" name="submit" class="update" value="' + (doctoedit ? 'Update' : 'Add') + '"/>' +
'</form>';
$("#contactform").empty();
$("#contactform").append(formhtml);
}
$(document).ready(function () {
updatecontacts();
$("a.add").live('click', function (event) {
contactform();
});
});

IT WORKS: http://jsfiddle.net/RWDRw/
You should include jquery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Categories

Resources