show confirmation modal dialog after form submission - javascript

I have a form and I need it to do 2 things once the submit button is clicked:
I need the form data to be processed in the acknowledge.php that I have created.
I need the modal dialog to display confirmation.
My form:
<form class="quote-form" method="post" action="acknowledge.php">
<div class="form-row">
<label>
<span>Full Name</span>
<input type="text" name="name">
</label>
</div>
<div class="form-row">
<label>
<span>Email</span>
<input type="email" name="email">
</label>
</div>
<div class="form-row">
<label>
<span>Phone</span>
<input type="number" name="phone">
</label>
</div>
<div class="form-row">
<label>
<span>Nature of Enquiry</span>
<select name="enquiry">
<option selected>General Enquiry</option>
<option>Logo Design</option>
<option>Web Design</option>
<option>Branding</option>
<option>Social Media</option>
<option>Email/Web Hosting</option>
</select>
</label>
</div>
<div class="form-row">
<label>
<span>Message</span>
<textarea name="message"></textarea>
</label>
</div>
<div class="form-row">
<button type="button" name="send">Get A Quote</button>
</div>
</form>
I'm new to Javascript and AJAX but I have copied some code from some similar threads and tried to customize it to my site
<script type="text/javascript">
$(".quote-form").submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
data: $(".quote-form").serialize(),
url: 'url',
success: function(data) {
$("#myModal").modal("show");
}
});
return false;
});
});
</script>
<!--Modal container-->
<div id="myModal" class="modal">
<!-- Modal content-->
<div class="modal-content">
<span class="close">x</span>
<p>Some text in the Modal..</p>
</div>
</div>
When the submit button is clicked nothing happens. Even the acknowledge.php does not execute. What am I doing wrong?

you need to wrap your code in a document.ready() function:
<script type="text/javascript">
$(function(){
$(".quote-form").submit(function(e){
e.preventDefault();
$.ajax({
type : 'POST',
data: $(".quote-form").serialize(),
url : 'url',
success: function(data) {
$("#myModal").modal("show");
}
});
return false;
});
});
</script>
UPDATE
you need to change the type of your button to submit like this
<button type="submit" name="send">Get A Quote</button>

A number of things that have been holding you up:
In your javascript, you have a trailing }); right at the end.
Your button is doing nothing to trigger the submit event in the javascript. You should alter the button or use a proper submit input. Or use type="submit".
You're not doing anything with data in your success callback. So when the modal opens, nothing else happens.
Your URL in the AJAX request is not set. You could use this.action to use the form's action URL here.
I've made some changes that you can preview in my fiddle.
There are some parts of the fiddle that you should ignore, such as the ajax url and data options. Those should be something like:
$.ajax({
type: 'POST',
url: this.action,
data: $(this).serialize(),
//...
});
What we obviously do not know now is whether you have included your dependency scripts like jQuery and bootstrap into your page.
For example: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> is the bootstrap javascript.
Make sure that jQuery is above bootstrap, or bootstrap will fail to load as it depends on jQuery. You may need to use the bootstrap CSS as well.
Lastly, you need to check that your action in the form is the correct URL, and that the data in your form that is sent is processed and echoed back as HTML.
You will also want to go to the bootstrap documentation, get a better example of the modal, and check out the forms area to spruce up this form.
You could use developer tools in your browser and note any errors thrown by javascript in the console if you still have problems. (Ctrl+Shift+I).
You didn't need to wrap anything in a document ready.

