• 0

submitting data without reloading a page?


Question

Is it possible to submit data without reloading/redirecting a page.

I'm creating a php script where a user first needs to select a category, up on doing that i want them to be presented with a form where they can enter data, this is then sent to PHP and re-loades to show the results in the last step. I want to do all this without reloading the page. So when they submit the form a textarea will load with results.

I know it cant be done directly in PHP as PHP requires a page to be reloaded.

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0

Ok ive done some googling and come up with this, it doesn't seem to work it just refreshes the page.

have i missed anything below? the script could even be written slightly wrong i don't know much about this language.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(?#send?).click(function(){

function send(datastr){
$.ajax({
type: ?POST?,
url: ?engine.php?,
data: datastr,
cache: false,
success: function(html){
$(?#results?).fadeIn(?slow?);
$(?#results?).html(html);
setTimeout(?$(?#results?).fadeOut(?slow?)?,2000);
}
});
}
</script>

<form action="" method="post">
....
....
<span class="button"><button id="send" name="send">Go<span class="bg"></span></button></span>
</form>

Link to comment
Share on other sites

  • 0

Yes there are a couple of things missing. The action you should be looking for is the submit action of the form and not the click action. So if the form has an id #login then the ajax function should be bound as below.


$(function(){

$('#login').submit(function(){

//     Collect and assemble the form data

$.ajax({
        type: ?POST?,
        url: ?engine.php?,
        data: datastr,
        cache: false,
        success: function(html){
                $(?#results?).fadeIn(?slow?);
                $(?#results?).html(html);
                setTimeout(?$(?#results?).fadeOut(?slow?)?,2000);
        }
});

})

})

Link to comment
Share on other sites

  • 0

It doesn't seem to work.

It just looks like it refreshes the page but no #results div appears :s

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript"> 
$(function(){
$('#form').submit(function(){
// 	Collect and assemble the form data
$.ajax({
 	type: "POST",
 	url: "engine.php",
 	data: datastr,
 	cache: false,
 	success: function(html){
 	$("#results").fadeIn("slow");
 	$("#results").html(html);
 	}
});
})
})
</script>

<form action="" id="form" method="post">
...
...
 		<span class="button"><button id="send" name="send">Go<span class="bg"></span></button></span>
</form>

 	<div class="results">
 	<textarea name="results" cols="" rows=""><?php echo $result; ?></textarea>
 	<span class="button"><button title="Copy to clipboard">Copy<span class="bgCopy"></span></button></span>
 	</div>

have i missed something?

Link to comment
Share on other sites

  • 0

You need to specify the data first:

var datastr = $("#form").serialize();

add that below

$('#form').submit(function(){

Link to comment
Share on other sites

  • 0

Still the same. could it be the fact i'm using <button> instead of <input submit..>

regarding this line:

$('#form').submit(function(){

and where #form is, is that the id of the actual form or the #id of the <button...>

Link to comment
Share on other sites

  • 0

Still the same. could it be the fact i'm using <button> instead of <input submit..>

regarding this line:

$('#form').submit(function(){

and where #form is, is that the id of the actual form or the #id of the <button...>

you need to use input. if youre going to use <button> you need to modify the code a little bit.

Change this:

$('#form').submit(function(){

to

$('#button_id').click(function(){

Link to comment
Share on other sites

  • 0

You seem to be having a lot of trouble with this simple thing, heh. Based on the code you've pasted so far, you should need no more than...

&lt;script type="text/javascript"&gt; 
$(document).ready(function() {
	$('#send').click(function() {
		$.post('engine.php', $('#form').serialize(), function(response) {
			$('#results').html(response).fadeIn('slow');
		});
	});
});
&lt;/script&gt;

Link to comment
Share on other sites

  • 0

I am having trouble lol, i don't know much about jquery/ajax.

non of the above examples worked, the page just reloads.

Link to comment
Share on other sites

  • 0

I am having trouble lol, i don't know much about jquery/ajax.

non of the above examples worked, the page just reloads.

Then do this.

&lt;script type="text/javascript"&gt; 
$(document).ready(function() {
	$('#send').click(function() {
		$.post('engine.php', $('#form').serialize(), function(response) {
			$('#results').html(response).fadeIn('slow');
		});
		return false;
	});
});
&lt;/script&gt;

Link to comment
Share on other sites

  • 0

How are you debugging your Javascript? Saying "nothing happens" may be false...

i'm not? lol. sorry guys, your talking to a total js noob.

i changed the fadeIn line to:

$('div.results').fadeToggle(250).css("display", "block");

and it fades in the box but does not display the $results

Link to comment
Share on other sites

  • 0

i'm not? lol. sorry guys, your talking to a total js noob.

can you add your PHP code to see what exactly it is your trying to do?

I can understand the JS part, but lets see what data you are trying to refresh once submitted.

Link to comment
Share on other sites

  • 0

can you add your PHP code to see what exactly it is your trying to do?

I can understand the JS part, but lets see what data you are trying to refresh once submitted.

$first = $_POST["first"];
$second = $_POST["second"];

if (isset($first) &amp;&amp; !empty($first)) {
 $result = ".........................................";
}
if (isset($second) &amp;&amp; !empty($second)) {
 $result .= ".........................................";
}

this is trimmed down but that is basically it..

when submitted it should submit to that code and then return $result in a text area in the results div which should fadeIn

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.