Overview
I have div#lead_form that SlideDown in 5 seconds after page loads. And in that div, I have a submit button. Everytime someone clicks submit, the form within #lead_form will validate the input fields and refresh the page.
Issue
Everytime the form validates, it refreshes the web page and the div#lead_form SlideDown takes 5 seconds to slide in. What I want to do is, have a true false variable and check if the submit button has been clicked, if true, disable the div#lead_form SlideDown effect?
My HTML
<div id="lead_form">
<div id="button"></div>
</div>
My jQuery
$(document).ready(function() {
$("#lead_form").hide(0).delay(4000).slideDown(5000);
});
Findings
This is not exactly what I'm after, but similar?
In your server side code check if the request is coming with your form submitted, and write the result as a javascript var in a given section on your page
if( isset($_POST['yourFORMFIELD']) )
{
echo "var postBack = true;";
}
then change your jQuery ready to
$(document).ready(function() {
if(!postBack) {
$("#lead_form").hide(0).delay(4000).slideDown(5000);
}
});
As there is a page reload you can not solve this using javascript only.
you have to somehow persist the state (if the form was submitted) and check that state after the page is reloaded.
you can do this either via a cookie or the local storage (local storage will only work in most recent browsers)
Related
I'm using a button to slide down a div which contains a registration form but after I reload the page (or submit the form), the div vanishes and I have to click on the button again. I want the div to stay after reloading the page. Any suggestions?
Here is my jquery code:
<script type="text/javascript">
$(document).ready(function(){
$("button#button_register").click(function(){
$("#register").slideDown('slow');
});
});
</script>
And the button:
<button id="button_register">Register! </button>
You need to somehow save the state of your #register element. You can use server side for this (session) or a simple cookie.
But handling cookies in pure JS is a little bit tricky. Assuming you can use this great plugin: https://github.com/carhartl/jquery-cookie you could do something like this:
$("button#button_register").click(function(){
if($("#register")is(':visible')) {
$("#register").slideUp('slow');
$.cookie('registerState', 0);
} else {
$("#register").slideDown('slow');
$.cookie('registerState', 1);
}
});
... than you need to check for this state every time the page is loaded, like so:
$(document).ready(function(){
if($.cookie('registerState') == 1) {
$("#register").show(); // or slide down if you want to show an animation every time
}
});
I have a link that has a rel="facebox". When it is clicked it runs a php script from a separate file. I want to refresh the page automaticaly when the facebox fades. How can I do it? I've tried the headers and metas but it is not working.
You can bind event afterClose.facebox:
$(document).bind('afterClose.facebox', function() {
location.reload();
});
1.I've a page where on clicking button brings up the modal. What I would like do to is move all models to a separate page. I've tried this
$('#newSection').click(function(){
$('#temp').load('adminmodels.php');
$('#newSectionModal').modal('show');
});
On first click, nothing happens. On subsequent clicks, the modal appears and fades automatically. Please suggest and corret my code.
2.I would like to submit a form from inside of a modal and then display the response in the modal itself.
$(document).ready(function(){
$('#user_button').click(function(e){
e.preventDefault();
$(this).attr('disabled',true);
$.post('__admin_ajax.php',postString,function(response){
$('#user-modal-body').html(response);
});
});
});
The response of previous form submission retained for subsequent modal loads.
I find for this type of logic, it's easier to just use an iframe.
<div id="newSectionModal">
<iframe id="modal_frame"/>
<div>
And then in the code.
$('#newSection').click(function(){
$('#modal_frame').attr('src', 'adminmodels.php');
$('#newSectionModal').modal('show');
});
Because it's in a frame, you can handle the form submission as if it were in it's own window. At any time, you can trigger the parent frame by calling window.parent. Ex: window.parent.trigger("form-submitted")
I have a form submit via php and after submitted which mean data inserted to the db and
I want to trigger a jquery function automatically and the function contain the inserted data.
Problem I facing is during the page load, the jquery.js file has not load yet and I can't call
the jquery function.
Another problem, If after the page loaded, how can I automatic trigger the jquery function?
Add the script tag that includes the jQuery in head before your use jQuery and put your javascript just before ending body tag. Putting the code in document.ready will ensure the availability of DOM elements to your script and trigger the javascript as the page is ready after being accessed.
$(document).ready(function(){
//your code here
})
try this
this will trigger on form submit
$('.formclass').on('submit',function(){
// this will redirect to the page you want
window.location = "http://www.yoururl.com";
});
but if you want to trigger a function when the form is submitted and the new page is loaded then #Adil suggestion is what you need ..
but you have to be sure that this page only shows after the form submit if for example after submitting the form you redirect to the home page and you used the document.ready then this will run when the page is loaded regardless of the form submit-ion , so every time i go to the main page it will fire ...
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.