We Keep Coding

backend not adding books to android app sql

i have made an ebook android app everything works fine but the backend code of admin age which is written in php and javascript .the admin has a function to add book known as savebook the "savebook" function is not working please help me guys....every time i try to add a book i it just shows a failed message but when i add the book to the database manually via phpmyadmin it works here is the code to that function
the problem is in last function (what is think) but stil i would appreciate if you guys find some other mistake in the code the whole website is working but this only function is not working the app in on android platform the backend is done using codeigniter and the app is linked to a database which maintains the details of book
<?php
$this->load->view('admin/comman/header');
?>
<div class="clearfix"></div>
<div class="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumb-->
<div class="row pt-2 pb-2">
<div class="col-sm-9">
<h4 class="page-title">Add Book</h4>
<ol class="breadcrumb">
<li class="breadcrumb-item">Dashboard</li>
<li class="breadcrumb-item">Books</li>
<li class="breadcrumb-item active" aria-current="page">Add Book</li>
</ol>
</div>
<div class="col-sm-3">
<div class="btn-group float-sm-right">
Books List
</div>
</div>
</div>
<!-- End Breadcrumb-->
<div class="row">
<div class="col-lg-10 mx-auto">
<div class="card">
<div class="card-body">
<div class="card-title">Add Book
<form id="edit_video_form" enctype="multipart/form-data">
<div class="form-group">
<label for="input-1">Book Name</label>
<input type="text" required value="" class="form-control" name="input_name" id="input-1">
</div>
<input type="hidden" name="id" value="">
<div class="form-group">
<label for="input-3">Book Cost</label>
<select name="select_cost" required class="form-control" id="purpose">
<option value="0">Free</option>
<option value="1">Paid</option>
</select>
</div>
<div class="form-group" id="business" style="display:none">
<label for="input-1">Book price</label>
<input type="text" required value="" class="form-control" name="input_price" id="input-1" placeholder="Enter Book Price">
</div>
<div class="form-group">
<label for="input-2">Book Category</label>
<!-- DropDown -->
<select name="select_category" required class="form-control">
<option value="">Select Category</option>
<?php $i = 1;
foreach($categorylist as $cat) { ?>
<option required value="<?php echo $cat->cat_id; ?>"><?php echo $cat->cat_name; ?></option>
<?php $i++;
} ?>
</select>
</div>
<div class="form-group">
<label for="input-2">Book Author</label>
<!-- DropDown -->
<select name="select_author" required class="form-control">
<option value="">Select Author</option>
<?php $i = 1;
foreach($authorlist as $cat) { ?>
<option value="<?php echo $cat->a_id; ?>"><?php echo $cat->a_title; ?></option>
<?php $i++;
} ?>
</select>
</div>
<div class="form-group">
<label for="input-1"> Book Cover Poster</label>
<input type="file" required class="form-control" name="input_bookcover" id="input-1" placeholder="select Book Cover image"
onchange="readURL(this,'showImage')">
<input type="hidden" name="input_bookcover" value="">
<p class="noteMsg">Note: Image Size must be less than 2MB.Image Height and Width less than 1000px.</p>
<img id="showImage" src="<?php echo base_url() . 'assets/images/placeholder.png'; ?>" height="100" width="100" alt="your image"/>
</div>
<div class="form-group">
<label for="input-1"> Upload Sample Book</label>
<input type="file" required class="form-control" name="input_sample_book" id="input-1" placeholder="select Sample Book">
<input type="hidden" name="input_sample_book" value="">
</div>
<div class="form-group">
<label for="input-1"> Upload Full Book</label>
<input type="file" required class="form-control" name="input_full_book" id="input-1" placeholder="select Full Book">
<input type="hidden" name="input_full_book" value="">
</div>
<div class="form-group">
<label for="input-1">Book Description</label>
<textarea cols="40" rows="5" style="height: 150px" type="text" required value="" class="form-control" name="input_description"
id="input-1"></textarea>
</div>
<div class="form-group">
<button type="button" onclick="savebook()" class="btn btn-primary shadow-primary px-5">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
$this->load->view('admin/comman/footerpage');
?>
<script type="text/javascript">
$('#purpose').on('change', function () {
if (this.value === '1') {
$("#business").show();
} else {
$("#business").hide();
}
});
function savebook() {
var wallpaper_title = jQuery('input[name=wallpaper_title]').val();
if (wallpaper_title == '') {
toastr.error('Please enter Book Name');
return false;
}
$("#dvloader").show();
var formData = new FormData($("#edit_video_form")[0]);
$.ajax({
type: 'POST',
url: '<?php echo base_url(); ?>index.php/admin/savebook',
data: formData,
cache: false,
contentType: false,
processData: false,
dataType: "json",
success: function (resp) {
$("#dvloader").hide();
if (resp.status == '200') {
document.getElementById("edit_video_form").reset();
toastr.success(resp.msg, 'success');
setTimeout(function () {
location.reload();
}, 500);
} else {
toastr.error(resp.msg);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#dvloader").hide();
toastr.error(errorThrown.msg, 'failed');
}
});
}
</script>
here is the database code
enter code here
public function savebook(){
$input_name = $_POST['input_name'];
$input_description = $_POST['input_description'];
$input_price = $_POST['input_price'];
$select_category = $_POST['select_category'];
$select_author = $_POST['select_author'];
$select_cost = $_POST['select_cost'];
$is_feature = "yes";
$b_status = "enable";
$fa_id = $_POST['select_author'];
$input_bookcover=$this->imageupload($_FILES['input_bookcover'],'input_bookcover', FCPATH . 'assets/images/book');
if (isset($_FILES['input_sample_book']) && !empty($_FILES['input_sample_book']['name'])) {
$input_sample_book=$this->fileupload($_FILES['input_sample_book'],'input_sample_book', FCPATH . 'assets/images/book');
}
if (isset($_FILES['input_full_book']) && !empty($_FILES['input_full_book']['name'])) {
$input_full_book=$this->fileupload($_FILES['input_full_book'],'input_full_book', FCPATH . 'assets/images/book');
}
$data = array(
'b_title' => $input_name,
'b_description' => $input_description,
'is_paid' => $select_cost,
'sample_b_url' => $input_sample_book,
'b_url' => $input_full_book,
'b_price' => $input_price,
'fcat_id'=> $select_category,
'b_image' => $input_bookcover,
'is_feature' => $is_feature,
'b_status' => $b_status,
'fa_id' => $fa_id,
'b_date' => date('Y-m-d h:i:s')
);
$res_id=$this->Adminmodel->add_book($data);
if($res_id){
$res=array('status'=>'200','msg'=>'Book added successfully.','id'=>$res_id);
echo json_encode($res);exit;
}else{
$res=array('status'=>'400','msg'=>'fail');
echo json_encode($res);exit;
}
}

Remove All Elements with the Same Class in Pure JavaScript

I have a form that is being validated once the user clicks submit. If there is an error, a <span> tag with the class message is displayed above each input field that is empty. When the user makes the correction and clicks submit again, I want all the message classes to be removed that way I can validate the inputs again without having to worry about duplicating the error messages.
HTML
<div class="row">
<div class="column is-6--tablet">
<h2>Personal Information</h2>
<div class="row">
<div class="column is-3">
<span class="message">Please enter your first name.</span>
<label for="xFIRST_NAME">First Name</label>
</div>
<div class="column is-9">
<input type="text" name="xFIRST_NAME" value="<?php echo $xFIRST_NAME; ?>" required>
</div>
</div>
<div class="row">
<div class="column is-3">
<span class="message">Please enter your last name.</span>
<label for="xLAST_NAME">Last Name</label>
</div>
<div class="column is-9">
<input type="text" name="xLAST_NAME" value="<?php echo $xLAST_NAME; ?>" required>
</div>
</div>
<div class="row">
<div class="column is-3">
<span class="message">Please enter your phone.</span>
<label for="XPHONE">Phone</label>
</div>
<div class="column is-9">
<input type="tel" name="xPHONE" value="<?php echo $xPHONE; ?>" required>
</div>
</div>
<div class="row">
<div class="column is-3">
<label for="xEMAIL">Email</label>
</div>
<div class="column is-9">
<input type="email" name="xEMAIL" value="<?php echo $xEMAIL; ?>" required>
</div>
</div>
<div class="row patient-type">
<div class="column is-12">
<hr>
<input type="radio" name="xPATIENT_STATUS" id="NEW_PATIENT" value="New Patient" <?php echo ($xPATIENT_STATUS === 'New Patient' ? 'checked' : ''); ?> required>
<label for="NEW_PATIENT"> New Patient</label>
<input type="radio" name="xPATIENT_STATUS" id="EXISTING_PATIENT" value="Existing Patient" <?php echo ($xPATIENT_STATUS === 'Existing Patient' ? 'checked' : ''); ?>>
<label for="EXISTING_PATIENT"> Existing Patient</label>
</div>
</div>
</div>
</div>
JavaScript
var messages = document.querySelectorAll('.message');
for(var i = 0; 1 < messages.length; i++)
{
messages[i].parentNode.removeChild(messages[i]);
}
The error I am getting says TypeError: messages[i] is undefined
How can I query all the classes message and remove them?I have seen similar questions on here but none of them seem to answer what I am looking for.

You simply have a typo in your for statement, replace 1 with i in the predicate
var messages = document.querySelectorAll('.message');
for(var i = 0; i < messages.length; i++) {
messages[i].parentNode.removeChild(messages[i]);
}
Also note, you could use messages[i].remove() for shorter syntax. (mdn)

You have for(var i = 0; 1 < messages.length; i++) but the 1 should be your variable named i instead. like this: for(var i = 0; i < messages.length; i++)
Right now your code reads "keep looping if the number 1 is less than the number of messages"
var messages = document.querySelectorAll('.message');
for(var i = 0; i < messages.length; i++)
{
messages[i].parentNode.removeChild(messages[i]);
}
<div class="row">
<div class="column is-6--tablet">
<h2>Personal Information</h2>
<div class="row">
<div class="column is-3">
<span class="message">Please enter your first name.</span>
<label for="xFIRST_NAME">First Name</label>
</div>
<div class="column is-9">
<input type="text" name="xFIRST_NAME" value="<?php echo $xFIRST_NAME; ?>" required>
</div>
</div>
<div class="row">
<div class="column is-3">
<span class="message">Please enter your last name.</span>
<label for="xLAST_NAME">Last Name</label>
</div>
<div class="column is-9">
<input type="text" name="xLAST_NAME" value="<?php echo $xLAST_NAME; ?>" required>
</div>
</div>
<div class="row">
<div class="column is-3">
<span class="message">Please enter your phone.</span>
<label for="XPHONE">Phone</label>
</div>
<div class="column is-9">
<input type="tel" name="xPHONE" value="<?php echo $xPHONE; ?>" required>
</div>
</div>
<div class="row">
<div class="column is-3">
<label for="xEMAIL">Email</label>
</div>
<div class="column is-9">
<input type="email" name="xEMAIL" value="<?php echo $xEMAIL; ?>" required>
</div>
</div>
<div class="row patient-type">
<div class="column is-12">
<hr>
<input type="radio" name="xPATIENT_STATUS" id="NEW_PATIENT" value="New Patient" <?php echo ($xPATIENT_STATUS === 'New Patient' ? 'checked' : ''); ?> required>
<label for="NEW_PATIENT"> New Patient</label>
<input type="radio" name="xPATIENT_STATUS" id="EXISTING_PATIENT" value="Existing Patient" <?php echo ($xPATIENT_STATUS === 'Existing Patient' ? 'checked' : ''); ?>>
<label for="EXISTING_PATIENT"> Existing Patient</label>
</div>
</div>
</div>
</div>

I see an error in your foor loop. 1 < messages.length is probably always true. Replace 1 with i:
for(var i = 0; i < messages.length; i++)
{
messages[i].parentNode.removeChild(messages[i]);
}

If I'm understanding you right:
var messages = document.querySelectorAll('.message');
for(var i = 0; 1 < messages.length; i++)
{
messages[i].classList.remove('message');
}

How to get dynamic buttons value when button is click in PHP?

I have created dynamic buttons in php. I need to get the value of that button when particular button is click. And when we click the button, all information is fetch in to the form.
Here is my code for buttonclick
<?php
function dash()
{
include 'config.php';
$sql = "SELECT roomno FROM roombook";
if($result = mysqli_query($db, $sql))
{
$str = '';
while($row = mysqli_fetch_array($result))
{
// generate array from comma delimited list
$rooms = explode(',', $row['roomno']);
//create the dynamic button and set the value
foreach ( $rooms as $k=>$v )
{
$str .= '<input type="button" onClick="showDiv()" name="btn_'.$k.'" value="'.$v.'" id="btn_'.$k.'"/>';
}
}
return $str;
}
else {
echo "ERROR: Could not able to execute $sql. " . mysqli_error($db);
}
mysqli_close($db);
}
?>
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>room boking</title>
<link href="css/bootstrap1.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/front.css">
</head>
<body>
<form method="post" action="">
<div class =" row box col-md-4" >
<div style="color:black"><?php echo dash();?></div>
</div>
</form>
Here fetching the value in form code
<!DOCTYPE html>
<?php
include 'config.php';
if(isset($_POST['book']))
{
$roomno=$_POST['roomno'];
$roomtype=$_POST['roomtype'];
$location=$_POST['location'];
$charges=$_POST['charges'];
$firstname=$_POST['firstname'];
$lastname=$_POST['lastname'];
$address=$_POST['address'];
$city=$_POST['city'];
$state=$_POST['state'];
$pincode=$_POST['pincode'];
$mobilenumber=$_POST['mobilenumber'];
$idtype=$_POST['idtype'];
$idnumber=$_POST['idnumber'];
$Adate=$_POST['Adate'];
$Ldate=$_POST['Ldate'];
//echo $roomno."<br>".$roomtype."<br>".$location."<br>".$charges."<br>".$firstname."<br>".$lastname."<br>";
if(strlen($firstname)<3)
{
echo "<script>alert('First name is to short')</script>";
}
else if(strlen($lastname)<3)
{
echo "<script>alert('Last name is to short')</script>";
}
else if(strlen($address)<3)
{
echo "<script>alert('UserName name is to short')</script>";
}
else
{
$query=" INSERT INTO customerbook(roomno,roomtype,location,charges,firstname,lastname,address,city,state,pincode,mobilenumber,idtype,idnumber,Adate,Ldate) VALUES('$roomno','$roomtype','$location','$charges','$firstname','$lastname','$address','$city','$state','$pincode','$mobilenumber','$idtype','$idnumber','$Adate','$Ldate')";
//$query="INSERT INTO customerbook(roomno,roomtype,location,charges,firstname,lastname,address,state,city,pincode,mobilenumber,idtype,idnumber,Adate,Ldate) VALUES('$roomno','$roomtype','$location','$charges','$firstname','$lastname','$address','$state,','$city','$pincode','$mobilenumber','$idtype','$idnumber','$Adate','$Ldate')";
if(mysqli_query($db, $query))
{
echo "<script>alert('booking seccessfully')</script>";
//header("Location:login.php");
}
else echo "error";
}
}
$sql = "SELECT roomno,roomtype,location,charges FROM roombook where roomno='101'";
if($result = mysqli_query($db, $sql)){
if(mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_array($result)){
$roomno=$row['roomno'];
$roomtype=$row['roomtype'];
$location=$row['location'];
$charges=$row['charges'];
}
// Free result set
mysqli_free_result($result);
} else{
echo "No records matching your query were found.";
}
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
// Close connection
mysqli_close($db);
?>
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>booking Form</title>
<!-- Bootstrap -->
<link href="css/bootstrap1.min.css" rel="stylesheet">
<link href="css/book.css" rel="stylesheet">
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.12.4.js"></script>
<script src="js/book1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="head" id="link">
<div class="panel panel-primary" style="margin:20px;">
<div class="panel-heading">
<center><h3 class="panel-title">booking Form</h3></center>
</div>
<div class="panel-body">
<form method="post" action="">
<div class="col-md-12">
<div class="form-group col-md-12 ">
<label for="roomno">Room Number* </label>
<input type="text" class="form-control input-sm" name="roomno" value='<?php echo $roomno; ?>' placeholder="">
</div>
<div class="form-group col-md-6">
<label for="type">Room Type*</label>
<input type="text" class="form-control input-sm" name="roomtype" value='<?php echo $roomtype; ?>' placeholder="">
</div>
<div class="form-group col-md-6">
<label for="location">Location*</label>
<input type="text" class="form-control input-sm" name="location" placeholder="">
</div>
<div class="form-group col-md-12">
<label for="charges">charges*</label>
<input type="text" class="form-control input-sm" name="charges" placeholder="">
</div>
<div class="form-group col-md-6">
<label for="customer name">First Name*</label>
<input type="text" class="form-control input-sm" name="firstname" placeholder="">
</div>
<div class="form-group col-md-6">
<label for="customer name">Last Name*</label>
<input type="text" class="form-control input-sm" name="lastname" placeholder="">
</div>
<div class="form-group col-md-12">
<label for="address">Address*</label>
<textarea class="form-control input-sm" name="address" rows="3"></textarea>
</div>
<div class="form-group col-md-4">
<label for="city">City*</label>
<input type="text" class="form-control input-sm" name="city" placeholder="">
</div>
<div class="form-group col-md-4">
<label for="state">State*</label>
<input type="text" class="form-control input-sm" name="state" placeholder="">
</div>
<div class="form-group col-md-4">
<label for="pincode">Pincode</label>
<input type="text" class="form-control input-sm" name="pincode" placeholder="">
</div>
<div class="form-group col-md-12">
<label for="mobile">Mobile Number*</label>
<input type="text" class="form-control input-sm" name="mobilenumber" placeholder="">
</div>
<div class = "form-group col-md-12">
<label for="years">Id Type *</label>
<select class="form-control input-sm" name="idtype">
<option>-- Select Id Card --</option>
<option>Pancard</option>
<option>Adhar Card</option>
<option>voting card</option>
</select>
</div>
<div class="form-group col-md-12">
<label for="idnumber">Id Number</label>
<input type="text" class="form-control input-sm" name="idnumber" placeholder="">
</div>
<div class="form-group col-md-6">
<label for="arrival">Arrival Date</label>
<input type="text" class="form-control input-sm datepicker" name="Adate" placeholder="">
</div>
<div class="form-group col-md-6">
<label for="arrival">Leaving Date</label>
<input type="text" class="form-control input-sm datepicker" name="Ldate" placeholder="">
</div>
</div>
<div class="col-md-12">
<div class="form-group col-md-12 " >
<center><input type="submit" class="btn btn-primary" value="Submit" name="book"/><center>
</div>
</div>
</form>
</div>
</div>
</script>
</body>
</html>

You can create your button like this
$str .= '<input type="button" onClick="showDiv()" data-atribute-id="valueyouwant" name="btn_'.$k.'" value="'.$v.'" id="btn_'.$k.'"/>';
Script should be like
$("button").click(function() {
alert(this.id); OR
alert($(this).attr('id')); OR
alert($(this).attr('data')); OR
var btnid = $(this).attr('data');//which give you current clicked btn id
});

You can use this:
// is going to select all elements that its name start with *btn_* (your dynamic buttons)
$('[name^="btn_"]').click(function() {
//get the value of the button that was clicked
var buttonValue = $(this).val();
// send data to the other file using the action attribute of the form
$('form').submit();
});
Hope that can help.

I want to display data from database.if we newly add a form data ,i want to append the new post on display without refresh using codeigniter

I have a show and hide div. That is an add form. I want to display all data from the table on the bottom of the form. If form is opened or not, the data must be displayed. When we add new post, that must append on the top of displayed data without refresh.
My view
<div class="slidingDiv" style="display:none">
<div class="row">
<div class="col-xs-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Add Requirement Item</h3>
</div><!-- /.box-header -->
<!-- form start -->
<?php echo validation_errors(); ?>
<?php
$attributes = array('id' => 'myForm');
echo form_open_multipart(base_url().'moderator/Requirement/add_employee_data',$attributes); ?>
<div class="box-body">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label for="txttitle">Requirement Title (Product/Service) : </label>
</div>
<div class="col-xs-12">
<input type="text" name="txtService" class="form-control" id="txttitle" placeholder="Requirement Title (Product/Service) : " value="" required>
</div>
</div>
</div>
</diV>
<div class="col-xs-6">
<div class="form-group">
<div class="row">
<div class="col-xs-8">
<label for="txtquantity">Estimated Quantity : </label>
</div>
<div class="col-xs-4">
<label for="txtquantity"></label>
</div>
<div class="col-xs-8">
<input type="text" name="txtQuantity" class="form-control" id="txtquantity" placeholder="Estimated Quantity" value="
" required>
</div>
<div class="col-xs-4">
<select class="form-control" name="txtunit" required="required">
<option value="">----Select------</option>
<?php
foreach ($units as $name) {
echo ' <option value="' . $name->id . '">' . $name->name . '</option>';
}
?>
</select>
</div>
</div>
</div>
</diV>
<div class="col-xs-12">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label for="txtdetails">Requirement Details : </label>
</div>
<div class="col-xs-12">
<textarea class="textarea" name="txtRequirement" placeholder="Requirement Details" id="txtdetails" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">
</textarea>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label for="sbUser">Expiry of Requirement : </label><br>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input id="thedate" type="text" name="txtBidclosing" class="form-control" required="required"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.box-body -->
<div class="box-footer">
<input type="button" class="button" value="submit" />
</form>
</div>
</div>
</div>
</div>
<div id="sort">
<br>
</div>
Ajax code
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({
type:"POST",
url: "<?php echo base_url() ?>moderator/Requirement/add_employee_data",
data:$("#myForm").serialize(),
success: function (dataCheck) {
//alert(dataCheck);
$('#sort').append(dataCheck);
//window.location.reload();},
});});});
</script>
Model
public function add_employee_data($data){
$this->db->insert('jil_requirementdetail',$data);
$id = $this->db->insert_id();
$this->db->select('*');
$this->db->from('jil_requirementdetail');
$this->db->where('rqmd_id',$id);
$result = $this->db->get()->result();
return $result;
}

