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>
Related
I've been asked for a simple solution to add to links on a blog that would pop-up a warning before going to that link. Only if you agree do you go on to that link. The first solution works fine (and I got it here):
<script type="text/javascript">
function confirm_alert(node) {
return confirm("some message here");
}
</script>
Click Me
However, now I've been asked to have a checkbox in the pop-up that says something like "I understand" and then a button to continue. If it isn't checked or if they click outside the box (or the X close button if there is one), then it just goes back to the page they were on. If it IS checked and they click continue it goes to the URL on the link (as above).
Along with this, I need to set a browser cookie ONLY if the dialog is checked and continue hit. I've set cookie's in browser with JS before, but not attached to to an event like this, so I'm not sure how to do that either.
I've done many searches here and on the net in general and can't seem to find any examples that do this. I have found that there's no way to do this with a standard confirm dialog and would need to use jQuery and that's fine, but I still can't find an example.
Any help is much appreciated.
I haven't tested this code (I just free typed it here).
In the HTML:
<div id="agreeModal">
<input id="agree" type="checkbox" />
<button id="btnCancel">Cancel</button>
<button id="btnContinue">Continue</button>
</div>
JavaScript (in another file or in a <script> tag) :
document.addEventListener('DOMContentLoaded', function() {
var agreeUrl = '';
// Get the links on the page
var links = document.querySelectorAll('a');
links.addEventListener('click', function( event ){
event.preventDefault(); //stop it from following link
agreeUrl = this.getAttribute('href'); // get the url
document.getElementById('agreeModal').style.display='block'; //show Modal
});
var btnContinue = document.getElementById('btnContinue');
btnContinue.addEventListener('click', function( event ) {
event.preventDefault();
var cb = document.getElementById('agree');
if (cb.checked) { //if checkbox is checked goto url
location.href= agreeUrl;
}
});
var btnCancel = document.getElementById('btnCancel');
btnCancel.addEventListener('click', function( event ) {
event.preventDefault();
//hide Modal
document.getElementById('agreeModal').style.display='';
});
});
Same code in jQuery:
(function( $ ){
$(function(){
var agreeUrl='';
$('a').on('click', function( event ){
event.preventDefault(); //stop it from following link
agreeUrl = $(this).attr('href'); // get the url
$('#agreeModal').show(); //show Modal
});
$('#btnContinue').on('click', function( event ) {
event.preventDefault();
if ($('#agree').prop('checked')) { //if checkbox is checked goto url
location.href= agreeUrl;
}
});
$('#btnCancel').on('click', function( event ) {
event.preventDefault();
//hide Modal
$('#agreeModal').hide();
});
});
})( jQuery);
Hope that helps!
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
I've a sign up form which has submit button with value "GET INSTANT ACCESS!" :
<input type="submit" class="wf-button" name="submit" value="GET INSTANT ACCESS!">
After submit, the value gets change to 'Thank You!':
<input type="button" class="wf-button" value="Thank You!">
I need to detect the button value. If it becomes "Thanks You!" then I have to show a popup. And this value gets change by some Ajax (GetResponse form). There is no page refresh.
I've tried below code but it is only working in FireFox & not working in Chrome.
<script>
$(function() {
$(".modalbox").fancybox();
});
$(function() {
$('.wf-button').bind("DOMSubtreeModified",function(){
//if btn valu is 'Thank You! trigger popup'
$(".modalbox").trigger('click');
});
});
</script>
Live URL: http://www.idynbiz.com/web/html/gold_ira_vf/? (just to show how the button changes its value)
Can some one help how can I detect the button value and show my popup? The button change its value in real time (Ajax). There is not page refresh.
Is there any JQuery approach with bind() Or on() function to detect the value?
$(function() {
$('.btn1').on('change', function() {
alert('Do stuff...');
});
$('.lnk1').on('click', function() {
$('.btn1').val('Thank you!');
$('.btn1').trigger('change');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="submit" class="btn1" value="SUBSCRIBE" />
Change button value
OK ,
when button is clicked and form is submitted for saving. just write these code
$(document).ready(function ()
{
$('.wf-button').click(function ()
{
var valueofbutton = $(this).attr('value');
if(valueofbutton == 'Thank You!')
{
window.open(); //// whatever you want to open in popup
}
});
});
i m sure that this will work
You can use the following function in javascript which gets called after any > kind of postback, i.e. synchronous or asynchronous.
function pageLoad()
{
if($(".wf-button").val()=="Thank You!")
{
// show your popup
}
}
Hope it works....
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;
});
I'm playing around with the Jquery UI dialog. I have a page with a gridview, a button that refreshes the gridview and a link. When you click a link, a dialog window popup up with the details of the record.
When I press save on the child page, I have the child page calling a javascript function from the parent page. In this function, it tried to do the button click event but it doesn't seem to be working.
If you look at the showThanks function below,
The alert works, the button text changes but the button click doesn't work.
Could this be a security feature? Both pages are on the same page right now.
hmm any clue?
Thanks
Edit - if you click the button manually, it changes the grid (in the button event handler). Yet, the jquery doesn't seem to be going in the button's event handler and the grid doesn't change.
Parent page html
<asp:GridView ID="gv" runat="server" />
<asp:Button ID="btnRefresh" runat="server" />
<a id="popoutUsers" href="popup.aspx?page=Bob" class="OpenNewLink">CLICK ME</a>
<script type="text/javascript">
$(function () {
$('.OpenNewLink').click(function () {
var url = $(this).attr('href');
var dialog = $('<div id="modal"></div>').appendTo('body')
$('<iframe id="site" src="' + url + '" />').dialog({
modal: true
, close: function (event, ui) {
// remove div with all data and events
dialog.remove();
}
});
return false;
});
showThanks = function () {
alert("Thanks");
var button = $("#btnRefresh");
button.val("hello"); //This works
button.click(); //Nothing seems to happen
// button.trigger("click"); (Tried trigger as well but no luck)
};
});
</script>
Child page
<div>
Why hello there
<asp:Button ID="btnBob" runat="server" Text="click me" />
</div>
<script type="text/javascript">
$(function () {
$('#btnBob').click(function (e) {
e.preventDefault();
window.parent.showThanks();
window.parent.$('.ui-dialog-content').filter(function () { return $(this).dialog('isOpen'); }).dialog('close');
return false;
});
});
</script>
So decided to do a new round of google searching and found this link Html Button that calls JQuery and does not post back
I changed my button to the following (added the UseSubmitBehavior)
and now it works. Hopefully I didn't waste people's time...