I have a light box form (and have a page in the background). I want to close the light box and stay on that page after clicking on the submit button. But it's redirecting to another page (PHP database connection page) after clicking the submit button.
I want to know how to close light box and stay on that page.
Add an event listener to the form that handles the form request and then return false from that handler and the page won't refresh. Because we don't know which lightbox you are using we can't exactly tell you how to remove it... but if you're using jQuery you could use something like:
$("#lightbox-id").hide();
or
$("#lightbox-id").remove();
Use JavaScript to submit the form within the lightbox & close the lightbox.
function send_form ( )
{
ajax = new XMLHttpRequest;
if (!ajax) return false;
ajax.open('POST', '/index/send_form/'); //your post url should be here
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var field0= document.getElementById('submit').value;
var field1 = document.getElementById('message').value; //you should modify these fields according to your form
ajax.send('sub=' + submit + '&message=' + content);
//then post url becomes something like: www.example.com/index/send_form/?sub=submit&message=this
//then close the lightbox in here
}
and for the html part remove action attribute and call this function in onsubmit event.
Related
I have a link on my page that loads the div using a jquery function. On the page there is a form that submits to a database. The form works when when I type the page in directly but when the function loads the page, the form doesn't work.
$('.menu_top').click(function() {
var href = $(this).attr('href');
$('#load').hide().load(href).fadeIn('normal');
return false
});
This is what I am using to load the page into the div. I have added the class to the form and button. When I click submit the page flashes but the SQL doesnt update
When you load something into doom, you need to use the on command. Try this:
$('body').on('click','.menu_top',function() {
I have an iframe on my page, where on click (a menu) will update the iframe with a new URL depending on what menuitem they select.
I do that by calling javascript function on 'onclick' passing the URL from the menu :
function frameclick(pageurl)
{
$("#iFrame1").attr('src', pageurl);
}
What i would like to do whenever they press a menuitem is to store what iframe is loaded, because i have another button (select page language) and when they press that i want to reload the page but pass on the iframe-url that is currently displayed as a variable in the site url.
Since PHP is serverside and JS is clientside, i cannot do ex. "$current_iframe_url = pageurl" - which would have enabled me to pass it on as a variable on refresh.
You know how i could get around this ?
That works fine.
What i want to do now, is to whenever they click a menuitem i want to store that URL
on every click create a hidden field save the value of url in a hidden field then only change the url. then after that you can simple submit the form using ajax .
or when ever user clicks call an ajax function so that u can copy the url in database or session what ever you like.
sample
function frameclick(pageurl)
{
$.post("server.php", { url: pageurl } );
$("#iFrame1").attr('src', pageurl);
}
your php server.php should do something like this
if(isset($_POST['url']){
//INSERT IN TO DB
}
Following fiddle used to get its URL, http://jsfiddle.net/sameerast/FUUz9/1/
Hope this also helpful,
$('iframe').bind('mouseover', function(){
var iframeID = $(this).attr('src');
$(this).contents().find('html').unbind();
$(this).contents().find('html').bind('click', function(){
alert(iframeID);
});
})
;
I am currently working on a php e-mail system. I created a javascript pop-up page where I can add users (mail addresses). Now I want to post the selected user('s) from the javascript pop-up window to open the website of course I get the page where you want to post in the pop up to see.
Now I want to now, if there is click on the submit than close the popup and allows the data to the open web page whit post?
How can i do this??
you might want to look to the overlay plugin at jquery tools. Pop-ups are blocked by the browser most of the times. And imo an overlay is a more elegant solution. Furthermore, you can just post your form as you would normal do on a webpage, nu extra js needed there!
--- edit; when reading your question more closely; you don't even need to post the page! Just assign a click event to the submit button (which doesn't necessarily needs to be a submit button). In your event function you can read out the filled in addresses (or other information), paste it into the desired fields (whether it be a form field or just a regular div) and close the overlay again. Now you don't even need a page refresh!
You'll want to use AJAX to post the form asynchronously so the user doesn't have to wait for it to process or view the processing page. jQuery makes it very easy to use AJAX as shown here.
Also, after the work is done in the popup window you can access and refresh the parent window using the window.opener function:
<script language="JavaScript">
function refreshParent() {
window.opener.location.href = window.opener.location.href;
window.close();
}
</script>
<script>
$("a[href=#myModal]").click(function() {
var str = $(this).attr("data-phpvar");
var substr = str.split('||');
$("[name=textinput1]").val(substr[0]);
$("[name=textinput2]").val(substr[1]);
});
</script>
<form>
<table>
<tr>
<td>
</td>
</tr>
</table>
</form>
OnClick of the href link or button you will send the data-php-var to the jQuery function. This function will send the values into the popup. In the popup is a text-field with the same name the jQuery function will put your values into de field.
I've got a page that has a simple one checkbox form with a submit button for users to mark that item as "want to play."
Given the simplicity, I'd like to replace it with a single DIV and graphic of a toggle button or switch or something, so that users can click it to mark, but not have to bother with the silly single checkbox and submit button, which is rather ugly.
The short and quick solution I can think of is for the div to be a link like
markme.php?id=XYZ&user=123
that pops the flag into the database for that user and then redirects back to the page they were viewing.
Would that be reasonable? Is there a better way?
/me is an enthusiastic beginner
Make it a <button> which has an onclick event bound to it that performs an AJAX request to submit the request to some page handler that will update the database or similar, and on successful completion changes its CSS style to make it look pressed.
Use jQuery for the event binding, AJAX request, and CSS class changing, and this style should work to make the button look depressed.
<button type="button" id="btnPlay">Play</button>
Then:
$("#btnPlay").click(function(){
var button = $(this) ;
if (!button.hasClass('pressed')) {
//button is unpressed
$.post("ajax.php", { userId: "5512", action: "play" },
function(data){
button.addClass('pressed');
button.html("Playing!") ;
}
);
}
else {
//button is pressed, toggle it back
$.post("ajax.php", { userId: "5512", action: "stopPlaying" },
function(data){
button.removeClass('pressed');
button.html("Play") ;
}
);
}
});
i have a form that works perfectly fine with mozilla and IE but on google chrome there is a slight problem
i am using ajax to submit my form that is there is no submit button ,in IE and Mozilla its working fine but in google chrome when i press enter the form submits and the page redirects to the main page( this is another problem page refresh manipulation in ajax)
how can i stop the page from submission while pressing enter button ?
Each event has its default action (a button will click, a hyperlink will take you somewhere) and in your case an ENTER on a form element will submit the form. Such actions can be prevented. Browsers differ from their implementation to prevent this default action, but tools like jQuery or MooTools help you with this.
Clear details on how to go about can be found here:
http://www.quirksmode.org/js/events_early.html#link4
The idea is either to write an onsubmit handler on the form element as such:
<form id="foo" onsubmit="doYourAjaxThing(); return false">
Or to have an event listener attached to your form by javascript and do something like this (jQuery syntax):
$("foo").submit(function(event){
doYourAjaxThing()
event.preventDefault();
});
http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29
Return false from the function submitting the form.
$("input").keypress(function (e) {
if (event.keyCode == 13) {
//Put whatever you would rather happen here........
return false; //this cancels the SUBMIT action
}
});
Good luck, Patrick