On your model
public function add_employee_data($data){
$this->db->insert('jil_requirementdetail',$data);
$id = $this->db->insert_id();
$this->db->select('*');
$this->db->from('jil_requirementdetail');
// $this->db->where('rqmd_id',$id); // get all data
$this->db->order_by('rqmd_id','DESC');
$result = $this->db->get();
if($result->num_row() > 0)
{
echo json_encode(['status'=>'pass','data'=>$result->result()];
}else{
echo json_encode(['status'=>'fail']);
}
}
On Ajax Success
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({
type: "POST",
url: "<?php echo base_url() ?>moderator/Requirement/add_employee_data",
data: $("#myForm").serialize(),
success: function(dataCheck){
//alert(dataCheck);
var res = JSON.parse(dataCheck);
if(res.status=='pass')
{
var user_data = res.data;
var html = '';
var length = user_data.length;
for(var i = 0; i < length; i++)
{
//your html
html += '<div>' + user_data[i].name + '</div>'; //add your html structure as you want
}
$('#sort').append(html);
},
}
});
});
});
</script>

Add button to add additional input fields and assign them new id/name HTML/PHP/JS

I am trying to figure out how to add a button that will add additional html input fields so that I don't have to predetermine the maximum amount that will be needed like I have here:
Screenshot of page
I'd like to be able to add a simple 'Add Author' button or 'Add University' in case an author has 2 universities. Right now I am having to enter author name 2x to input 2 different universities. It would also need to rename input id each time button is clicked.... Help is greatly appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Input Form - Research Ranker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="shortcut icon" href="/../img/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#article_name" ).autocomplete({
source: 'articlesearch.php'
});
$( "#author1_name" ).autocomplete({
source: 'authorsearch.php'
});
$( "#author2_name" ).autocomplete({
source: 'authorsearch.php'
});
$( "#author3_name" ).autocomplete({
source: 'authorsearch.php'
});
$( "#author4_name" ).autocomplete({
source: 'authorsearch.php'
});
$( "#author5_name" ).autocomplete({
source: 'authorsearch.php'
});
$( "#author6_name" ).autocomplete({
source: 'authorsearch.php'
});
$( "#author1_university" ).autocomplete({
source: 'universitysearch.php'
});
$( "#author2_university" ).autocomplete({
source: 'universitysearch.php'
});
$( "#author3_university" ).autocomplete({
source: 'universitysearch.php'
});
$( "#author4_university" ).autocomplete({
source: 'universitysearch.php'
});
$( "#author5_university" ).autocomplete({
source: 'universitysearch.php'
});
$( "#author6_university" ).autocomplete({
source: 'universitysearch.php'
});
});
</script>
</head>
<body>
<?PHP
if(!isset($_POST['submit'])){
print '
<div class="container-fluid ui-widget">
<form class="form-horizontal" method="post" action="articleinput2.php" onsubmit="return confirm("Is all of your data correct?");">
<fieldset>
<!-- Article Input -->
<legend>Article Input</legend>
<!-- Journal Radio Buttons (value is journal ISSN)-->
<div class="form-group">
<label class="col-md-4 control-label" for="journal_radio">Journal</label>
<div class="col-md-4">
<div class="radio">
<label for="journal_radio-0">
<input type="radio" name="journal_radio" id="journal_radio-0" value="2162-9730" checked="checked">
MIS Quarterly
</label>
</div>
<div class="radio">
<label for="journal_radio-1">
<input type="radio" name="journal_radio" id="journal_radio-1" value="1047-7047">
Information Systems Research
</label>
</div>
<div class="radio">
<label for="journal_radio-2">
<input type="radio" name="journal_radio" id="journal_radio-2" value="0742-1222">
Journal of Management Information Systems
</label>
</div>
<div class="radio">
<label for="journal_radio-3">
<input type="radio" name="journal_radio" id="journal_radio-3" value="1536-9323">
Journal of the Association for Information Systems
</label>
</div>
<div class="radio">
<label for="journal_radio-4">
<input type="radio" name="journal_radio" id="journal_radio-4" value="1476-9344">
European Journal of Information Systems
</label>
</div>
<div class="radio">
<label for="journal_radio-5">
<input type="radio" name="journal_radio" id="journal_radio-5" value="1365-2575">
Information Systems Journal
</label>
</div>
<div class="radio">
<label for="journal_radio-6">
<input type="radio" name="journal_radio" id="journal_radio-6" value="0963-8687">
Journal of Strategic Information Systems
</label>
</div>
<div class="radio">
<label for="journal_radio-7">
<input type="radio" name="journal_radio" id="journal_radio-7" value="0268-3962">
Journal of Information Technology
</label>
</div>
<div class="radio">
<label for="journal_radio-8">
<input type="radio" name="journal_radio" id="journal_radio-8" value="0167-9236">
Decision Support Systems
</label>
</div>
<div class="radio">
<label for="journal_radio-9">
<input type="radio" name="journal_radio" id="journal_radio-9" value="0378-7206">
Information and Management
</label>
</div>
</div>
</div>
<!-- Article Name Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="article_name">Article Name:</label>
<div class="col-md-5">
<input id="article_name" name="article_name" type="text" placeholder="Article Name" class="form-control input-md" required="" maxlength = "60">
</div>
</div>
<!-- Author 1-->
<div class="form-group">
<label class="col-md-4 control-label" for="author1_name">Author 1:</label>
<div class="col-md-4">
<input id="author1_name" name="author1_name" type="text" placeholder="Author Name" class="form-control input-md" required="" maxlength="40">
</div>
</div>
<!-- Author 1 University -->
<div class="form-group">
<label class="col-md-4 control-label" for="author1_university">University:</label>
<div class="col-md-4">
<input id="author1_university" name="author1_university" type="text" placeholder="Author University" class="form-control input-md" required="" maxlength="55">
</div>
</div>
<!-- Author 2-->
<div class="form-group">
<label class="col-md-4 control-label" for="author2_name">Author 2:</label>
<div class="col-md-4">
<input id="author2_name" name="author2_name" type="text" placeholder="" class="form-control input-md" maxlength="40">
</div>
</div>
<!-- Author 2 University-->
<div class="form-group">
<label class="col-md-4 control-label" for="author2_university">University:</label>
<div class="col-md-4">
<input id="author2_university" name="author2_university" type="text" placeholder="" class="form-control input-md" maxlength="55">
</div>
</div>
<!-- Author 3-->
<div class="form-group">
<label class="col-md-4 control-label" for="author3_name">Author 3:</label>
<div class="col-md-4">
<input id="author3_name" name="author3_name" type="text" placeholder="" class="form-control input-md" maxlength="40">
</div>
</div>
<!-- Author 3 University-->
<div class="form-group">
<label class="col-md-4 control-label" for="author3_university">University:</label>
<div class="col-md-4">
<input id="author3_university" name="author3_university" type="text" placeholder="" class="form-control input-md" maxlength="55">
</div>
</div>
<!-- Author 4-->
<div class="form-group">
<label class="col-md-4 control-label" for="author4_name">Author 4: </label>
<div class="col-md-4">
<input id="author4_name" name="author4_name" type="text" placeholder="" class="form-control input-md" maxlength="40">
</div>
</div>
<!-- Author 4 University-->
<div class="form-group">
<label class="col-md-4 control-label" for="author4_university">University:</label>
<div class="col-md-4">
<input id="author4_university" name="author4_university" type="text" placeholder="" class="form-control input-md" maxlength="55">
</div>
</div>
<!-- Author 5-->
<div class="form-group">
<label class="col-md-4 control-label" for="author5_name">Author 5:</label>
<div class="col-md-4">
<input id="author5_name" name="author5_name" type="text" placeholder="" class="form-control input-md" maxlength="40">
</div>
</div>
<!-- Author 5 University-->
<div class="form-group">
<label class="col-md-4 control-label" for="author5_university">University:</label>
<div class="col-md-4">
<input id="author5_university" name="author5_university" type="text" placeholder="" class="form-control input-md" maxlength="55">
</div>
</div>
<!-- Author 6-->
<div class="form-group">
<label class="col-md-4 control-label" for="author6_name">Author 6:</label>
<div class="col-md-4">
<input id="author6_name" name="author6_name" type="text" placeholder="" class="form-control input-md" maxlength="40">
</div>
</div>
<!-- Author 6 University-->
<div class="form-group">
<label class="col-md-4 control-label" for="author6_university">University:</label>
<div class="col-md-4">
<input id="author6_university" name="author6_university" type="text" placeholder="" class="form-control input-md" maxlength="55">
</div>
</div>
<!-- Select Year Published -->
<div class="form-group">
<label class="col-md-4 control-label" for="year">Year Published</label>
<div class="col-md-4">
<select id="year" name="year" class="form-control">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
</div>
</div>
<!-- Is Security Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label" for="is_security"></label>
<div class="col-md-4">
<label class="checkbox-inline" for="is_security">
<input type="checkbox" name="is_security" id="is_security" value="1">
Security Related
</label>
</div>
</div>
<!-- Submit Form Button -->
<div class="form-group">
<div class="col-md-4 control-label">
<button id="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>';
} else {
$dbHost = "localhost";
$dbUsername = "admin";
$dbPassword = "";
$dbName = "webdb";
// Create connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
// Check connection
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
} else {
// Post PHP variables
$journal = $_POST['journal_radio'];
$article_name = $_POST['article_name'];
$author1 = $_POST['author1_name'];
$author1uni = $_POST['author1_university'];
$author2 = $_POST['author2_name'];
$author2uni = $_POST['author2_university'];
$author3 = $_POST['author3_name'];
$author3uni = $_POST['author3_university'];
$author4 = $_POST['author4_name'];
$author4uni = $_POST['author4_university'];
$author5 = $_POST['author5_name'];
$author5uni = $_POST['author5_university'];
$author6 = $_POST['author6_name'];
$author6uni = $_POST['author6_university'];
$year = $_POST['year'];
$security = $_POST['is_security'];
function authorinfoinsert($author, $number, $authoruni, $articleid, $article, $db){
//check if Author already exists
$authorquery = $db->query("SELECT Author_Name FROM Authors WHERE Author_Name = '$author'");
if($authorquery->num_rows != 0) {
echo ' New Input <br />';
echo 'Author ' . $number . ' - ' . $author . ' - already present<br />';
} else {
//insert author if doesnt exist
$authorinsert = "INSERT INTO Authors (Author_Name) VALUES ('$author')";
if ($db->query($authorinsert) === TRUE) {
echo 'Author ' . $number . ' - ' . $author . ' - created successfully.<br />';
} else {
echo 'Error: ' . $authorinsert . '<br />' . $db->error . '<br />';
}
}
// store Author Author_ID value
$result = $db->query("SELECT Author_ID FROM Authors WHERE Author_Name = '$author'");
$row = $result->fetch_assoc();
$authorid = $row['Author_ID'];
//check if Author University exists
$authoruniquery = $db->query("SELECT University_Name FROM University WHERE University_Name = '$authoruni'");
if($authoruniquery->num_rows != 0) {
echo ' New Input <br />';
echo 'Author ' . $number . ' University already present <br />';
} else {
//insert university if doesnt exist
$uniinsert = "INSERT INTO University (University_Name) VALUES ('$authoruni')";
if ($db->query($uniinsert) === TRUE) {
echo 'Author ' . $number . ' University - ' . $authoruni . ' - created successfully.<br />';
} else {
echo 'Error: ' . $uniinsert . "<br>" . $db->error . '<br />';
}
}
// store Author University_ID value
$result = $db->query("SELECT University_ID FROM University WHERE University_Name = '$authoruni'");
$row = $result->fetch_assoc();
$authoruniid = $row['University_ID'];
//Enter Author and Article in Articles_Authored
$authoredquery = $db->query("SELECT Author_ID, Article_ID FROM Articles_Authored WHERE Author_ID = '$authorid' AND Article_ID ='$articleid'");
if($authoredquery->num_rows != 0) {
echo ' New Input <br />';
echo 'Article Authored entry for Author ' . $number . ' - ' . $author . ' - already present<br />';
} else {
$articlesauthoredinsert = "INSERT INTO Articles_Authored (Article_ID, Author_ID, Name_Authored_As) VALUES ('$articleid','$authorid','$author')";
if ($db->query($articlesauthoredinsert) === TRUE) {
echo 'Article Authored - Author ' . $number . ' - created successfully <br />';
} else {
echo 'Error: ' . $articlesauthoredinsert . "<br>" . $db->error . '<br />';
}
}
//Enter Author University instance in Author_University
$authoruniinsert = "INSERT INTO Author_University (Article_ID, Author_ID, University_ID) VALUES ('$articleid','$authorid','$authoruniid')";
if ($db->query($authoruniinsert) === TRUE) {
echo 'University instance for Author ' . $number . ' created successfully<br />';
} else {
echo 'Error: ' . $authoruniinsert . "<br>" . $db->error . '<br />';
}
}
//check if article exist
$articlequery = $db->query("SELECT Article_Title, ISSN FROM Articles WHERE Article_Title = '$article_name' AND ISSN = '$journal'");
if($articlequery->num_rows != 0) {
echo ' New Input <br />';
echo "<script type= 'text/javascript'>alert('Article Already Present');</script>";
} else {
//insert article if doesn't exist
$articleinsert = "INSERT INTO Articles (ISSN, Year_Published, Is_Security, Article_Title)
VALUES ('$journal','$year','$security','$article_name')";
if ($db->query($articleinsert) === TRUE) {
echo 'New Article - ' . $article_name . ' - created successfully<br />';
} else {
echo 'Error: ' . $articleinsert . "<br>" . $db->error . '<br />';
}
// store Article_ID value
$result = $db->query("SELECT Article_ID FROM Articles WHERE Article_Title = '$article_name' AND ISSN = '$journal'");
$row = $result->fetch_assoc();
$articleid = $row['Article_ID'];
//insert author 1 info
authorinfoinsert($author1, 1, $author1uni, $articleid, $article, $db);
//check if Author 2 has input
if (!empty($author2)){
authorinfoinsert($author2, 2, $author2uni, $articleid, $article, $db);
}
//check if Author 3 has input
if (!empty($author3)){
authorinfoinsert($author3, 3, $author3uni, $articleid, $article, $db);
}
//check if Author 4 has input
if (!empty($author4)){
authorinfoinsert($author4, 4, $author4uni, $articleid, $article, $db);
}
//check if Author 5 has input
if (!empty($author5)){
authorinfoinsert($author5, 5, $author5uni, $articleid, $article, $db);
}
//check if Author 6 has input
if (!empty($author6)){
authorinfoinsert($author6, 6, $author6uni, $articleid, $article, $db);
} else{
$db->close();
}
}
}
}
?>
</body>
</html>

