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?
Related
Due to language limitations I might not understood how to ask Google about what I want to accomplish, but I hope you will understand.
I have three forms which i want to show on the same page without refresh. First form submits action to php which determines which function (with yet another form) to show. But buttons interfere and I am nowhere near what I wanted to do.
Index.php is supposed to send user input to calculator.php which then opens next form depending on value:
<form id="form1" method="post" formaction="calculator.php">
<input id="form1" type="submit" value="Submit" />
<div id="parseSecondForm"></div>
<script type="text/javascript">
$(function(){
$('#form1').on('submit', function(e){
e.preventDefault();
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('formaction'),
data: $(this).serialize(),
beforeSend: function(){
$('#parseSecondForm').html('<img src="loading.gif" />');
},
success: function(data){
$('#parseSecondForm').html(data);
}
});
});
});
</script>
calculator.php receives user input and echoes next form in #parseSecondForm div in index.php:
if (form1 === '1') {
echo '
<form id="form2" method="post" formaction="form2.php">
<input id="form2" type="submit" value="Submit" />
<div id="thankyou"></div>
<!--submit saves php result in MySQL and thanks the user in next div-->
';
}
else {
echo '
<form id="form3" method="post" formaction="form3.php">
<input id="form3" type="submit" value="Submit" />
<div id="thankyou"></div>
<!--submit saves php result in MySQL and thanks the user in next div-->
';
}
I tried to echo modified javascript from index.php, but it just resets all the forms.
Maybe there are some form scripts designated for the cause or any other ideas how can I fix the issue?
In Javascript/HTML you cannot have two items with the same IDs:
<form id="form1" method="post" formaction="calculator.php">
<input id="form1" type="submit" value="Submit" />
form1 can be used only once.
Same for the php dynamically created forms.
I'm starting to study web development and as exercise I was trying to make a form for redirecting in HTML with javascript and PHP.
HTML
<html>
<head>
<title>FORM</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<form>
<input type="text" name="url"><br>
<input class="btn" type="button" id="send" value="Send" />
</form>
</body>
</html>
JavaScript
$(document).ready(function() {
$("#send").click(function(){
var url = $("#url").val();
$.ajax({
type: "POST",
url: "engine.php",
data: "url=" + url,
dataType: "html"
});
PHP
<?php
session_start();
$url = $_POST['url'];
header("Location: /".$url.");
session_destroy();
exit;
?>
The main problem is that seems that the js isn't read. Futhermore I don't know if the PHP is correct. What's wrong?
There's no need to make an AJAX request if you want to redirect to another URL. Also, the way your doing it at the moment wouldn't redirect anyway.
Below, when your click function fires, it will get the URL from your input field, and re-direct to that page.
<html>
<head>
<title>FORM</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#form_name").submit(function(event){
event.preventDefault();
var url = $("#url").val();
document.location.href = url;
});
})
</script>
<form id="form_name" name="form_name">
<input type="text" name="url" id="url"><br>
<input class="btn" type="submit" id="send" value="Send" />
</form>
</body>
</html>
you need to add id to input
<input type="text" name="url" id="url"><br>
and also header() don't work in ajax
you need to use javascript for redirect
in php
<?php
session_start();
$url = $_POST['url'];
echo '<script>document.location.href = '.$url.'</script>';
session_destroy();
exit;
?>
and put echo text into document with ajax respond function
also you can use a better way ( with out Ajax and submit form )
$(document).ready(function() {
$("#send").click(function(){
var url = $("#url").val();
window.location.href = url;
});
here is the best answer for you How to redirect to another webpage in JavaScript/jQuery?
UPDATE:
also you need delete , tags, here the html code instead of ...
<input type="text" name="url" id="url"><br>
<input class="btn" type="submit" id="send" value="Send" />
So you think your javascript isn't being executed? Does that mean you've debugged this?
If none of your javascript runs - including your ready handler, then the server isn't finding the js files. If some of your javascript is running it's possible that an error is causing it to stop. You probably just need to do a little debugging.
I have this code.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form action = "" method = "POST" id = "form">
<img src = "circle.gif" id="loading" style="display:none; "/>
<input type="text" name = "text2">
<input type="submit" name="submit2" value="Send">
</form>
<?
if (isset($_POST['submit2'])){
echo $_POST['text2'];
}
?>
<script>
$('#form').submit(function(e) {
$('#loading').show();
return false;
});
</script>
</body>
</html>
I want to store in my db the value written in the textbox using PHP, and while it's being saved, I want to show a gif using jQuery, once the page is loaded, this gif should be removed.
Then, If I don't comment nothing, gif appears when submit button is submitted but echo fails.
If I comment the jQuery script, PHP echoes the vale written.
If I comment the PHP script, gif is shown but no echo of course...
How could I do what i'm asking. I know that my full script does until only showing the gif, but this without this I can't continue.
You can achieve your desired behaviour, but you need to do it by submitting an AJAX request to the server and then handling the return value. So basically you'd add this ajax request to the click or submit event of the form, and handle the behaviour and request via javascript.
Perhaps something like this:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form action = "formSubmitHandler.php" method = "POST" id = "form">
<img src = "circle.gif" id="loading" style="display:none; "/>
<input type="text" name = "text2">
<input type="submit" name="submit2" value="Send">
</form>
<script>
$(document).ready(function(){
$('#form').submit(function(){
// Show the loading icon before the processing begins
$('#loading').show();
// Send the query/form details to the server
jQuery.ajax({
data: $(this).serialize(),
url: this.action,
type: this.method,
success: function(results) {
// Now that the processing has finished, you
// can hide the loading icon
$('#loading').hide();
// perhaps display some other message etc
}
})
return false;
});
});
</script>
</body>
</html>
I`m trying to make somethig like login with jquery. There should be a validation on text fields to echo error message. If the form is completely validated then function in jquery should update the div, where there is the input form and change it to the session name. But There is a problem, when posted form is validated then div remains empty, there is no session name.
HTML:
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery('#form').submit(function(){
jQuery.ajax({
type: 'POST',
url: jQuery('#form').attr('action'),
data: jQuery('#form').serialize(),
success: function(data){
if(data == 'success'){
jQuery('#user').load(location.href+' #user>*');
}else{
jQuery('#info').html(data);
}
}
});
return false;
});
});
</script>
</head>
<body>
<div id="user">
<div id="info"></div>
<?php
session_start();
if(isset($_SESSION['user'])){
echo $_SESSION['user'];
}else{
echo '
<form method="post" action="session.php" id="form">
<input type="text" name="user" />
<input type="submit" name="do" value="ok" />
</form>
';
}
?>
</div>
</body>
</html>
PHP:
<?php
$user = mysql_real_escape_string($_POST['user']);
if(empty($user)){
echo 'psc';
}else{
echo 'success';
session_start();
$_SESSION['user'] = $user;
}
?>
I think type: 'POST' in your ajax call is usually done in lower case: type: 'post'. I am not sure if this is the issue, but you may want to try it.
Aside from that, the other problem with your code is that you are not preventing the form from being submitted. So basically you are sending an ajax message, but then immediately loading a new page with the default submit that occurs when clicking the submit button. I would think that this has the effect of loading a blank page?
To fix this you could add to your submit handler the following lines:
jQuery('#form').submit(function(event){
event.preventDefault();
Notice I have added event to the handlers arguments, and then called the preventDefault() method to stop the form from actually submitting. Returning false in the handler does not do this for you.
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>