You doing two things wrong
First you need to wrap your code with document.ready
$(function(){
});
Then you need to fix your url
var form = $(".quote-form");
$.ajax({
type : 'POST',
data: form .serialize(),
url : form.attr('action'),
success: function(data) {
$("#myModal").modal("show");
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});

Related

JQuery Serilize Data Input Is Empty

I have form containing a button, when clicked it displays a modal window with another form containing an input and a send / cancel button.
I want to serialize the data in this modal form and send it to a remote server via AJAX.
For some reason when I look the the console I can't see the serialized data, I can only see Email=
Can someone look at my code and tell me where I'm going wrong please? Should this work?
HTML
<form id="feedbackForm">
<input class="button" id="bad" src="bad.png" type="image">
</form>
<div aria-hidden="true" class="modal" id="modal" role="dialog" tabindex="-1">
<form id="emailForm">
<div class="form-group">
<input class="form-control" name="Email" type="text">
</div>
<div class="modal-footer">
<button class="btn" type="submit">Send</button>
<button class="btn" data-dismiss="modal" id="closeModal" type="button">Cancel</button>
</div>
</form>
</div>
AJAX
<script>
$(document).ready(function() {
var request;
$("#feedbackForm").on("touchstart, click", function(e) {
e.preventDefault();
var serializedData = $("#emailForm").serialize();
$('#modal').modal('toggle');
$("#emailForm").on("submit", function(e) {
e.preventDefault();
request = $.ajax({
url: "MyURL",
type: "post",
data: serializedData
});
request.done(function(response, textStatus, jqXHR) {
console.log(serializedData); // displays Email=
});
});
});
});
</script>
If I understand correctly when the user clicks the touchstart
You serialize the form
You open the modal containing the form
You overwrite the submit event to send your ajax
The thing is that your variable has already been given the values of the form before it is populated with the user data. (If he is opening the modal for the first time)
Just get your data from a function of ajax submit at the correct moment like this:
data: getSerializedData()
and the function
function getSerializedData(){
return $("#emailForm").serialize();
}

How do you execute a new AJAX everytime a submit button is clicked?

I have a form that is executed every time a submit button is clicked. When the submit button is clicked, a modal is shown and the modal is populated with JSON data. The application /addresschecker checks against the addresses posted and sends me an error message if I get a code return number of 2003. If not I select the return data via JSON using jQuery's $.each
The application works but when I close the modal, refill out the form and click submit, the form does not make a new call to /addresschecker I looked in my network tab of chrome and it seems to be using the old data. I am thinking that I need to force a new Ajax call everytime a user clicks on the submit button or clear the cache somehow. Not sure why I'm seeing old data
<form id="Validate">
<input class="form-control" id="adr1" name="address1" type="text" placeholder="Address 1" />
<input class="form-control" id="adr2" name="address1" type="text" placeholder="Address 1" />
<button type="submit" >Submit</button>
</form>
<div class="modal hide">
<!-- JSON Data returned -->
<div id="Message_1"></div>
<div id="Message_2"></div>
<div id="error_message"></div>
</div>
// My main form code
submitHandler: function(form) {
$.ajax({
url: '/addresschecker',
type: 'post',
cache: false,
dataType: 'json',
data: $('form#Validate').serialize(),
success: handleData
});
function handleData(data) {
var mesgcheck = data.message;
if (data.code == '2003') {
$("#error_messag").html(mesgcheck);
} else {
// Display Modal
$(".modal").removeClass("hide");
$.each(data, function(i, suggest) {
$(".adr1").val(suggest.address1);
$(".adr2").val(suggest.address2);
});
}
}
}
Let ajax handle your request.
Use this:
<input type="button" value="submit">
Instead of type submit.

How to submit forms input values using post to server side script

I have a lot of buttons, each opens its form . How do I get the input value of form opened at the moment, and post it on my server, like post("/addOrders", valueOfinputs)?
https://jsfiddle.net/ave6uvez/21/
<div class="rows">
<div class="row">
<button class="open">Buy</button>
<form id="myform" action="/index" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="namee" name ="name" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">Phone</label>
<input type="phone" name = "phone" >
</div>
<button class="ave" >Close</button>
<INPUT type="submit" id = "submit" class = "close" value="Submit">
<!---- <button id="submit" class="close"></button>-->
</form>
</div>
</div>
try this,
$("#submit").click(function(e){
$.post("/addOrders",$("#myForm").serialize());
return null;
})
.serialize() will put all form elements data into the request
Also you need to give different id for different Forms submit button and you have to do the above code for each submit button
Hope this works for you.
This is a simple reference:
// this is the id of the forms, set the form ids accordingly.
$("#idForm").submit(function(e) {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});

Redirecting to a div with post data

I am searching a table for specific values based on the user input which queries the database for the LIKE condition. This works perfectly but I have to manually scroll to the buttom of the page to see my filtered table. I really want to redirect the user to the div of the table underneath the page. This is the form with the search box:
<form method="post">
<div class="col-lg-6 pull-right" style="margin-right:130px; width:30%;">
<div class="input-group">
<input required type="text" class="form-control" name="search" placeholder="Search Alerts for Today...">
<span class="input-group-btn">
<button class="btn btn-default" name="searchnow" type="submit" value="Submit">Go!</button>
</span>
</div>
</div>
</form>
This code below then checks to see if the button is clicked and then sets the variable that populates the table to equals the current search result from the database.
var searchIP = "";
if (Request.Form["searchnow"] != null & IsPost)
{
searchIP = Request.Form["search"];
alertForTheDay = dbConnection.searchDashboardTable(searchIP);
// Response.Redirect("Dashboard.cshtml#search");
}
Using Response.Redirect refreshes the table back to its original state. Commenting out the Response redirect as shown above allows the filter to be possible but I have to manually scroll down the page. I want this to redirect to the id of the div in that redirect. Please what can I do?
I guess you are doing a complete server round trip. From my point of view this is unnecessary.
I would suggest to do this via AJAX.
Change the HTML like this to call an AJAX operation on your button click:
<form method="post">
<div class="col-lg-6 pull-right" style="margin-right:130px; width:30%;">
<div class="input-group">
<input required type="text" class="form-control" name="search" id="search" placeholder="Search Alerts for Today...">
<span class="input-group-btn">
<button class="btn btn-default" name="searchnow" id="theButton">Go!</button>
</span>
</div>
</div>
</form>
Handle the button click and link to your anchor on success. (Assuming that the anchor to your table is present. In your case something like Dashboard.cshtml#contact)
$.fn.gotoAnchor = function(anchor) {
location.href = this.selector;
}
$(document).ready(function() {
// Add the page method call as an onclick handler for the div.
$("#theButton").click(function() {
$.ajax({
type: "POST",
url: "<YOUR URL>",
data: { search: $('#search').val() },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
// If everything is successful link to your anchor tag
$('#search').gotoAnchor();
}
});
});
});

Ajax Form Submitting

I know this has been asked a million times here and I've looked at several examples, but I can't figure out why this form is submitting. The Ajax appears to not being called so I assume it's something simple like a div id issue. I've been frustrating over this 30 minutes now.
JS:
$('#genform').submit(function (e) {
alert('hi');
e.preventDefault();
$.ajax({
url: "month.php",
type: "post",
data: $('#form').serialize(),
success: function (msg) {
$("#info").html(msg);
}
});
});
HTML:
<!-- trigger button -->
<div class="col-md-4">
Bulk PDF Export <span class="caret"></span>
</div>
<!--- popup form div -->
<div id="gendiv" style="display:none;">
<form id="genform">
<div class="form-input">
<select name="month">
<option value="2013-09-01">September 2013</option>
<option value="2013-08-01">August 2013</option>
<option value="2013-07-01">July 2013</option>
</select>
</div>
<div class="form-input"><i class="icon-ellipsis-horizontal"></i> PGY-1 <span class="pull-right"><input type="checkbox" id="pgy1" checked name="pgy[1]"></span>
</div>
<div class="form-input"><i class="icon-ellipsis-horizontal"></i> PGY-2 <span class="pull-right"><input type="checkbox" id="pgy2" checked name="pgy[2]"></span>
</div>
<div class="form-input"><i class="icon-ellipsis-horizontal"></i> PGY-3 <span class="pull-right"><input type="checkbox" id="pgy3" checked name="pgy[3]"></span>
</div>
<div class="form-input" style="text-align:center">
<button type="submit" class="btn btn-primary btn-xs">Generate</button>
</div>
<div id="info"></div>
</form>
</div>
Fiddle: http://jsfiddle.net/KQ2nM/2/
The reason it's not working is because the popover clones the form and then places the html inside a div with the class .popover-content.
This means that the event you bound is only attached to the original #genform which is inside the hidden #gendiv.
Use this instead:
$(document).on('submit', '#genform', function(e) {
e.preventDefault();
$.ajax({
url: "month.php",
type: "post",
data: $(this).serialize(),
success: function (msg) {
$("#info").html(msg);
}
});
});
This uses jQuery's .on() function and attaches an event handler to the document which basically watches for a submit event triggered on a form with the id #genform. By attaching the event handler to the document instead of directly to the target element it gets triggered by a submit event regardless of whether a form with the id #genform exists when the event is bound.
Here it is working: http://jsfiddle.net/KQ2nM/4/
You are missing some closing tags:
<div class="form-input">
<i class="icon-ellipsis-horizontal"></i> PGY-1 <span class="pull-right">
<input type="checkbox" id="pgy1" checked name="pgy[1]"> </input> <--- here
</span>
</div>
And the form method (otherwise it spits up an error):
<form id="genform" method="POST">
Now django complains about the CSRF token, but that's your stuff ;)
Here's the new Fiddle.
EDIT: It seems like I got it wrong since now it submits without calling your custom handler and Joe fixed it. But you still need to close those inputs :)

Categories

Resources