Below is the code to dynamically add dropdown with it's unique id, you can easily modify it according to your needs, i.e. change it to button...
HTML:
<a id="add">Add More</a>
JavaScript:
var i = 1;
$("#add").click(function(){
var appendFields = '<tr>';
appendFields += '<td><select id="dropdown_'+i+'" name="dropdown_name[]"><option value="1">One</option></select></td>';
appendFields += '<td><a style="color: red; cursor: pointer;" class="remCF">Remove</a></td>';
appendFields += '</tr>';
$("#table_id").append(appendFields);
i++;
});
$("#table_id").on('click','.remCF',function(){
$(this).parent().parent().remove();
});
});

Try this code and check diff ids on inspect element.
<HTML>
<HEAD>
<TITLE>Dynamically add Textbox, Radio, Button in html Form using JavaScript</TITLE>
<SCRIPT language="javascript">
function add(type,c) {
//Create an input type dynamically.
var element = document.createElement("input");
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
//Assign different attributes to the element.
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
element.setAttribute("id", type+parseInt(value));
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<H2>Dynamically add element in form.</H2>
Select the element and hit Add to add it in form.
<BR/><input type="hidden" id="number" value="0"/>
<SELECT name="element">
<OPTION value="button">Button</OPTION>
<OPTION value="text">Textbox</OPTION>
<OPTION value="radio">Radio</OPTION>
</SELECT>
<INPUT type="button" value="Add" onclick="add(document.forms[0].element.value,1)"/>
<span id="fooBar"> </span>
</FORM>
</BODY>
</HTML>