Serialize data in AJax - javascript

I having trouble for adding a multiple Sub Author in my form, I have a form that you can add a sub author. The code works if I only submit one sub author but if multiple sub author the codes not working.
Here's the code of my text box in FormAddBook.
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
And when you want to add another sub author, text box will appear when yun click the Add Sub Author with the same name of textbox.
The codes work when one sub author only but if multiple sub authors the codes not working.
Here's the code of my jquery.
$.ajax({
type: 'POST',
url: 'proc/exec/exec-insert-book.php',
data: $('#FormAddBook').serialize(),
});
Does the Serialize cannot recognize the another text box?
Sorry for my bad english.
Here's the HTML Form code.
<form id="FormAddBook">
<div class="modal-body">
<div class="row">
<div class="col-lg-6 hide" >
<label>Accession No:</label>
<div class="form-group">
<input type="text" class="form-control" placeholder="Accession No" name="AccessionNo" readonly/>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label>ISBN:</label>
<input type="text" class="form-control" placeholder="ISBN" name="BookISBN" maxlength="20" />
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Date Book Added:</label>
<div id="DateBookAdded" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="Date Book Added" name="DateBookAdded" readonly/>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Archived Date Extension:</label>
<div id="BookAuthLast" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="" name="ArchivedDateExt" readonly/>
</div>
</div>
</div>
<div id="subauthcont">
<div class="subAuthors col-lg-12">
<div class="form-group">
<label>Sub authors:</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
<span class="input-group-btn" disabled>
<button id="btnAddSubAuth" class="btn btn-info" type="button" ><i class="fa fa-user" aria-hidden="true"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="form-group">
<label>Subject:</label>
<select class="form-control" name="Description">
<option>Generalities</option>
<option>Philosophy and Psychology</option>
<option>Religion</option>
<option>Social Science</option>
<option>Languages</option>
<option>Science</option>
<option>Technology</option>
<option>Arts and Recreation</option>
<option>Literature</option>
<option>Geography and History</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label>Status:</label>
<select class="form-control" name="Status" readonly>
<option>Available</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btnSave2" type="submit" class="btn btn-primary asd">Save</button>
</div>
</form>
</div>

Related

how to insert dynamically cloned form into database together with other data using ajax

