delay submit on form by 5 seconds and display jquery dialogue? - php

i need some help please. I am trying to delay the the submission of a form by 5 seconds so a jquery dialogue loading box appears before submitting the login form.
At the moment the code im using does delay the submit however it stops the form from submitting the data and wont log the user in.
I'm pretty sure its because im using e.preventDefault in my javascript however it doesnt work without it, can anyone please show me how i can delay the form from submitting and submit the data successfully so it does log the user in.
Thanks.
<div id="login">
<?php
if (!logged_in()) {
?>
<form id="myform" form action="login.php" rel="shadowbox" method="post" class="loginform">
Email
<input type="text" name="email" maxlength="30" />
Password
<input type="password" name="password" maxlength="30" />
<input type="image" src="../PTB1/assets/img/icons/loginarrow1.png" name="submit" class="loginbutton" value="Login" />
</form>
<?php
}
if (logged_in()) {
?>
Logged in as, <?php echo $_SESSION['email'] ?>. Dashboard, Logout | <div class="login_settings" id="login_settings"></div>
<?php
}
?></div>
<script>
$('#myform').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 3000); // in milliseconds
});
</script>
<script>
$(document).ready(function() {
$('#myform').submit(function() {Shadowbox.open({
content: '<iframe src="login.php" width="500" height="300" scrolling="no" style="overflow:hidden; border:none;"></iframe>',
player: "html",
height: 300,
width: 500
});
});
});
</script>

Use single submit handler. I tried this on my local system and it works.
<script type="text/javascript">
$(document).ready(function() {
$('#myform').submit(function(e) {
var form = this;
e.preventDefault();
Shadowbox.open({
content: '<iframe src="login.php" width="500" height="300" scrolling="no" style="overflow:hidden; border:none;"></iframe>',
player: "html",
height: 300,
width: 500
});
setTimeout(function () {
form.submit();
}, 3000); // in milliseconds
});
});
</script>

Related

how to auto scroll down in div on content added?

I am developing a chat program using jquery, php and ajax. and my problem is that when user puts msgs and when the chat box is overflowed it should auto scroll down when new msg enter and chat box overflowed. What I tried to achieve is this.
CODE
$.ajaxSetup ({
cache: false
});
$(document).ready(function(e) {
setInterval (function() {
$('.main').load('display_messages.php');
},1000)
$(function() {
//Function for press Return button
$('#newMessageContent').keypress(function(e) {
if (event.keyCode == 13 || !event.keyCode == all ) {
setTimeout (function() {
$('.main').load('display_messages.php');
setTimeout (function() {
$('.main p:last').addClass('animated fadeIn');
},20)
},50);
//$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
}
});
// Functions for click button
$('#newMessageSend').click(function() {
setTimeout (function() {
$('.main').load('display_messages.php');
setTimeout (function() {
$('.main p:last').addClass('animated fadeIn');
},20)
},50);
//$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
});
var chckIt = setInterval(function(){
$('.main').one('DOMSubtreeModified',function(){
setTimeout(function() {
$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
},500);
})
},1000)
$('.main').on('scroll',function(){
if ( $('.main').scrollTop() === 0 ){
clearInterval(chckIt);
}
});
});
});
it has some bugs. it will auto scroll down but it repeat itself again and again and not stoping, and you cant scroll up to see older msgs if u want.
so then I used this function $('.main').on('scroll',function(){
if ( $('.main').scrollTop() === 0 ){
clearInterval(chckIt);
}
}); to control it but its useless.
here is html.
code
<div class="chatBox">
<div class="chatlogo">
<embed src="test2.swf" play="true" class="vid2" loop="true" width="180" height="50" salign="C" scale="ShowAll" id="vid_2" quality="High" wmode="transparent" name="vid_2" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
</div>
<div class="user">
<form name="signIn" id="signInForm" action="signout_delete_content.php" method="post" onSubmit="return false">
<span class="error animated">Invalid uername</span>
<input name="username" type="text" id="username" placeholder="Enter username" size="13px" onClick='document.username.value = "" '>
<input type="submit" id="signIn" value="SING IN">
</form>
<span class="welcome"></span>
<input type="button" id="signOut" value="SIGN OUT" onclick="window.location.reload();">
</div>
<div class="main">
<p>Admistrator: Hello msgs here.</p>
</div>
<div class="messageBox">
<form name="messageBoxSignInForm" id="messageBoxSignInForm" onSubmit="return false">
<input type="submit" id="messageBoxSignIn" value="Sign In to Enter Chat">
</form>
<form name="newMessage" class="newMessage" action="" onSubmit="return false">
<textarea name="newMessageContent" id="newMessageContent" placeholder="Enter your message here.">Enter your message here</textarea>
<input type="submit" id="newMessageSend" value="Send">
</form>
</div>
</div>
any help would be appreciated. thanks
You can't scroll up because you keep triggering load('display_message.php'), which will trigger 'DOMSubtreeModified' event. So, you can't rely on 'DOMSubtreeModified' and have to check for a new message by other means. For example, you may count the number of messages for each 'display_message.php' and check for difference.
var old = 0, new = 0;
$('#newMessageSend').click(function() {
setTimeout (function() {
$('.main').load('display_messages.php', chckIt);
setTimeout (function() {
$('.main p:last').addClass('animated fadeIn');
},20)
},50);
//$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
});
var chckIt = function(){
new = $('.main').children().length;
if (new > old)
{
old = new;
setTimeout(function() {
$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
},500);
}
};
You were right,my previous answer doesn't works..
$('.messageBox').scrollTop($('.messageBox')[0].scrollHeight)
this works well:
jsfiddle:
http://jsfiddle.net/Lh4TN/6/

