I am trying to redirect to a contact form on submit to a HTML file which I have made using.
header('Location: /dev/thanks.html');
However, this loads it to a different page and not to the page that I'm already on.
I already have the jQuery to make a popup for the contact form and information page, which is:
$('a.contact , a.contact_footer, a.contact_text').click(function() {
$("html, body").animate({ scrollTop: 0 }, 600);
$("#popup").load("/dev/contact.php");
// Getting the variable's value from a link
var show = $('#popup').css('display', 'block'),
popup = $(this).attr('href');
//Fade in the Popup and add close button
$(popup).fadeIn(300);
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
On submitting the contact form, I want to load a new file (thanks.html) to replace the popup (contact form) with a thank-you message. Similar to what I'm doing with the jQuery already, but I want it to only implement on submit:
<div class="submit">
<input type="submit" value="Submit"/>
</div>
What do I need to do to modify my jQuery so it implements on submit instead of on click?
Add the submit event to the contact form:
If you use jQuery 1.7+, use on:
$(document).on("submit", "form#submit_message", function() {
$('#popup').load('/dev/thanks.html');
return false;
});
If not, use live (or upgrade your jQuery version):
//live is old deprecated
$('form#submit_message').live('submit', function() {
$('#popup').load('/dev/thanks.html');
return false;
});
I'm assuming that the form will append directly in the "#popup", without that you will have to change the "var popup..." line.
$("#popup").on("submit", "form", function(event){
var popup = $(this).parent();
var data = $(this).serialize();
$.ajax({
type: "POST",
url: "my_url.php",
data: data
}).done(function(html){
popup.html(html);
});
return false;
});
Related
I have a page where I enter a text in an input, it is a simple form. I have a button and when I hit the button, is it possible to open another page and post the data to this new window via jquery. I am not talking about ajax here because I want to open a new window and go to that new page holding the post form.
So I have page 1 with form and input 1. I enter test in input 1 and then if I hit submit, it will open a new php page where there is a
$_POST['temp']
And it will be filled in so that the code executes automatically. In fact, this is to avoid entering everything in the url and going to that url.
It seems I was not clear enough. I know how to do it with a form and a submit button. But I would like to submit the form via jquery so when I hit a button or something else that will be intercepted by my javascript, it will look up the input and then redirect to the other page and post with data I want.
If I understood correctly you want to access parent window form input value from a child window (popup) opened by the parent.
If that is the case I suggest you look at window.opener property
http://www.w3schools.com/jsref/prop_win_opener.asp
If you have a parent window like this:
HTML:
<form id="testForm">
<input type="text" id="testVariable" value="" />
<input type="submit" />
</form>
JS:
$(document).ready(function () {
$('#testForm').on('submit', function(e){
e.preventDefault();
window.open('http://www.yourdomain.com/chilwindow.php', 'ChildWindow', 'menubar=0,resizable=1,location=0,scrollbars=0,status=0,toolbar=0,width=580,height=520');
});
});
Then in your child window/popup (http://www.yourdomain.com/chilwindow.php) you should be able to access you parent window like this:
$(document).ready(function () {
var testVariableNew = window.opener.$("#testVariable").val();
console.log('Got value from parent window: ' + testVariableNew);
});
Or:
$(document).ready(function () {
var testVariableNew = $('#testVariable', window.opener.document).val();
console.log('Got value from parent window: ' + testVariableNew);
});
If you want to do a POST request do the following:
$( "#testForm" ).submit(function(e) {
e.preventDefault();
var myVariable = $(this).find("#testVariable").val();
var myUrl = $(this).attr("action");
var posting = $.post( myUrl , { temp: myVariable } );
posting.done(function(result) {
console.log(result);
});
});
The jquery.form.js plugin does exactly what you want.
http://malsup.com/jquery/form/
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function(response) {
alert("The script said: "+response);
});
});
</script>
</head>
I have a simple form which is opened within a modal when an anchor is clicked.
<a id="callbackLink" class="various" href="#inline">Request</a>
<div id="inline" style="display:none">
<form id="callForm" onsubmit="callEvent(event);">
<h3>Call Back</h3>
<label for="Number">What number shall we call you on?</label>
<input type="tel" id="callback-tel" placeholder=""><br>
<input type="submit" value="Submit" />
</form>
</div>
When the form is submitted, a third party library processes the form. If the form is successful, the form is removed and a success message is displayed in the modal.
Now if you close the modal and then click the button to display the form again, it will still show the success message. So I need a way of displaying a clean form every time the button is pressed.
What would be the best way to achieve this?
UPDATE
The event listener is
function StartClickToCall(event) {
(event.preventDefault) ? event.preventDefault() : event.returnValue = false;
var SuccessfulRequest = function() {
document.getElementById('ClickToCallForm').style.display = 'none';
document.getElementById('ClickToCallErrorMessage').style.display = 'none';
document.getElementById('ClickToCallSuccessMessage').style.display = 'block';
};
var FailedRequest = function(Request, Response) {
document.getElementById('ClickToCallSuccessMessage').style.display = 'none';
document.getElementById('ClickToCallErrorMessage').style.display = 'block';
document.getElementById('ClickToCallErrorMessage').innerHTML = Response.ResponseMessage;
};
_novero.push(['NoveroCallback', 'NewCallback', {
Destination : jQuery("#callback-tel").intlTelInput("getNumber"),
CallbackDate : document.getElementById('CallbackDate').value
}, SuccessfulRequest, FailedRequest]);
}
$('#myModal').modal('toggle');
$('#myModal').modal('view');U can try with modal window cleaning.I think modal window seems to be problem
you didnt post the correct part of the code
if the form is replaced by a success message, then you probably have a function that is making an ajax call and in the success callback you are removing the from HTML and put in the success message HTML
if so .. if you wan to restore the form on modal close . then you need to attach a function to close click that will remove the success message HTML and re-insert the Form HTML
EDIT:
$(".selector").fancybox({
onClosed: function() {
document.getElementById('ClickToCallForm').style.display = ‘block’;
document.getElementById('ClickToCallErrorMessage').style.display = ‘block’;
document.getElementById('ClickToCallSuccessMessage').style.display = ‘none’;
};
});
something like this . (you deleted the fancy declaration) . the close method might have a different name
but what is happening:
on fancy modal close . switch back the styles of the form . that are overwritten in the success function
When I use this script
<form id="mktoForm_1740"></form>
<script>MktoForms2.loadForm("//app-e.example.com", "517-ITT-285", 1740);</script>
the form will load normally. But the below script didn't load form. I think problem related to javascript.
<script>MktoForms2.loadForm("//app-example.com", "517-ITT-285", 1740, function(form){
//Add an onSuccess handler
form.onSuccess(function(values, followUpUrl){
//get the form's jQuery element and hide it
form.getFormElem().hide();
document.getElementById('confirmform').style.visibility = 'visible';
//return false to prevent the submission handler from taking the lead to the follow up url.
return false;
});
});
</script>
<div id="confirmform" style="visibility:hidden;margin-top: 35px;"><p><strong>Thank you for registering. You will receive a confirmation by email in a minute.</strong></p></div>
How to fix this problem........
use $(document).ready(function(){});
try this
<script>
$(document).ready(function() {
MktoForms2.loadForm("//app-example.com", "517-ITT-285", 1740, function(form) {
//Add an onSuccess handler
form.onSuccess(function(values, followUpUrl) {
//get the form's jQuery element and hide it
form.getFormElem().hide();
document.getElementById('confirmform').style.visibility = 'visible';
//return false to prevent the submission handler from taking the lead to the follow up url.
return false;
});
});
});
</script>
<div id="confirmform" style="visibility:hidden;margin-top: 35px;">
<p><strong>Thank you for registering. You will receive a confirmation by email in a minute.</strong></p>
</div>
<form id="mktoForm_1740"></form>
<script>MktoForms2.loadForm("//app-example.com", "517-ITT-285", 1740, function(form){
form.onSuccess(function(values, followUpUrl){
form.getFormElem().hide();
document.getElementById('confirmform').style.visibility = 'visible';
return false;
});
});</script>
Use above code. this will work.
i disable button on a webpage using ajax when clicked and also change the button name. I'm now converting my website to an app but it seems that same code doesn't work in jquery mobile.
$(document).ready(function(){
$("form").on('submit',function(event){
event.preventDefault();
// Disable submit button on this specific form
$('.btn-style1', this).val('Inserted').prop('disabled', true);
data = $(this).serialize();
$.ajax({
type: "POST",
url: "new_user.asp",
data: data
}).success(function() {
$("input[type=text]").val("");
});
});
});
any help?
Try this :
$(this).find('.btn-style1').val('Inserted').prop('disabled', true);
try text instead of val if the text don't change
UPDATE
http://jsfiddle.net/ua0dqo7k/1/
$("#change").click(function(){
$("#test1").text("asdads");
$("#test2").val("asdads");
$("#test3").val("asdads");
});
I have a Jquery form with a validation script on the URL, it correctly validates and invalidates the URL. However, when it invalidates the URL, it still allows the form button to be clicked, but not submitted.
This causes the hidden loading image to show even though the form is no being submitted.
Here is a fiddle with the loader and script
http://jsfiddle.net/mikeef74/gzSDH/16/
var submit_hit = false;
$(document).ready(function () {
$('#iframe1').on('load', function () {
$('#loader1').hide();
if (submit_hit) {
$('#form_container').hide();
$('#mydivhide1, #mydivhide2').show();
$('body').css("background-image", "url(images/previewbg7.jpg)");
$('body').css("overflow-y", "auto");
}
}
});
$("#form_710370").validate();
$('#form_710370').submit(function (e) {
$('#loader1').show();
submit_hit = true;
return true;
});
});
The submit event will trigger whenever you attempt to submit. You've defined a submit event handler tied to the form which is why the image is showing.
Seems you want to trigger the loader image on a conditional submit so you'll need to use the validation's submitHandler. Now the inner function will only trigger when the form is valid -- the loader image will display and the form will be explicitly submitted.
$("#form_710370").validate({
submitHandler: function(form) {
$("#loader1").show();
submit_hit = true;
form.submit();
}
});
// remove this
//$('#form_710370').submit(function (e) { ... }
http://jqueryvalidation.org/documentation/
This is way validate a form in jquery:
$(function() {
$("#form_710370").validate({
rules: {
//
},
messages: {
//
},
submitHandler: function(form) {
form.submit();
}
});
});