I have made a simple home-made lightbox. The lightbox contains forms which allows the user to submit data. I placed a SIMPLE form on my SIMPLE lightbox, and I noticed that when I submit the form the lightbox closes automatically. Why is it doing this, and how can I keep this from happening? I'd like to submit a form on the lightbox and keep the lightbox unaffected.
this is not possible if you submit the form using php it will submit to another page so it will refresh if you want to stay on the page you will have to look into using AJAX to submit the form and get the server response
There are some good technology's out there to do this like jquery AJAX
http://api.jquery.com/jQuery.ajax/
Related
i am using laravel and jquery to make my website, i'm using the jquery .load method to fill a div in a page:
$('#button').on('click',function(){
$('#container').load('url');
});
it's working fine but it's filling the container with a form, and when i submit the form if the validation passes everything it's ok because i don't need to show the form again, but if i want to return some errors i have to click the button again to show the form again.
Is there a way to just load the page with the .load() i allready had?
I have an index page, i am loading several pages in a div in that page by clicking links , some of them are forms(pages). When i click submit, the information is processed correctly and it is stored in the database but the page disappears because of which i am unable to see some useful information like errors generated after form validation. I want that the page should not disappear after loading. A page can be shown in the same div only when i click on the link for that page.
I am using php, javascript, jquery, MySqL.
Any help ??
That is the default behavior of forms submit. If I am not mistaken you need to prevent the default behavior on that form submit callback. If the considering form have an id of formID then You can do this
$('#formID').submit(function(e){
//prevent default Behaviour
e.preventDefault();
});
And in that case you have to use $.ajax to submit form data into server without reloading the page.
I have seen a few of these floating about however I want to use it different to the way they posted on here.
I have all my server validation (for register page) at the top of the page so the form submit looks like (im on index.php so it just does it's self):
However, the index.php page has a login button and a register button and the form pops up depending which you click.
However i need that div to act like a page, so you submit and it reloads the div as if it were a web page if that makes sense?
Thanks for reading :-)
I'm making this contact form. The site itself uses AJAX to load the content in the main window. The problem with my form is that when the user clicks on submit and the data passes validation, it loads the page to main instead to itself to reach the actual mailing script.
Is there any way to pass this??
take the action our of the form opening tag
If you're using the Prototype.js library, you could just call event.stop() on a passed event object, on form submit.
After someone completes a form on our website and clicks on submit s/he is directed to a landing page. I would like to change that flow so that upon submitting (1) URL1 opens as new window; and (2) user is redirected from current form page to URL2.
Can you help?
current code snippet -
if(! isset($RedirectOnSuccess))
$RedirectOnSuccess = 'oldURL';
I'm a tech newbie so need your help in piecing it together. I am using MODx and the web page itself calls the php script with the following -
[!FORM_SNIPPET?
&RedirectOnSuccess=oldURL
!]
do it with javascript. http://www.tizag.com/javascriptT/javascriptredirect.php & http://www.pageresource.com/jscript/jwinopen.htm
It likely depends on the context of your popup, but rather than using a traditional popup you might consider something less invasive and prone to ad-blocking such as a lightbox or other ajax-based display tools within the page. You can trigger the lightbox from a click event on the submit button, display your message with it, and then submit the form on close or confirm.
Avoid solutions where viewing the form result page is dependent on javascript as some (uncommon) users may have it disabled. If it is implemented as above, such users would miss your popup but the form would still go through.
You could use jQuery to implement this without modifying the php code that MODx uses to generate your form, and instead attach a click event to the form's submit button by putting javascript in the xhtml header. For example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="/colorbox/jquery.colorbox.js"></script>
<script type="javascript">
$("#FormID.input[type=submit]").click(function(e) {
/* prevent form from submitting */
e.preventDefault();
e.stopPropagation();
/* on colorbox close, submit form */
$(document).bind('cbox_close', function(){
e.submit(); // submit the form on close
});
/* open the colorbox */
.colorbox({href:"http://example.com/url1"});
});
</script>
I used ColorBox here, but the same idea should apply to other lightbox alternatives. I didn't browser test this, so be sure to test and adapt as necessary.
Given problems with popup blockers your best bet is to target a new window with HTML on the form upload.
<form target="_blank">
Then using JavaScript (perhaps via opener.location.href in the popup), you can redirect the main window to another URL.