launching a jquery pop up window on html form submit?

can anyone please help. i have this login form:
<form id="myform" form action="login.php" method="post" class="loginform">
Email
<input type="text" name="email" maxlength="30" />
Password
<input type="password" name="password" maxlength="30" />
<input type="image" src="../PTB1/assets/img/icons/loginarrow1.png" name="submit" class="loginbutton" value="Login" />
</form>
i also have this script which brings up the form action page "login.php" in a popup window when my form is submitted.
at the moment it brings up a basic pop up window but i want to know if i can tweak the jquery code to implement a jquery lightbox window which opens up instead.
heres the jquery code that launches the pop up window when my login form is submitted.
<script>
$(document).ready(function() {
$('#myform').submit(function() {
window.open('', 'formpopup', 'width=400,height=400');
this.target = 'formpopup';
});
});
</script>
but now i want to have this pop up window open using my jquery lightbox window which is called "shadowbox" (available to download on the net) which you would normally open your links with like so.
<a href="link" rel="shadowbox;height=300;width=500" >link</a>
so just to be clear, i am asking if there is a way to launch my jquery lightbox "shadowbox" in place of the normal pop up window which is being launched when the user clicks the submit button on the login form.
Please can someone show me a way of doing this. thank you.
I would add e.preventDefault() to the previous statement
$(function() {
$('#myform').submit(function(e) {
e.preventDefault();
this.target = 'formpopup';
Shadowbox.open({
content: 'link',
height: 300,
width: 500
});
});
});
$(function() {
$('#myform').submit(function() {
this.target = 'formpopup';
Shadowbox.open({
content: 'link',
height: 300,
width: 500
});
});
});

Submitting forms thru in PHP on jQuery

