I want to create a Navbar button that calls a bootstrap modal which contains a form. I found a gist at https://gist.github.com/havvg/3226804, and I'm trying to adapt it to my needs. I haven'y completed filling out the ajax portion of the script, but I notice that the modal does not activate. i want to press the button on the navbar and have the modal form pop up. What am I doing wrong?
<div class="hide fade modal" id="rating-modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">button</button>
<h2>Your Review</h2>
</div>
<div class="modal-body">
<!-- The async form to send and replace the modals content with its response -->
<form class="form-horizontal well" id="modalForm" data-async data-target="#rating-modal" action="AjaxUpdate/modal" method="POST">
<fieldset>
<!-- Form Name -->
<legend>modalForm</legend <!-- Text input-->
<div class="control-group">
<label class="control-label" for="old">Old password</label>
<div class="controls">
<input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="new">New password</label>
<div class="controls">
<input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer"> Cancel
</div>
</div>
<script src='js/jquery.js'></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
// $('form[data-async]').live('submit', function(event) {
$('#modalForm').on('submit', function (event) {
var $form = $(this);
var $target = $($form.attr('data-target'));
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
success: function (data, status) {
$target.html(data);
}
});
event.preventDefault();
});
});
</script>
Try removing the class hide from your div:
<div class="fade modal" id="rating-modal">
Related
Simple bootstrap 5 (with validation) contact form with Ajax call gets executed only when i hit submit button second time and it also save data twice. this form is inside modal form and this behavior happened when i added Ajax function to code..
I am not sure what is stopping form submission successfully after validation, form gets submitted only when i hit submit button second time and it save same data twice.
based on references i used e.stopImmediatePropagation(); but there behavior didnt change
<!-- Modal -->
<div class="modal-form modal fade" id="modal-form" data-bs-backdrop="static" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Register you interest</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-body">
<div class="row">
<div class="form-holder">
<div class="form-content">
<div class="form-items">
<p>Fill in the details below, we will get back to you!</p>
<form id="contactForm" class="requires-validation" action="sendemail.php" method="POST" novalidate >
<div class="col-md-12 mb-3">
<input class="form-control" type="text" name="name" placeholder="Full Name" required>
<div class="valid-feedback">Full Name field is valid!</div>
<div class="invalid-feedback">Full Name field cannot be blank!</div>
</div>
<div class="col-md-12 mb-3">
<input id="phone" type="tel" name="phone" class="form-control"
onkeypress="return isNumber(event)" required>
<div class="valid-feedback phoneinvalid" id="phoneinvalid"></div>
<div class="invalid-feedback">Phone field cannot be blank!</div>
</div>
<div class="col-md-12 mb-3">
<textarea class="form-control" name="message" id="message" placeholder="Your Message"></textarea>
</div>
<div class="form-button mt-3">
<button id="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-success-msg"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
JS Part
(function () {
'use strict'
const forms = document.querySelectorAll('.requires-validation')
Array.from(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
event.preventDefault();
console.log("form.checkValidity() "+form.checkValidity());
if (!form.checkValidity()) {
// form.classList.remove('was-validated')
//event.preventDefault();
//event.stopPropagation();
e.stopImmediatePropagation();
form.classList.add('was-validated')
return;
}
else
{
console.log("This line should execute only if Form is validated");
AjaxCallSaveData();
form.classList.add('was-validated')
}
}, false)
})
})();
function AjaxCallSaveData()
{
console.log(" I am AjaxCall Function");
$("form").submit(function (event) {
var formData = {
name: $("#name").val(),
phone: $("#phone").val(),
message: $("#message").val(),
};
$.ajax({
type: "POST",
url: "SaveData.php",
data: formData,
dataType: "json",
encode: true
}).done(function (data) {
console.log(data);
if (!data.success) {
console.log("alert alert-warning");
} else {
console.log("alert alert-success");
$(".form-success-msg").add("display","block");
$("form").html(
'<div class="alert alert-success">' + data.message + "</div>"
);
}
});
event.preventDefault();
});
}
After lot of research, I still can't clear my form and show a "Message submitted" message, after submit my form.
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<!--some code -->
</head>
<body id="page-top">
<!-- Navigation -->
</nav>
<header class="masthead text-center text-white d-flex">
<!-- SOME CODE -->
</header>
<!-- Formulario de Contacto -->
<section id="contact" data-delimiter="1">
<div class="row">
<div class="col-lg-6">
<h3 class="heading h3 mb-4">Escríbanos</h3>
<form class="needs-validation" id="contact-form" method="POST" action="contact.php" role="form" novalidate>
<div class="messages"></div>
<div class="row">
<div class="col-12">
<div class="form-group">
<input name="name" class="form-control formu" type="text" id="name" placeholder="Nombre" maxlength="50" required data-error="Es necesario un nombre">
<div class="invalid-feedback">Es necesario un nombre.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<input name="email" class="form-control formu" type="email" id="email" placeholder="Correo electrónico" required data-error="Es necesario un correo electrónico">
<div class="invalid-feedback">Es necesario un correo electrónico.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<textarea name="message" class="form-control formu" rows="5" id="message" placeholder="Su mensaje" required></textarea>
<div class="invalid-feedback">Es necesario su mensaje.
</div>
</div>
</div>
</div>
<div class="mt-4">
<button type="submit" value="Enviar" class="btn btn-primary px-4" id="btn_enviar">Enviar</button>
</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
And this is my contact.js
$(function () {
$('#contact-form').validator();
$('#contact-form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "contact.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
$('#contact-form')[0].reset();
//$("#contact-form").trigger("reset");
//$("#contact-form").get(0).reset();
}
});
return false;
}
})
});
I am really confused with this. It supposed to work with the success function in my .js file and I've tried different methods like trigger(), reset().
After hitting submit button, the information is sent but the success message is not displayed when the data is sent.
Is there a reason you're not just doing this?
$('#contact-form').on('submit', function (e) {
e.preventDefault();
You're specifically checking to make sure it hasn't been done and then doing your ajax call and that doesn't really make sense. Your page is refreshing when the form is submitted so your message doesn't ever show up.
Once you add e.preventDefault()
Then change this:
if (!e.isDefaultPrevented()) {
to this:
if (e.isDefaultPrevented()) {
I have created an application in the php, I am using the bootstrap model to update user details using AJAX. Now there are two forms: first updates the user's details and adds comments to another user. When I try to submit a form to AJAX and I try to submit a form, it does not work, when i use ajaxComplete function then my form data has been submitted successfully, but at the time it submits the form multiple times at the same time.
$(document).ajaxComplete(function() {
$("#add-remarks").on('submit', (function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: $("#add-remarks").attr("action"),
cache: false,
context: this,
data: $("#add-remarks").serialize(), //only input
success: function(data) {
var obj = JSON.parse(data);
$("#add-remarks")[0].reset();
if (obj['msg'] == 'isuccess') {
notification('insert');
} else {
notification('error');
}
}
});
}));
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="card-group-control card-group-control-right" id="accordion-model">
<div class="card">
<form method="post" name="update-user-details" id="update-user-details" action="">
<div class="row">
<div class="col-md-4">
<div class="form-group form-group-float">
<label class="d-block font-weight-semibold">First Name</label>
<input type="text" class="form-control" placeholder="First Name" name="customer_name" id="customer_name">
</div>
</div>
<div class="col-md-4">
<div class="form-group form-group-float">
<label class="d-block font-weight-semibold">Mobile</label>
<input type="text" class="form-control" placeholder="Mobile" name="mobile_number" id="mobile_number">
</div>
</div>
<button type="submit" class="btn bg-blue">Save Changes</button>
</div>
</form>
<form method="post" name="remarks" id="remarks" action="">
<div class="row">
<div class="col-md-4">
<div class="form-group form-group-float">
<label class="d-block font-weight-semibold">Remarks</label>
<input type="text" class="form-control" placeholder="Remarks" name="remarks" id="remarks">
</div>
</div>
<button type="submit" class="btn bg-blue">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Move this piece of code outside of your ajaxComplete() function. You are probably somehow triggering the ajaxComplete function multiple times, causing multiple event listeners for the form submit.
$("#add-remarks").on('submit', (function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: $("#add-remarks").attr("action"),
cache: false,
context: this,
data: $("#add-remarks").serialize(), //only input
success: function(data) {
var obj = JSON.parse(data);
$("#add-remarks")[0].reset();
if (obj['msg'] == 'isuccess') {
notification('insert');
} else {
notification('error');
}
}
});
}));
I hava a bootstrap modal form that i use to send a 4 field message. After the submit button is press i want to show the user a "thank you" message. But instead of that my form is closing and the page is refreshing.
How can i do for the modal form to stay open in order to display below the submit button the message.
Thank you!
<section class="modal-form">
<!-- Modal Video first page -->
<div class="modal fade" id="participa-modal" tabindex="-1" role="dialog" aria-labelledby="participa-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Participă la un demo!</h4>
</div>
<div class="modal-body">
<div class="form-group">
<form id="form" method="post" class="contact" action="" enctype="multipart/form-data" data-parsley-validate>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="homepage_firstname" id="homepage_firstname" class="form-control-contact" placeholder="Nume" required>
</div>
<div class="form-group">
<input type="email" name="homepage_email" id="homepage_email" class="form-control-contact" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" name="homepage_phone" id="homepage_phone" class="form-control-contact" placeholder="Telefon" data-parsley-type="number" minlength="10" maxlength="10" required>
<input type="hidden" name="inner_message" id="inner_message" value="Participare demo curs!">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<textarea class="form-control-contact" name="homepage_message" id="homepage_message" placeholder="Scrisoare de intentie"></textarea>
</div>
</div>
</div>
<div class="form-actions">
<input type="hidden" name="homepagesubmitted" value="TRUE" />
<button type="submit" class="btn orange sign-in-btn">Înscrie-te</button>
</div>
<?php echo $homepage_send ?>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- End Modal Video first page -->
</section>
UPDATE:
Ok. So i've manage to make it work the following code $(function () {
var frm = $('#participa-modal');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
location.reload();
}
});
ev.preventDefault();
});
});
The quetion is how can i replace alert('ok') to point for a thank you in the same pop-up under the SEND button.
$(".modal-body form").submit(function(e) {
var url = "ActionScript.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(), // serializes the form's elements.
success: function(data) {
$(this).html("Thank you!!!");
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
check the above code for your requirement
Terms Used
$(".modal-body form") class and child form selector in order to target your submitting form
.submit( to trigger event on submit of your form
type: "POST" is for secure traversing of data, by method post
.serialize() is to gather (assemble) and send the posting data
success: is a callback in order to proceed while the submission is successful.
I'm trying to use Bootstrap Modal as my confirm dialog before form submit. However I want to validate first my form before showing the Modal. How can I do that?
This is what I've tried so far:
<script type="text/javascript">
$(function(){
$(".btn-show-modal").click(function(e){
e.preventDefault();
var id = $(this).attr('id');
var modal_id = "dialog-example_"+id;
$("#"+modal_id).modal('show');
});
$(".btn btn-custom").click(function(e) {
var id = $(this).attr('id');
var modal_id = "dialog-example_"+id;
$("#reservationForm").submit();
$("#"+modal_id).modal('hide');
});
});
</script>
<form class="form" method="POST" action="unit-reservation.php" id="reservationForm">
<div class="form-horizontal">
<div class="control-group">
<label class="control-label"><b>Firstname (*):</b></label>
<div class="controls">
<input type="text" name="customerfname" required />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Middlename (*):</b></label>
<div class="controls">
<input type="text" name="customermname" required />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Lastname (*):</b></label>
<div class="controls">
<input type="text" name="customerlname" required />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Email Address (*):</b></label>
<div class="controls">
<input type="email" name="customeremailaddress" required />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Address:</b></label>
<div class="controls">
<input type="text" name="customeraddress" required />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Telephone Number:</b></label>
<div class="controls">
<input type="tel" name="customertelnumber" />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Mobile Number:</b></label>
<div class="controls">
<input type="number" step="any" min="0" name="customermobilenumber" required /
</div>
</div>
</div>
<input type="hidden" value="<?php echo $user; ?>" name="user_id">
<button id="<?php echo $code; ?>" class="btn btn-custom btn-show-modal" data-toggle="modal">Reserve Now</button>
</form>
<div class="modal hide fade" id="dialog-example_<?php echo $code; ?>">
<div class="modal-header">
<h5>Confirm Reservation</h5>
</div>
<div class="modal-body">
<p class="modaltext">Are you sure you want to reserve unit: <?php echo $code; ?>?</p>
</div>
<div class="modal-footer">
No
Yes
</div>
</div>
The problem is that you submit your form when you click on your modal-button because it has the same class as the modal anchor.
$(".btn-show-modal").click(function(e){ ...
$(".btn btn-custom").click(function(e) {...
You have to add another class to your modal anchor for the submit.
Yes
and call this for your submit click handler:
$(".btn-show-modal").click(function(e){ ...
$(".btn-submit").click(function(e){}
Like this the submit action is only triggered by your modal anchor. You have to be careful if you use classes for css-styling and the same classes for javascript selectors. A better approach is to give those buttons (if only used once) an id so the javascript can access it more quickly. And keep the .btn, .btn-custom for the css only.