i cloned some part of my checkout based on user input, i want to insert it with other data into database. this is my html checkout. Class eventdetail is the cloned part. it is shown at id eventdisplay. How can i insert this cloned part together with other parts using ajax into my database?
This is the jquery; i also want to check if all fields are filled but sending it to eventdetail.php.
$("#book").click(function() {
var data = {
totalamount: $('#etamt').val(),
venue: $('#cvenue').val(),
//de: document.getElementById('des').innerHTML,
oname:$('#coname').val(),
// name: document.getElementById('ctitle').innerHTML,
frdate: $('#cedate').val(),
todate: $('#ctodate').val(),
// byno: $('#buynumber').val(),
// byemail: $('#buymail').val(),
// byname: $('#buyname').val(),
num: $('#etqty').val(),
}
$.ajax({
async: true,
url: "eventdetail.php",
method: "POST",
data: $(data).serialize(),
// $('.eventdetail').serialize(),
success: function(rt) {
}
});
console.log(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class= "col-12">
<div class= "row">
<div class= "col-6">
<div class="form-group border-dark">
<label><strong>Info: TEST</strong></label><br>
<input id="cinfo" value="TEST" type = "hidden"><br>
</div>
</div>
<div class= "col-6">
<div class="form-group border-dark">
<label><strong>Organized by: Jochuks </strong></label><br>
<input id="coname" value="Jochuks" type = "hidden"><br>
</div>
</div>
</div>
<div class="form-group border-dark" id="datediv">
<label><strong>Date and Time:</strong></label><br>
<label><strong>From: 5th June 2019</strong></label>
<input id="cedate" value="5th June 2019" type = "hidden"><br>
<label><strong>To: 23rd June 2019</strong></label>
<input id="ctodate" value="23rd June 2019" type = "hidden"><br>
</div>
<div class="form-group border-dark" id="vendiv">
<label><strong>Venue: StackOver</strong></label><br>
<input id="cvenue" value="StackOver" type = "hidden"><br>
</div>
<div class = "eventdetail">
<div class="card" style="padding-left:0px;">
<div class="card-body">
<label><b>Individual Details:</b></label>
<div class="form-inline">
<div class="form-group border-dark">
<input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
</div>
<div class="form-group border-dark">
<input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
</div>
<div class="form-group border-dark">
<input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
</div>
</div>
<section class="row">
<div align="center">
<a class="btn btn-outline-dark remove" >Remove Ticket</a>
</div>
</section>
</div>
</div>
</div>
<div class="card" style="padding-left:0px;">
<div class="card-body">
<label><b>Individual Details:</b></label>
<div class="form-inline">
<div class="form-group border-dark">
<input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
</div>
<div class="form-group border-dark">
<input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
</div>
<div class="form-group border-dark">
<input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
</div>
</div>
<section class="row">
<div align="center">
<a class="btn btn-outline-dark remove" >Remove Ticket</a>
</div>
</section>
</div>
</div>
<div class="card" style="padding-left:0px;">
<div class="card-body">
<label><b>Individual Details:</b></label>
<div class="form-inline">
<div class="form-group border-dark">
<input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
</div>
<div class="form-group border-dark">
<input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
</div>
<div class="form-group border-dark">
<input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
</div>
</div>
<section class="row">
<div align="center">
<a class="btn btn-outline-dark remove" >Remove Ticket</a>
</div>
</section>
</div>
</div>
<div class="card" style="padding-left:0px;">
<div class="card-body">
<label><b>Individual Details:</b></label>
<div class="form-inline">
<div class="form-group border-dark">
<input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
</div>
<div class="form-group border-dark">
<input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
</div>
<div class="form-group border-dark">
<input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
</div>
</div>
<section class="row">
<div align="center">
<a class="btn btn-outline-dark remove" >Remove Ticket</a>
</div>
</section>
</div>
</div>
<div id = "eventdisplay">
</div>
<div class="card" style="padding-left:0px;">
<div class="card-body">
<div class="form-group border-dark pull-right">
<label><strong> Total Amount: 20340</strong></label><br>
<input id="etamt" value="20340" type = "hidden"><br>
</div>
<div class="form-group border-dark pull-right">
<label><strong>Qty: 4</strong></label><br>
<input id="etqty" value="4" type = "hidden">
</div>
</div>
</div>
<button type="button" class="btn btn-success btn-sm btn-block font-weight-bold mt-3 mb-3" id="book">BOOK</button>
<button type="button" class="btn btn-success btn-sm btn-block font-weight-bold mt-3 mb-3" id="back1">BACK</button>
</div>

This isn't going to solve your problem, but here's a snippet where I commented out the bits that weren't working. Try putting a snippet like this into your question, with the things you need, and you'll be able to see what is and isn't working. You can also use https://codepen.io/ to build these things out and test more.
Consider using something other than jQuery, as it's pretty old these days!
create-react-app is a nice starting point if you want to try react.
Writing validation libraries from scratch is a huge task, there are so many tools and plugins now you can use to avoid starting from the ground up:
for jquery: https://jqueryvalidation.org/
for react some insight:
https://www.telerik.com/blogs/up-and-running-with-react-form-validation
If you're just doing this for the joy of learning how to solve this problem with jQuery, that's cool! Feel free to comment on this answer and I'll update it to try and help you. Here's the snippet example for your reference:
$("#book").click(function() {
var data = {
totalamount: document.getElementById('etamt').innerHTML,
venue: document.getElementById('cvenue').innerHTML,
email: $('#cvemail').val(),
// de: document.getElementById('des').innerHTML,
// oname: document.getElementById('coname').innerHTML,
name: document.getElementById('ctitle').innerHTML,
// frdate: document.getElementById('cedate').innerHTML,
// todate: document.getElementById('ctodate').innerHTML,
// byno: $('#buynumber').val(),
// byemail: $('#buymail').val(),
// byname: $('#buyname').val(),
// num: document.getElementById('etqty').innerHTML,
}
$.ajax({
async: true,
url: "eventdetail.php",
method: "POST",
data: $(data).serialize(),
// $('.eventdetail').serialize(),
success: function(rt) {
}
});
console.log(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
<input type="hidden" class="form-control" id="userid">
<input type="hidden" class="form-control" id="id">
<input type="hidden" class="form-control" id="cvemail">
<div class="row">
<div class="col-6">
<div class="form-group border-dark">
<label><strong>Info:</strong></label><br>
<label id="cinfo"></label><br>
</div>
</div>
<div class="col-6">
<div class="form-group border-dark">
<label><strong>Organized by:</strong></label><br>
<label id="coname"></label><br>
</div>
</div>
</div>
<div class="form-group border-dark" id="datediv">
<label><strong>Date and Time:</strong></label><br>
<label><strong>From:</strong></label>
<label id="cedate"></label><br>
<label><strong>To:</strong></label>
<label id="ctodate"></label><br>
</div>
<div class="form-group border-dark" id="vendiv">
<label><strong>Venue:</strong></label><br>
<label id="cvenue"></label><br>
</div>
<div style="display:none" class="eventdetail">
<div class="card" style="padding-left:0px;">
<div class="card-body">
<label class="pull-right" id="none"></label>
<label id="con"></label><br>
<label><b>Individual Details:</b></label>
<div class="form-inline">
<div class="form-group border-dark">
<input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
</div>
<div class="form-group border-dark">
<input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
</div>
<div class="form-group border-dark">
<input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
</div>
</div>
<section class="row">
<div align="center">
<a class="btn btn-outline-dark remove">Remove Ticket</a>
</div>
</section>
</div>
</div>
</div>
<div id="eventdisplay">
</div>
<div class="card" style="padding-left:0px;">
<div class="card-body">
<div class="form-group border-dark pull-right">
<label><strong> Total Amount:</strong></label><br>
<label id="etamt"></label><br>
</div>
<div class="form-group border-dark pull-right">
<label><strong>Qty:</strong></label><br>
<label id="etqty"></label>
</div>
</div>
</div>
<button type="button" class="btn btn-success btn-sm btn-block font-weight-bold mt-3 mb-3" id="book">BOOK</button>
<button type="button" class="btn btn-success btn-sm btn-block font-weight-bold mt-3 mb-3" id="back1">BACK</button>
</div>

Multiple forms not working in a J2EE web application

I have designed a web page which contains multiple forms and each form is provided with its unique submit button and are directed to different servlets on submission.
But at a time only one is getting submitted successfully to the database and another form is not even getting directed to its servlets.
How to do it?
<!-- UPDATE DONOR CARD-->
<div class="col-xl-4 " style="opacity:0.9;">
<div class="card bg-info text-center card-form mb-4">
<div class="card-body">
<h3 class="align-center">Update Donors Detail</h3>
<p>Please fill out this form to update </p>
<form action="UpdateHospitalController" method="post" name="update">
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Mobile no." id="mobNo" name="mobNo">
</div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Date" id="datepickers" name="date">
</div>
<input type="submit" class="btn btn-dark btn-block" name="updateSubmit">
</form>
</div>
</div>
</div>
<!-- ADD DONOR CARD-->
<div class="col-xl-4 " style="opacity:0.9;">
<div class="card bg-info text-center card-form mb-4">
<div class="card-body">
<h3 class="align-center">Add Donors</h3>
<p>Please fill out this form to add </p>
<form action="HospitalController" method="post" onclick="return(validate())" name="addForm">
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Mobile no." maxlength="10" id="mobNo" name="mobNos">
<span id="sp1"></span>
</div>
<div class="form-group" >
<input type="text" class="form-control form-control-lg " placeholder="Name" id="name" name="userName">
<span id="sp2"></span>
</div>
<div class="form-group">
<select class="form-control form-control-lg" placeholder="Blood Group" name="bglist" id="list">
<option value="Opos">O+</option>
<option value="Oneg">O-</option>
<option value="Apos">A+</option>
<option value="Aneg">A-</option>
<option value="Bpos">B+</option>
<option value="Bneg">B-</option>
<option value="ABpos">AB+</option>
<option value="neg">AB-</option>
</select>
<span id="sp3"></span>
</div>
<div class="form-group" >
<input type="text" class="form-control form-control-lg " placeholder="Date" id="datepicker" id="date" name="dates">
<span id="sp4"></span>
</div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="City" id="city" name="city">
<span id="sp5"></span>
</div>
<input type="submit" class="btn btn-dark btn-block" name="addDonor">
</form>
</div>
</div>
</div>

You can only perform one query in database at a time. You need to direct the servlet to this page again using response.sendRedirect("filename") and then try with other form. Hope it helps.If not lemme know.

ng-repeat not updated inside bootstrap modal

I just take a simple array and there is add more button in which i just push one more object to that array.
The array is ng-repeat which renders all the fields. My code are given below.
<div ng-init="core.iv=[{email:'',name:''}];">
<div ng-repeat="n in core.iv track by $index">
<div class="col-sm-6 pad0">
<div class="form-group">
<input type="email" class="form-control mIn" ng-model="n.email" placeholder="Email id" />
<span class="bar"></span>
</div>
</div>
<div class="col-sm-6 pad0">
<div class="form-group">
<input type="text" class="form-control mIn" ng-model="n.name" placeholder="Name" />
<span class="bar"></span>
</div>
</div>
</div>
<div class="col-xs-12 pad0 text-right">
<button class="btn btn-t-primary btn-sm" ng- click="core.iv.push({email:'',name:''});">add more</button>
</div>
</div>

Use a button instead a href to trigger div

I want to know if it's possible to use a button instead of href to trigger a div.
Here are examples below:
This is the current div:
<div id="ver" class="modal-block modal-block-primary mfp-hide">
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">Registration Form</h2>
</header>
<form class="form-horizontal mb-lg" method="POST" novalidate="novalidate">
<div class="panel-body">
<div class="form-group mt-lg">
<label class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" name="name" class="form-control" placeholder="Type your name..." required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" name="email" class="form-control" placeholder="Type your email..." required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">URL</label>
<div class="col-sm-9">
<input type="url" name="url" class="form-control" placeholder="Type an URL..." />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Comment</label>
<div class="col-sm-9">
<textarea rows="5" class="form-control" placeholder="Type your comment..." required></textarea>
</div>
</div>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="submit" name="ola" value="Submit">
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</form>
</section>
This is how I can trigger it using href:
<a class="modal-with-form btn btn-default" href="#ver">Open Form</a>
This is how I tried:
<a class="modal-with-form btn btn-default" href="#ver?id=$ausenciaid">Open Form</a>
But it didn't work , there is a way to use a button instead of href?

you can try this
<input type="button" onclick="location.href='Your location';" value="Open Form" />
This will give you a button and when you click on it you will transfer/open your href

Less recommended inline way:
<button onclick="location.href='Your location';"> Open Form" </button>
OR
Attach Event & trigger using javascript:
<button type="button" id="mybutton" >Open Form </button>
<script>
document.getElementById("mybutton").addEventListener("click", function(){
window.location.href = <input type="button" onclick="location.href='Your location';
});
</script>

Bootstrap validation states with file upload

I used bootstrap to return feedback to user about upload result.
So when the upload go well I use green success feedback, otherwise I return red error feedback.
But if he push browse button I would like to return to no feedback input tag, how can i do it?
This is part of my code:
<form class="input-group col-xs-12" method="post"
enctype="multipart/form-data" th:action="#{/file/excelFileRead}">
<div class="btn btn-primary btn-file col-xs-2">
<!-- Using accept the browse window allows only excel files -->
Browse… <input type="file" name="file"
accept=".xls, .xlsx, .xlsm" />
</div>
<!-- Manage success message -->
<div th:if="${opened == 'true'}">
<div class="form-group has-success has-feedback col-xs-8">
<input type="text" class="form-control" readonly="readonly"
id="inputSuccess2" aria-describedby="inputSuccess2Status"
th:value="${fileName}"> <span
class="glyphicon glyphicon-ok form-control-feedback"
aria-hidden="true"></span> <span id="inputSuccess2Status"
class="sr-only">(success)</span>
<label class="control-label"
for="inputSuccess2" th:text="${successMessage}"></label>
</div>
</div>
<div th:if="${opened == 'false'}">
<div class="form-group has-error has-feedback">
<input type="text" class="form-control" readonly="readonly"
id="inputError2" th:value="${fileName}"
aria-describedby="inputError2Status"> <label
class="control-label" for="inputError2"
th:text="${errorMessage}"></label> <span
class="glyphicon glyphicon-remove form-control-feedback"
aria-hidden="true"></span> <span id="inputError2Status"
class="sr-only">(error)</span>
</div>
</div>
<!-- <div th:if="${opened == null}">
<div class="col-xs-8">
<input type="text" class="form-control" readonly="readonly"
th:value="${fileName}" />
</div>
</div>-->
<div class="col-xs-2">
<input type="submit" class="btn btn-info" value="Open" />
</div>
</form>

Categories

Resources