I am dynamically generating modals with form that look like described at the bottom. I searched and found How to handle multiple forms in one page but I unfortunately can't find out how I can handle posting one of the form if exactly that one has been clicked/submitted. Any help will be greatly appreciated.
<td class="actions">
<a href="#modalForm-1" class="modal-with-form on-default cancel-row">
<i class="fas fa-edit"></i>
</a>
<div id="modalForm-1" class="modal-block modal-block-primary mfp-hide">
<form method="post" action="/insurances/update">
<section class="card">
<header class="card-header">
<h2 class="card-title">Modification - Interhyp</h2>
</header>
<div class="card-body">
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" value="Interhyp" name="name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="msisdn">MSISDN</label>
<input type="text" class="form-control" id="msisdn" value="1234567" name="msisdn">
</div>
<div class="form-group col-md-6">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" value="inter-daolwin#gmail.com"
name="email_address">
</div>
</div>
</div>
<footer class="card-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="hidden" name="search_uuid" value="287b5e62-a434-4e67-9ce0-f24466876114">
<button type="submit" class="btn btn-primary modal-confirm">Submit</button>
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</section>
</form>
</div>
</td>
<td class="actions">
<a href="#modalForm-2" class="modal-with-form on-default cancel-row">
<i class="fas fa-edit"></i>
</a>
<div id="modalForm-1" class="modal-block modal-block-primary mfp-hide">
<form method="post" action="/insurances/update">
<section class="card">
<header class="card-header">
<h2 class="card-title">Modification - Interhyp</h2>
</header>
<div class="card-body">
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" value="Interhyp" name="name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="msisdn">MSISDN</label>
<input type="text" class="form-control" id="msisdn" value="1234567" name="msisdn">
</div>
<div class="form-group col-md-6">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" value="inter-daolwin#gmail.com"
name="email_address">
</div>
</div>
</div>
<footer class="card-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="hidden" name="search_uuid" value="287b5e62-a434-4e67-9ce0-f24466876114">
<button type="submit" class="btn btn-primary modal-confirm">Submit</button>
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</section>
</form>
</div>
</td>
The other modals bear the ids "modalForm-3", "modalForm-4" and so on and can randomly be clicked/submitted.
D.
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>
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>
below is my modal i want this to open automatically once the song gets over in default audio player
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h4 class="modal-title" id="myModalLabel">
Don't Wait, Login now!</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8" style="border-right: 1px dotted #C2C2C2;padding-right: 30px;">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">Login</li>
<li>Registration</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="Login">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email1" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1" class="col-sm-2 control-label">
Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="password" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<button type="submit" class="btn btn-primary btn-sm">
Submit</button>
Forgot your password?
</div>
</div>
</form>
</div>
<div class="tab-pane" id="Registration">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="email" id="namea" class="col-sm-2 control-label">
Name</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-3">
<select class="form-control">
<option>Mr.</option>
<option>Ms.</option>
<option>Mrs.</option>
</select>
</div>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Name" />
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="email" id="emailField" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="txtEmail" placeholder="Email" <input type="text" />
</div>
</div>
<div class="form-group">
<label for="mobile" class="col-sm-2 control-label">
Mobile</label>
<div class="col-sm-10">
<input type="text" id="txtPhoneNo" class="form-control" id="mobile" placeholder="Mobile" onkeypress="return isNumber(event)" />
</div>
</div>
<div class="form-group">
<label for="password" id="p1" class="col-sm-2 control-label">
Password</label>
<div class="col-sm-10">
<input type="password" id="pass1" class="form-control" id="password" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">
Re-Enter Password</label>
<div class="col-sm-10">
<input type="password" id="pass2" class="form-control" id="password1" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<button type="button" onclick="ValidateName();myFunction();ValidateNo();checkEmail();" class="btn btn-primary btn-sm" >
Save & Continue</button>
<button type="button" class="btn btn-default btn-sm">
Cancel</button>
</div>
</div>
</form>
</div>
</div>
<div id="OR" class="hidden-xs">
OR</div>
</div>
<div class="col-md-4">
<div class="row text-center sign-with">
<div class="col-md-12">
<h3 class="other-nw">
Sign in with</h3>
</div>
<div class="col-md-12">
<div class="btn-group btn-group-justified">
Facebook <a href="#" class="btn btn-danger">
Google +</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Login And Register -->
<!-- Java scripts -->
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(".pop").click(function () {
$("#myModal").modal();
});
});
</script>
Html5 audio player has events which will get triggered when the audio stops playing
var aud = document.getElementById("myAudio");
aud.onended = function() {
alert("The audio has ended");
};
Refer this page
I have a issue with sending back on my login forgot password section at http://www.webstitcher.com/bootstrap_barelogin
For whatever reason it says document no longer available, although it works for the register section fine every time.
See anything wrong?
if (isset($_POST['forgot'])){ ?>
<form name="stoop" method="POST">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"> Forgot Password/User?</h3>
</div>
<div class="panel-body">
<label class="sr-only" for="E-mail">E-mail</label>
<input type="text" name="forgot" id="forgot" class="field" value="" size="23" placeholder="Account Email Address" />
<div class="row"> <div class="col-md-8 col-sm-8 col-xs-8"> <input type="submit" name="stoop" value="Send E-mail" class=" btn btn-info" /></div>
<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" onclick="history.back();" class="btn btn-success">Back</button>
</div></div>
</div>
</div>