I have a registration form that is currently in a popup modal window coded in jQuery. I have a PHP submit button on the bottom and I have added jQuery code that stops the button from submitting. This is because it will stop my modal window from closing when I submit the page. My issue now is that submitting the form would be impossible. Is there a way to submit my form over all this crowded pop-ups and jQuery? Say is it possible to use AJAX or jQuery to submit the form and allow my PHP to handle it.
Since I am writing in PHP, there is quite a bit of server side validation going on, so the point of this is to allow my viewers to fix their validation mistakes before the modal window closes.
Here is my jQuery, I didnt bother to mess with that anymore as it does what I need.
$(document).ready(function() {
$('a.modal-window').click(function() {
//Getting the variable's value from a link
var loginBox = $(this).attr('href');
$(loginBox).fadeIn(300);
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
Here is the code I used to stop the form from submitting:
$(function () {
$(':submit').click(function (event) {
event.preventDefault();
// submit the form dynamically
});
});
and below is my form, it might not matter although its there for the viewing.
<form method="post" id="loginform" action="<?php echo $_SERVER['PHP_SELF']?>">
<table style="color: white;">
<tr><th style="float:left;">Register a new account with us.</th></tr>
<tr><td>Username</td><td><input type="text" name="txtUser"/></td></tr>
<tr><td>Password</td><td><input type="text" name="txtPass"/></td></tr>
<tr><td>Email</td><td><input type="text" name="txtEmail"/></td></tr>
<tr><td>Confirm Email</td><td><input type="text" name="txtEmail2"/></td></tr>
<tr><td>First Name</td><td><input type="text" name="txtFname"/></td></tr>
<tr><td>Last Name</td><td><input type="text" name="txtLname"/></td></tr>
<tr><td>Address</td><td><input type="text" name="txtAddress"/></td></tr>
<tr><td>City</td><td><input type="text" name="txtCity"/></td></tr>
<tr><td>Postal Code</td><td><input type="text" name="txtPostal"/></td></tr>
<tr><td>Birth Year</td><td><input type="text" name="txtBirth"/></td></tr>
<tr><td>Gender</td><td><input type="radio" id="radio-1-1" name="radicalSex" class="regular-radio" value="m" selected="true" /><label for="radio-1-1"></label> Male</td></tr>
<tr><td></td><td><input type="radio" id="radio-1-2" name="radicalSex" class="regular-radio" value="f"/><label for="radio-1-2"></label> Female</td></tr>
<tr><td colspan='2' style="color: #FF6600;float:left;font-size:70%;"><?php echo $Error;?></td></tr>
<tr><td colspan="2"><input type="submit" name="btnRegister" ID="btnBlueTemp" value="Submit Registration" /></td></tr>
<tr><td colspan='2' style="float:left; font-size:70%;">Address information is optional</td></tr>
</table>
</form>
Let me give you an example of how you can do that .
<html>
<head>
<title></title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
function validate(name, addr){
if(name=="") {
alert('Name is Blank');
return false;
} else if(addr=="") {
alert('Address is Blank');
return false;
} else {
return true;
}
}
$("#save").click(function(event){
event.preventDefault();
var name = $("#name").val();
var addr = $("#addr").val();
if(validate(name,addr)){
$.ajax({
type:'POST',
data:'name='+name+'&addr='+addr,
url:'test2.php',
success:function(data) {
alert(data);
}
})
}
});
});
</script>
</head>
<body>
<form name="frm" method="POST" action="">
<input type="text" name="name" id="name" value=""/><br>
<input type="text" name="addr" id="addr" value="" /><br>
<input type="submit" name="save" id="save" value="Save"/>
</form>
</body>
</html>
Now in test2.php You can do your php codes
<?php
if(isset($_POST['name'])) {
echo $_POST['name'];
}
?>
Hope this gives you an Idea.
You need to serialize the form data before posting it to PHP.
<script type="text/javascript">
var frm = $('#loginform');
frm.submit(function () {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('submitted');
}
});
return false;//stop actual form submit
});
</script>
Then, submit your form via ajax
Jquery AJAX
On AJAX URL on which the request is sent, you can write necessary codes for validation and return accordingly. For eg. if some one the form element doesn't meet the validation, you can throw the flag accordingly as json value.
Its possible, why not.
Once you have done all the input validation at client side, just submit the form...
$("#loginform").submit();
Then you will have your server do the rest of the validation.
If you want to stay in the page and show the validation output from server, the. You should submit using Ajax.
It will send your form data to server, then you can do server validation, and output any errors. You will get this in your Ajax complete handler, which you can use to show error messages to user.
To stop the form from reloading the page you needn't call any prevent methods as a simple script request would do the trick.
For instance,
$('#loginForm').submit(function() {
// Do the relevant tasks needed here, form is already prevented from being submitted
});
Check out this demo for more information on what I am referring to

