I am trying to make reservations system, and I have created table reservations which contain columns (id, officename, roomname, resstart, resend, resuser). Restart and resend are DATATIME type. I created a form with date picker and it's inserted successfully to the database.
Here is my PHP file:
<?php
session_start();
include('includes/config.php');
include('includes/checklogin.php');
check_login();
$username = $_SESSION['username'];
//code for add courses
if($_POST['submit'])
{
$officename=$_POST['officename'];
$roomname=$_POST['roomname'];
$startdate=$_POST['startdate'];
$enddate=$_POST['enddate'];
$query="insert into reservations (officename,roomname,resstart,resend,resuser) values(?,?,?,?,?)";
$stmt = $mysqli->prepare($query);
$stmt->bind_param('sssss',$officename,$roomname,$startdate,$enddate,$username);
if($stmt->execute()){
echo"<script>alert('Your Reservation Has Been Added Successfully');</script>";
}else{
echo"<script>alert('Warning! You cannot Reserve this appointment');</script>";
}
}
?>
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="theme-color" content="#3e454c">
<title>Make New Reservation</title>
<link rel="stylesheet" href="css/awesome-bootstrap-checkbox.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.11.3-jquery.min.js"></script>
<script type="text/javascript" src="js/validation.min.js"></script>
<!--Load Script and Stylesheet -->
<script type="text/javascript" src="jquery.simple-dtpicker.js"></script>
<link type="text/css" href="jquery.simple-dtpicker.css" rel="stylesheet" />
$(document).ready(function() {
$( "#date" ).datepicker({ dateFormat: "yy-m-d" });
});
</script>
</head>
<body>
<?php include('includes/header.php');?>
<div class="ts-main-content">
<?php include('includes/sidebar.php');?>
<div class="content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2 class="page-title">Make New Reservation</h2>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Make New Reservation</div>
<?php echo "<h4>You Logged in As: <span>$username</span></h4>";
?>
<div class="panel-body">
<?php if(isset($_POST['submit']))
{ ?>
<p style="color: red"><?php echo htmlentities($_SESSION['msg']); ?><?php echo htmlentities($_SESSION['msg']=""); ?></p>
<?php } ?>
<form method="post" class="form-horizontal">
<div class="hr-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">Select Office </label>
<div class="col-sm-8">
<Select name="officename" class="form-control" required>
<option value="Select Office">Select Office</option>
<?php
$sql="select * from offices";
$stmt2 = $mysqli->prepare($sql);
//$stmt2->bind_param('i',$roomno);
//$stmt->bind_param('i',$aid);
$stmt2->execute() ;//ok
$res=$stmt2->get_result();
while ($row=$res->fetch_object()) {
echo "<option value=". $row->officename .">" . $row->officename . "</option>";
}
?>
</Select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Select Room </label>
<div class="col-sm-8">
<Select name="roomname" class="form-control" required>
<option value="Select Room">Select Room</option>
<?php
$sql="select * from rooms";
$stmt2 = $mysqli->prepare($sql);
//$stmt2->bind_param('i',$roomno);
//$stmt->bind_param('i',$aid);
$stmt2->execute() ;//ok
$res=$stmt2->get_result();
while ($row=$res->fetch_object()) {
echo "<option value=". $row->roomname .">" . $row->roomname . "</option>";
}
?>
</Select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Start time and date</label>
<div class="col-sm-8">
<input type="text" autocomplete="off" name="startdate" value="" required>
<script type="text/javascript">
$(function(){
$('*[name=startdate]').appendDtpicker();
});
</script>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">End time and date</label>
<div class="col-sm-8">
<input type="text" autocomplete="off" name="enddate" value="" required>
<script type="text/javascript">
$(function(){
$('*[name=enddate]').appendDtpicker();
});
</script>
</div>
</div>
<div class="col-sm-8 col-sm-offset-2">
<input class="btn btn-primary" type="submit" name="submit" value="Make New Reservation">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I want the form to prevent insert to the table, if there is a user tried to make new reservation with already exists time for the same room. Like Room 1 reserved at 1:00 to 2:00, so next user can't register Room 1 at 1:10 to 2:00 for example, but he can register Room 2 at the same time.
Thanks in advance.
Take a count from the table reservations with the requesting roomnumber and new reservation time, and see if a record exists in the table between the resstart and resend time.
If I understood your question correctly, any of the below two query should work.
select count(1) from reservations where roomname = 'XYZ' and '17-SEP-17' between resstart and resend;
or
select count(1) from reservations where roomname = 'XYZ' and to_date('17-SEP-17') between resstart and resend;
the best way to prevent duplicate is to create a unique key in your database.
ALTER TABLE reservations ADD CONSTRAINT constr_reservations UNIQUE (roomname,resstart,resend,resuser)
in this case you code must not be changed.
because you are already catching the insert failure
if($stmt->execute()){
echo"<script>alert('Your Reservation Has Been Added Successfully');</script>";
}else{
//ROOM DUPLICATE CASE!!!
echo"<script>alert('Warning! You cannot Reserve this appointment');</script>";
}
Related
I am new to PHP so please help me out
the errors that I keep getting are
Notice: Undefined index: image1 in C:\wamp\www\Tech Cube\add-product.php on line 12
Warning: file_get_contents(): Filename cannot be empty in C:\wamp\www\Tech Cube\add-product.php on line 12
Notice: Undefined index: image2 in C:\wamp\www\Tech Cube\add-product.php on line 13
Warning: file_get_contents(): Filename cannot be empty in C:\wamp\www\Tech Cube\add-product.php on line 13
and my code is
<?php
$connection = mysqli_connect("localhost","root","");
$db = mysqli_select_db($connection,'techcubedb');
if(isset($_POST['add']))
{
if(!empty($_POST['name']) && !empty($_POST['price']) &&!empty($_POST['image1']) &&!empty($_POST['image2'])){
$name = $_POST['name'];
$price = $_POST['price'];
$description = $_POST['description'];
$image1 = addslashes(file_get_contents($_FILES["image1"]["tmp_name"]));
$image2 = addslashes(file_get_contents($_FILES["image2"]["tmp_name"]));
$query = "INSERT INTO 'products'('name','price','description','image1','image2')VALUES ('$name','$price','$description','$image1','$image2')";
$query_run=mysqli_query($connection,$query);
if($query_run)
{
echo '<script type="text/javascript"> alert("Product Added")</script>';
}
else{
echo '<script type="text/javascript"> alert("Product not Added")</script>';
}
}
else{
echo '<script type="text/javascript"> alert("All fields are required")</script>';
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>add product</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<Center>
<div class="container">
<div class="col-md-6 mx-auto text-center">
<div class="header-title">
<br><br>
<h1 class="wv-heading--title">
Add Product
</h1>
</div>
<br>
</div>
<div class="row">
<div class="col-md-4 mx-auto">
<div class="myform form ">
<form action=" " method="post" encrtype="multipart/form-data">
<div class="form-group ">
<label>Product name</label>
<input type="text" name="name" class="form-control" >
<span class="help-block"></span>
</div>
<div class="form-group ">
<label>Price</label>
<input type="text" name="price" class="form-control" >
<span class="help-block"></span>
</div>
<div class="form-group ">
<label>Description</label>
<textarea type="text" name="description" class="form-control" ></textarea>
<span class="help-block"></span>
</div>
<div class="form-group ">
<label>Images</label><br>
<input type="file" name="image1" id="image1">
<span class="help-block"></span>
</div>
<div class="form-group ">
<input type="file" name="image2" id="image2">
<span class="help-block"></span>
</div>
<br>
<br>
<div class="form-group">
<input type="submit" name="add" class="btn btn-primary" value="Add Product">
</div>
</form>
</div>
</div>
</div>
</div>
</Center>
</body>
</html>
May be you will need two edits...
enctype="multipart/form-data"
instead of
encrtype="multipart/form-data"
And
!empty($_FILES['image1']['name'] ) && !empty($_FILES['image2']['name'])
And one more thing is...
you will need to check and verify uploaded file's type, size etc for security reason....
i am making a dynamic form right now, duplicating the form is easy, but there is one textfield where the value is from the database, the problem is, the value from the database cant be duplicated. the point is im trying to duplicate a value in php, here is the problem, and is there anyway to insert a data into database using <label> ? because duplicating the value using <label> is a succsed
here is my code.
<?php
include 'config/db_connect.php';
if(isset($_POST['submit'])){
for($i = 0; $i <= count($_POST['kode'])-1;$i++){
$selectidmax =mysqli_query($con, "SELECT max(jenis) as maxjenis FROM t_produk WHERE jenis LIKE 'SS%'");
$hslidmax=mysqli_fetch_array($selectidmax);
$idmax=$hslidmax['maxjenis'];
$nourut = (int) substr($idmax, 2,3);
$nourut++;
$IDbaru = "SS" . sprintf("%03s", $nourut);
$kodep = $_POST['kode'][$i];
$kodeproduk = $_POST['kp'][$i];
$produk = $_POST['produk'][$i];
$bunga = $_POST['bunga'][$i];
$ket = $_POST['ket'][$i];
$query = mysqli_query($con, "INSERT INTO t_produk(kode_cu,jenis,kode_produk,produk,bunga,keterangan)
VALUES (
'$kodep',
'$IDbaru',
'$kodeproduk',
'$produk',
'$bunga',
'$ket')
");
}
if($query){
header("location:home_cu.php");
}else{
echo "gagal" . mysqli_error($con);
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Form Simpanan Saham</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style1.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="w3-bar w3-black">
Home
Menu Data Cu
Menu Data Kebijakan
Menu Data Modifikasi
</div>
<br>
<div class="container">
<form action="form_saham.php" method="post">
<h1 class="text-center">Produk Pinjaman</h1>
<div class="form-content">
<div class="row">
<div class="col-md-12">
<p><button type="button" id="btnAdd" class="btn btn-primary">Add More</button></p>
<br/>
</div>
</div>
<div class="row group">
<div class="col-md-3">
<div class="form-group">
<?php
include 'config/db_connect.php';
$kode = $_GET['kode_cu'];
$query = mysqli_query($con,"SELECT * FROM t_cu WHERE kode_cu = '$kode'");
while ($hasil = mysqli_fetch_array($query) ) {
?>
<label>Kode Produk :</label>
<input type="text" value="<?php echo $hasil['kode_cu']?>" name="kode[]" class="form-control">
<input type="text" name="kp[]" class="form-control"/>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Produk</label>
<input type="text" name="produk[]" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Bunga</label>
<input type="text" name="bunga[]" class="form-control">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Keterangan</label>
<textarea name="ket[]" class="form-control" rows="3"></textarea>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<button type="button" class="btn btn-danger btnRemove">Remove</button>
</div>
</div>
</div>
</div>
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<?php } ?>
<script src="assets/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="jquery.multifield.min.js"></script>
<script>
$('.form-content').multifield({
section: '.group',
btnAdd:'#btnAdd',
btnRemove:'.btnRemove',
});
</script>
</body>
</html>
Ok, i found the question by myself, i just move the <input type="text" value="<?php echo $hasil['kode_cu']?>" name="kode[]" class="form-control"> to the top, so this textfield won't get duplicated, and then in the database value i changed the '$kodep', into (SELECT kode_cu FROM t_cu WHERE kode_cu = '$kodep'), Thank you for everyone who tries to help
I am relatively new to the PHP / MYSQL world (and programming in general) so apologies in advance for any ignorance on my part.
I have been following a YouTube tutorial from PHPAcademy detailing how to create a simple HTML form and submit data via PHP & MySQLi. The video also teaches how to perform a SELECT * statement and display the entire table in an HTML table.
My issue is that I am unable to post or add the information from the form to the MySQL database. Below is my index.php file & database structure. Any help you can provide is greatly appreciated. Also, I have a connect.php script that initiates the MySQL connection and a security.php script that ensures only UTF-8 text can be inserted into the database. I can provide both of those upon request.
Thank you!
<?php
error_reporting(0);
require 'db/connect.php';
require 'security.php';
$records = array();
if(!empty($_POST)) {
if(isset($_POST['items_item'], $_POST['items_item_location'], $_POST['items_notes'], $_POST['items_quantity'])) {
$items_item = trim($_POST['items_item']);
$items_item_location = trim($_POST['items_item_location']);
$items_notes = trim($_POST['items_notes']);
$items_quantity = trim($_POST['items_quantity']);
if(!empty($items_item) && !empty($items_item_location) && !empty($items_notes) && !empty($items_quantity)) {
$insert = $db->prepare("INSERT INTO items (items_item, items_item_location, items_notes, items_quantity) VALUES (?, ?, ?, ?)");
$insert->bind_param('ssss', $items_item, $items_item_location, $items_notes, $items_quantity);
if($insert->execute()) {
header('Location: index.php');
die();
}
}
}
}
if($results = $db->query("SELECT * FROM items")) {
if($results->num_rows) {
while($row = $results->fetch_object()){
$records[] = $row;
}
$results->free();
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Grocery list!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="page-header">
<h1>
Grocery Application <small>Created by Bryce</small>
</h1>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-lg-4 column">
<form class="form-horizontal" action="" method='post'>
<fieldset>
<legend>Add grocery item</legend>
<div class="form-group">
<label for="inputItem" class="col-lg-2 control-label">Grocery Item</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputItem">
</div>
</div>
<div class="form-group">
<label for="inputLocation" class="col-lg-2 control-label">Location</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputLocation">
</div>
</div>
<div class="form-group">
<label for="inputNotes" class="col-lg-2 control-label">Notes</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="inputNotes"></textarea>
<span class="help-block">Here you can enter notes about your item such as the quantity, number of units, or any other general information.</span>
</div>
</div>
<div class="form-group">
<label for="inputLocation" class="col-lg-2 control-label">Quantity</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputQuantity">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-md-8 column">
<?php
if(!count($records)){
echo 'No records';
} else {
?>
<table class="table table-bordered table-striped">
<tr>
<th>Item</th>
<th>Location</th>
<th>Notes</th>
<th>Quantity</th>
</tr>
<?php
foreach($records as $r){
?>
<tr>
<td><?php echo escape($r->items_item); ?></td>
<td><?php echo escape($r->items_item_location); ?></td>
<td><?php echo escape($r->items_notes); ?></td>
<td><?php echo escape($r->items_quantity); ?></td>
</tr>
<?php
}
?>
</table>
<?php
}
?>
<br><br>
</div>
</div>
</div>
</body>
</html>
Database structure:
id (autoincremented, interger) | items_item (varchar 255) | items_item_location (varchar 255) | items_notes (text) | items_quantity (text)
Edit: This answer is a per your original post and not marking your edited question as an edit under the original.
None of your form elements contain a name attribute and are required when using POST.
Change your form elements to these, respectively:
<input name="items_item" type="text" class="form-control" id="inputItem">
<input name="items_item_location" type="text" class="form-control" id="inputLocation">
<textarea name="items_notes" class="form-control" rows="3" id="inputNotes"></textarea>
<input name="items_quantity" type="text" class="form-control" id="inputQuantity">
These ^, are to work in conjunction with:
$_POST['items_item']
$_POST['items_item_location']
$_POST['items_notes']
$_POST['items_quantity']
I hope you were not relying on an "id" alone, not for this anyway.
Plus using error_reporting(0); doesn't help, it suppresses possible errors.
Some of which would have been "Undefined index...".
Add error reporting to the top of your file(s) which will help find errors.
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
// rest of your code
Sidenote: Error reporting should only be done in staging, and never production.
Footnotes:
Instead of doing:
if($insert->execute()) {
header('Location: index.php');
die();
}
Use/replace with: (to check for possible errors)
if($insert->execute()) {
header('Location: index.php');
die();
}
else{
die('There was an error running the query [' . $db->error . ']');
}
// rest of your code you have now
I want to submit an app using phonegap, My app uses a lot of php which i know apple do not like so much and just decline the app and say its best to have a web app. I have an example index.html here
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="css/logout-button.min.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" href="css/my.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</script>
<script src="js/jquery.mobile-1.3.0.min.js"></script>
<script src="js/jquery.cookies.2.2.0.min.js"></script>
<script type="text/javascript">
var uid = $.cookies.get( 'uid' );
if(uid == null)
{
window.location ='account-login.html'; }
else
{ }
</script>
</head>
<body>
<div data-role="page" id="index4">
<div data-theme="a" data-role="header">
<a data-role="button" data-direction="reverse" data-rel="back" data-transition="slide"
data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
Back
</a>
<h3>
Event Details
</h3>
</div>
<div data-role="content">
<form id="eventForm" name="eventForm">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="event">
Event
</label>
<input name="eventname" id="eventname" placeholder="eventname" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="about">
About
</label>
<textarea name="about" id="about" placeholder="about" value=""></textarea>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="dates">
Choose Dates
</label>
<div id="with-altField"></div>
<input type="hidden" id="altField" name="dates">
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="enddate">
End Date
</label>
<div id="with-altfield1"></div>
<input type="hidden" id="altField1" name="enddate">
</fieldset>
</div>
<div data-role="fieldcontain">
<script>
$.get('event-details.php', function(data){
$('#yourdiv').html(data);
});
</script>
<div id="yourdiv"></div>
</div>
<div data-role="fieldcontain">
<label for="manual">Add Emails</label>
<textarea cols="40" rows="8" name="emails" id="emails"></textarea>
</div>
<input type="submit" value="Submit" id="submitEventButton">
</form>
</div>
</div>
</body>
</html>
I call event-details.php here
<?
require_once("../backend/functions.php");
dbconn();
$id = $CURUSER["id"];
$res = "SELECT username,email,status FROM users left join cal_contacts on cal_contacts.contactid = users.id WHERE cal_contacts.userid = $id";
$res1 = mysql_query($res);
?>
<label for="select-choice-1" class="select">
Choose Contacts:
</label>
<select name="contacts[]" id="contacts" multiple="multiple" data-native-menu="false">
<?
while($row = mysql_fetch_array($res1))
{
print "<option value=$row[email]>$row[email] ($row[status])</option>";
}
?>
</select>
<?
I have the select-menu created through php. I was wondering if there was another way to do this so the complete select html doesn't have to be on the php script. This would mean that it would be harder for me to change my app once submitted and i'm sure apple would accept it alot easier.
If your problem is just to remove the PHP processing on that HTML, you could just move it somewhere else as a web service then get it via ajax request. Then you can just use json, etc. to fetch the data and populate your select menu.
here is a doc on jquery! regarding how to make ajax requests.
i found a tutorial here which seem similar on what you want to achieve.
How To Write A Simple PHP/MySQL Web Service for an iOS App!
Okay.. this is the file lo_add.php:
<div class="rowElem">
<label>Item <? echo $i ?>:</label>
<div class="formRight searchDrop">
<select name="lo_item[]" class="chzn-select" data-placeholder="Choose an Item">
<option value=""></option>
<? $item_query = mysql_query("select id,code,title,price from items where domain_id='$domain_id' order by code");
while ($items = mysql_fetch_array($item_query)) { ?>
<option value="<? echo $items["id"] ?>"><? echo $items["code"]." - ".$items["title"]." - RM".$items["price"] ?></option>
<? } ?>
</select>
</div>
<label>Delivery Address :</label>
<div class="formRight searchDrop">
<select name="lo_site[]" class="chzn-select" data-placeholder="Choose a Delivery Address">
<option value=""></option>
<? $site_query = mysql_query("select id,name from sites where domain_id='$domain_id' order by name");
while ($sites = mysql_fetch_array($site_query)) { ?>
<option value="<? echo $sites["id"] ?>"><? echo $sites["name"] ?></option>
<? } ?>
</select>
</div>
<div class="fix"></div>
<label>Quantity:<span class="req">*</span></label>
<div class="formRight onlyNums">
<input type="text" name="lo_quantity[]" id="lo_quantity[]"/>
</div>
<div class="fix"></div>
</div>
And this is the html file that calls the css and what have you in the beginning:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Mecacom Technologies® Maintenance System © 2012</title>
<link href="/css/main.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/wizards/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#addElement').click(function() {
var data = '';
$.get('/ajax/lo_add.php', data, function(response){
$('#hello').append(response);
});
});
});
</script>
</head>
<body>
<div class="content" id="container">
<div class="title"><h5>Record New Local Order</h5></div>
<form action="<? echo $PHP_SELF ?>?add=1" id="valid" class="mainForm" method="post" enctype="multipart/form-data">
<fieldset>
<div class="widget">
<div class="head"><h5 class="iLocked2">New Local Order Credentials</h5></div>
<div class="rowElem noborder">
<label>Order ID:<span class="req">*</span></label>
<div class="formRight">
<input type="text" class="validate[required]" name="order_id" id="order_id"/>
</div>
<div class="fix"></div>
</div>
<div class="rowElem noborder">
<label>Order Date:<span class="req">*</span></label>
<div class="formRight">
<input type="text" name="order_date" class="datepicker validate[required]" />
</div>
<div class="fix"></div>
</div>
<div id="hello"></div>
<div class="fix"></div>
Click To Append More Item
<input type="submit" value="Next" class="greyishBtn submitForm" />
<div class="fix"><input type="hidden" name="addnow" value="1" /></div>
</div>
</fieldset>
</form>
</div>
</body>
</html>
sigh .. quite a handful ... How do you think that the css aren't being rendered correctly after the jquery append?
I can see from your live test page that you are using Chosen to process the dropdowns and jQuery validation plugin to validate the quantity field.
The first thing is to make sure you call chosen() on the newly created dropdowns. This has to be called for new elements, because Chosen doesn't only rely on CSS, but changes the entire HTML structure of the dropdowns. So add this line, following your append,
$(".chzn-select").chosen()
Second is to make sure you validate the newly created quantity textfields by calling validate() on them, or re-calling whatever javascript you called to initialize the validate plugin.