I am using a form to allow file download and to store the number of downloads but now I can't seem to find a way to fadeIn a subscribe div (#cover) on form success..
This is my form:
<form action="<?php $_SERVER['PHP_SELF']; ?>" method="post" name="free-download" id="free-download">
<button class="download" type="submit" name="clicks" onclick="window.open('download/imagins_._ro_free_files_format_icons.rar')">download (<span class="small"><?php echo getClickCount(); ?> times</span>)</button>
</form>
Is there a jquery way of doing this?
This is what I tried:
$("#free-download").bind('ajax:complete', function() {
$('#cover').fadeIn(600);
$('body').addClass('hidescroll');
});
Update
By changing the form action to <?php echo $_SERVER['PHP_SELF']; ?>
and adding the following (below) I managed to add an echo to the page
on form success, but how do I have the #cover div fadeIn?
<?php
if(isset($_POST['clicks']))
{
echo "<p class='section-desc'>You just downloaded it</p>";
}
?>
Working solution
Use php to echo a script tag containing whatever you want to achieve
on submit success (in my case, a div fadeIn).
<?php
if(isset($_POST['clicks']))
{
echo '
<script type="text/javascript">
$(function() {
$( "#cover").fadeIn();
});
</script>';
}
?>
Related
After I submit my data from form I don't see it immediate on my screen, I have to refresh it via browser refresh button.
<form action="" method="post">
<input type="submit" name="submit" >
I was using the setTimeout function but it gave me lot of issues in submitting to the database and retrieving from it. I could not debug it properly, and so I removed this function. Without setTimeout, I am able to store in the database and retrieve via the refresh button. But how do I make it immediately auto refresh?
i have done with the help of jquery and ajax without refresh and page loading
html file with ajax
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sub").click(function(){
$.ajax({
url: 'dbadd.php',
type: 'POST',
data: {naam:$("#nm").val()},
success:function(response){
$("#d1").html(response)
}
});
});
});
</script>
</head>
<form method="post">
Name : <input type="text" id="nm" name="name">
<div id="d1"></div>
<input type="button" name="submit" id="sub" value="submit">
</form>
</html>
php file : adddb.php
<?php
$con=mysql_connect("localhost","root");
mysql_select_db("empl",$con);
$q=mysql_query("insert into emp(name) values ('".$_POST['naam']."')");
$qq=mysql_query("select name from emp where name='".$_POST['naam']."'");
while ($data=mysql_fetch_object($qq)) {
echo $data->name;
}
?>
For refresh page use this code:
<META HTTP-EQUIV ='Refresh' Content ='0; URL =/'>
You can use like this end of your code:
<?php echo "<META HTTP-EQUIV ='Refresh' Content ='0; URL =/'>"; ?>
Set your action as:
<?php echo $_SERVER['PHP_SELF']?>
and it will do the trick.
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post">
Action is the directive that trigger what to do with the data. If you don't specify it how is the browser supposed to do anithing?
again as always, thanks for your time. this is driving me crazy.
Note: at no point do i want the page to refresh.
I have a form then a loading bar image then a linked button. the main page starts off with just a form and a submit button
What i would like to do is when the form is submitted the whole div(1)& its inside and its contents to disappears, then simultaneously a new div(2) in its place, appears with a loading.gif image and the submitted entry, then after 5 secinds this div disappears and in its place another div(3) with a button link and text inside appears
div1: shows form till button click,
div2: then loading image for 5 secs
div3: link and text stays visible
My code as is (nothing hides with it and divs are showin when there not meant to be)
<html>
<head>
<script type="text/javascript">
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML)<=0) {
location.href = '#';
clearInterval(t);
exit;
}
i.innerHTML = parseInt(i.innerHTML)-1;
}
var t = setInterval(function(){ countdown(); },1000);
</script>
</head>
<body>
<!--1. Show until submit then hide -->
<div id="div1">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
Answer: <input type="Text" Name="info" required>
<input type="Submit" value="Send">
</form>
</div>
<!--2. Show for 5 seconds on submit then hide -->
<div id="div2">
<?php
if (count($_POST) > 0 && isset($_POST["info"])){
// add First and Second Numbers
$sum = $_POST["info"];
// their Answer is diplayed
echo " Your answer $sum". "<br />";
echo '<img src="http://i.imgur.com/nh9eh0c.gif" border=0>'. "<br />";
echo ' Submiting answer in <span id="counter"> 5</span>' . "<br />";
// after 5 secounds this hides and is replace with a button link and the text "thank you"
} ?>
</div>
<!--3. Show after 5 seconds above then nothing -->
<div id="div3">
<?php
echo 'Back home'. "<br />";
echo '<img src="http://www.skeletonsthemovie.com/images/home-button-large.png" border=0>';
?>
</div>
</body>
</html>
Hope this isn't to confusing it was quite hard to word properly.. any help would be amazing !
you need something like this
<script>
$(document).ready(function(){
$('#submit').click(function(event){
event.preventDefault();
$('#div1').css('display','none');
$('#div2').css('display','block');
setTimeout(function(){$('#div2').css('display','none');$('#div3').toggle()},5000);
$.ajax({
//submit form using ajax
})
})
})
</script>
You can use Jquery on this.
Just put setTimeout("$('#div).dialog('close')", 5000); when you want to close a div after 5 seconds.
In jquery you can try like this
$(document).ready(function(){
$("#div2").hide();
$("#div3").hide();
$("#submit-button").click(function(event){
event.preventDefault();
if(event.target == this){
if($("#info").val() == ''){
alert("Please enter information.");
return false;
}
$("#div1").hide().;
$("#div2").show().;
$("#answer").html($("#info").val());
$("#div2").delay(5000).fadeOut();
$("#div3").delay(5000).fadeIn();
$("#back").click(function(){
$("#div3").delay(5000).fadeOut();
$("#div2").hide();
$("#div1").show();
});
}
});
});
Simply my problem is that i want to submit a form in a div with empty action as the php script in the same page,
a simple example to illustrate as my page is too long
<html>
<head>
<script>
$(document).ready(function() {
$("#myDiv").delegate("form", "submit", function(event) {
$.ajax({
data: $(this).serialize(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(response) {
$("#myDiv").slideUp(500, function() {
$("#myDiv").html(response);
$("#myDiv").slideDown(500);
});
}
});
return false;
});
});
</script>
<head>
<form method="post" action="">
<p> enter your name</p> <input type="text" name="name" />
<input type="submit" name="save" />
</form>
<?php
if (isset($_POST['save'])) {
echo $_POST['name'];
}
?>
</html>
the problem that the action of the form is empty and so when i click submit button nothing happen, so anyone knows how to solve the problem?
PS: it's too hard to extract the php script in extrnak file, i am searching for alternative solution.
For .delegate to work you have to wrap #myDiv around the selector you wish to target, because the targeting is equivalent to:
$('#myDiv').find('form').on('submit', ...
In other words, your form must be wrapped inside #myDiv.
tried like this?
<?php
if (isset($_POST)) {
echo $_POST['name'];
}
?>
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post">
This will put the current script address in the action field.
try using a hash symbol. action="#"
this a simple example in how to submit form using the Jquery form plugins and retrieving data using html format
html Code
<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>
// prepare the form when the DOM is ready
$(document).ready(function() {
// bind form using ajaxForm
$('#htmlForm').ajaxForm({
// target identifies the element(s) to update with the server response
target: '#htmlExampleTarget',
// success identifies the function to invoke when the server response
// has been received; here we apply a fade-in effect to the new content
success: function() {
$('#htmlExampleTarget').fadeIn('slow');
}
});
});
</script>
</head>
<body>
<form id="htmlForm" action="post.php" method="post">
Message: <input type="text" name="message" value="Hello HTML" />
<input type="submit" value="Echo as HTML" />
</form>
<div id="htmlExampleTarget"></div>
</body>
</html>
PHP Code
<?php
echo '<div style="background-color:#ffa; padding:20px">' . $_POST['message'] . '</div>';
?>
this just work fine
what i need to know if what if i need to Serialize the form fields so how to pass this option through the JS function
also i want show a loading message while form processed
how should i do that too
thank you
To serailize and post that to a php page, you need only jQuery in your page. no other plugin needed
$("#htmlForm").submit(function(){
var serializedData= $("#htmlForm").serialize();
$.post("post.php", { dat: serializedData}, function(data) {
//do whatever with the response here
});
});
If you want to show a loading message, you can do that before you start the post call.
Assuming you have div with id "divProgress" present in your page
HTML
<div id="divProgress" style="display:none;"></div>
Script
$(function(){
$("#htmlForm").submit(function(){
$("#divProgress").html("Please wait...").fadeIn(400,function(){
var serializedData= $("#htmlForm").serialize();
$.post("post.php", { dat: serializedData},function(data) {
//do whatever with the response here
});
});
});
});
The answer posted by Shyju should work just fine. I think the 'dat' should be given in quotes.
$.post("post.php", { 'dat': serializedData},function(data) {
...
}
OR simply,
$.post("post.php", serializedData, function(data) {
...
}
and access the data using $_POST in PHP.
NOTE: Sorry, I have not tested the code, but it should work.
Phery library does this behind the scenes for you, just create the form with and it will submit your inputs in form automatically. http://phery-php-ajax.net/
<?php
Phery::instance()->set(array(
'remote-function' => function($data){
return PheryResponse::factory('#htmlExampleTarget')->fadeIn('slow');
}
))->process();
?>
<?php echo Phery::form_for('remote-function', 'post.php', array('id' => ''); ?> //outputs <form data-remote="remote-function">
Message: <input type="text" name="message" value="Hello HTML" />
<input type="submit" value="Echo as HTML" />
</form>
<div id="htmlExampleTarget"></div>
</body>
</html>
my 2form.php :
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
function test()
{
url = '2form.php';
var ajax = new Ajax(url, {
method: 'post',
onComplete: function(response) {
document.getElementById('error_upload_logo').innerHTML = response;
}
});
ajax.request();
}
</script>
<?php
if($_FILES)
{
echo "<div>";
foreach($_FILES['name'] as $v)
{
echo $v."<br/>";
}
echo "</div>";
}
else
{ ?>
<form action='' id='form1' name="form1" method="post" enctype="multipart/form-data">
<input type="file" name="name"/>
<input type="submit" name="submit" onclick='test(); return false;'/>
</form>
<?php
}
?>
<div id="error_upload_logo"></div>
if run code with out javascript , it 2form.php like simple php page, and
we can see information of $_FILES that was printed to scrreen
But if i have run with javascript by test() function ,
i don't get information in $_FILES ?
How to get $_FILES ? when click button run with javascript ?
i want to upload with ajax
You can't do file uploads using AJAX because you won't have access to the local file.
The most common workaround is what the JQuery Form plugin does, creating a temporary iframe and doing a normal form submit into it.
The other alternative is using a Flash-based uploader like SWFUpload or Uploadify.