submit normally newly created ajax form

I want to submit my form. In my form using first button I create a textbox through ajax and after that I use second button to submit the form normally. When I want to get the value of newly created textbox using $_POST it gives error. How can i get value of ajax created button on submission. my php code is :
<?php`enter code here`
session_start();
ob_start();
require_once "config.php";
if ($_SERVER['REQUEST_METHOD']=="POST")
{
if (isset($_POST['subtest']))
{
print $_GET['tt'];
}
}
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-ui-1.8.21.custom/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.21.custom/js/jquery-ui-1.8.21.custom.min.js"> </script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#subt").click(function(){
jQuery("#divload").show();
jQuery.ajax({url:"adp.php", type:"post", success:function(result){
jQuery("#disp").html(result);
jQuery("#divload").hide();
}});
return false;
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#subtest").click( function() {
alert(jQuery("#tt").val());
});
});
</script>
</head>
<body id="#bdy">
<form id="FrmMain" method="post" action="">
<div id="Shd" style="font: 10%; margin: 50px; background-repeat:repeat-y; padding- left:120px;" >
<input type="text" id="txtFrom" name="txtFrom" />
<input type="text" id="txtUpto" name="txtUpto" />
<input type="text" id="txtOpt" name="txtOpt" />
<input type="submit" id="subt" name="subt" />
<input type="submit" id="subtest" name="subtest" />
<div id="RuBox" style="font-weight:bold;"><input type="checkbox" id="chkaccept" name="chkaccept" /> I accept terms and conditions.</div>
</div>
</form>
<div style="color:#F00; font-size:18px; display:none;" id="divload">Please wait loaidng... </div>
<div id="disp"></div>
</body>
</html>
Code of my adp.php file :
<?php
sleep(5);
?>
<div style="color:#30F; font-size:36px;">
Application testing............
<input type="text" id="tt" name="tt" />
</div>
I am not getting value of textbox named "tt" in temp form
Thanks
You're pretty much not posting anything from here:
jQuery(document).ready(function(){
jQuery("#subt").click(function(){
jQuery("#divload").show();
jQuery.ajax({url:"adp.php", type:"post", success:function(result){
jQuery("#disp").html(result);
jQuery("#divload").hide();
}});
return false;
});
});
So I would assume that you only want to generate a text field dynamically. And you can do it without the use of ajax:
var form = $('#FrmMain');
$('<input>').attr({'type' : 'text', 'id' : 'tt', 'name' : 'tt'}).appendTo(form);
Plus you're also trying to print out $_GET['tt'] while the form method is POST
if (isset($_POST['subtest']))
{
print $_GET['tt'];
}
This should also be:
echo $_POST['tt'];

Javascript, jQuery, PHP issue.

<?
session_start();
include("connection.php");
if($_POST['continue'])
{
$x=$_POST['rules'];
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.draggable.js"></script>
<script type="text/javascript" src="ui/ui.resizable.js"></script>
<script type="text/javascript" src="ui/ui.dialog.js"></script>
<script type="text/javascript" src="external/bgiframe/jquery.bgiframe.js"></script>
<script type="text/javascript">
function haha(form)
{
if(form.rules.value=='')
{
printToPage('output','Please enter the rules.','text')
hello();
return false;
}
else
{
myRedirect();
return false;
}
}
$(function()
{
$("#dialog").dialog({
autoOpen: false,
bgiframe: true,
resizable: false,
draggable: false,
height:10,
width:340,
modal: true,
overlay:
{
backgroundColor: '#000',
opacity: 0.5
},
buttons:
{
'No': function()
{
window.location = "so-rules.php";
return true;
},
'Yes': function()
{
window.location = "so-rules.php";
return true;
}
}
});
});
function myRedirect()
{
$("#dialog").dialog('open');
return true;
}
$(function()
{
$("#dialog2").dialog
({
autoOpen: false,
bgiframe: true,
modal: true,
resizable: false,
draggable: false,
height:160,
width:260,
buttons:
{
Ok: function()
{
$(this).dialog('close');
}
}
});
});
function hello()
{
$("#dialog2").dialog('open');
}
function getElem(id)
{
return document.all ? document.all(id) :
document.getElementById ? document.getElementById(id) :
document.layers ? document.layers[id] :
null;
}
function printToPage(id,content,classname)
{
var el = getElem(id);
if (!el) return;
if (el.style)
{
el.innerHTML = content;
if (classname) el.className = classname;
}
else if (el.document)
{
var SPANstr = (classname) ? '<span class="' + classname + '">' : '<span>';
el.document.write('haha');
el.document.close();
}
}
</script>
</head>
<body>
<td height="" bgcolor="#fafb91"><form onsubmit='return haha(form)' id="form" name="form" method="post" action="<? echo $PHP_SELF; ?>">
<p class="style16">
<div align="left">
<p><span class="style5">Rules:</span>
</p>
<p>
<textarea name="rules" rows="7" cols="49"></textarea>
<br />
<? echo "X: ".$_SESSION['x']; ?>
</p>
<div id="dialog" title="Attention">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Is the judge/speaker/facilitator from UST?</p>
</div>
<div id="dialog2" title="Attention">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 0 50px 0;"></span>
Please enter the rules.
</p>
</div>
<p><input type="submit" name="continue" id="continue" value="Continue">
<span id="output"></span>
</body>
</html>
When the textarea is not null, the form should be submitted ($PHP_SELF) so I can get the value of the textarea. But before it is submitted, a dialog box would appear. When the user clicks yes, he will be redirected to a different page. My problem is I don't know where to put the return 'true' so that the page will be submitted in order for me to get the value of the textarea. I put the return 'false' here:
if(form.rules.value=='')
{
printToPage('output','Please enter the rules.','text')
hello();
return false;
}
When the textarea is null, the form will not submit and a different dialog box will appear. Where should I put the return 'true' so that the page will only be submitted when the user inputs something in the textarea and after he clicks 'yes'.
I have posted the code where I tried putting in the return 'true' without success.
If it is a type="button" use the onclick event to control the action
I wonder why you are using "button" and not "submit"? "button" comes in handy when you are using JavaScript, but it doesn't work with PHP. Furthermore, they makes no difference anyway.
If all that you want to do is to differentiate between the buttons, try giving them different names.
Hope that help
If what you are asking is: How can I see in the POST response what button has been clicked?
Then I'm afraid you can't as only the name and value of the submit button that was used to submit the form is being listed in the $_POST data.
You can however achieve this using a hidden field and javascript. So you should do something similar to this:
<input type="button" id="continue" value="Continue" onclick="document.getElementById('hiddenContinue').value = 'true';" />
<input type="hidden" name="continue" id="hiddenContinue" value="false" />
So when the button is clicked the hidden field is set to true and when the form is submitted it appears in the $_POST array.
However, this doesn't make much sense if there are no other onclick events added to the button.
Maybe you should describe a little bit more what you are trying to do.
EDIT:
Since you updated your old question to a new one, this answer doesn't apply anymore.
Button inputs are used for custom actions that are usually written in JavaScript. That is, they do not submit a form like the Submit inputs. You can write a JavaScript code that will submit the form for you OR navigate to a particular PHP page and achieve a similar effect.

Categories