Updating div with AJAX
Index.php
...
<form id="calculator_form" name="form" action="" method="get" >
<input name="one" type="text">
<input name="two" type="text">
<input type="submit">
</form>
...
<!-- refresh area -->
<?php if(isset($_GET["one"])) { ?>
<div>
<?php echo $_GET["one"] . " " . $_GET["two"]; ?>
</div>
<?php } ?>
<------------------->
I would like to submit the form and reload the update zone above. I know this can be achieved with help AJAX
, but I'm not really sure how.
I tried putting the update area in a separate file ajax.php
and using JQuery
, but it didn't work;
$(document).ready(function() {
$("#calculator_form").submit(function(event) {
event.preventDefault();
$("#divtoappend").load("ajax.php", data);
})
})
I've also tried using $.get()
but to no avail.
I can send data back and forth to a separate page php
, but I am stuck trying to achieve what I am looking for.
EDIT:
The code I posted was quick to write and the syntax is not a problem, I just wonder how I can update <div>
on the form so that it will validate again if(isset($_GET["one"]))
and print the updated variables php
.
EDIT 2:
Now my code looks like this:
Index.php
...
<form id="calculator_form" name="form" action="" method="get" >
<input name="one" type="text">
<input name="two" type="text">
<input type="submit">
</form>
...
<div id="append">
<!-- where I want the ajax response to show -->
</div>
...
ajax.php
<?php if(isset($_GET["one"])) { ?>
<div>
<?php echo $_GET["one"] . " " . 4_GET["two"]; ?>
</div>
<!-- assume there n number of divs -->
<?php } ?>
Now I want the div to be ajax.php
added to the #append
div in index.php
. There must be a better way than changing ajax.php
and using echo:
ajax.php (echoed)
<?php
if(isset($_GET["one"])) {
echo "<div>". $_GET["one"] . " " . $_GET["two"] . "</div>";
}
?>
So, since it
ajax.php
can be very large, is there a better solution than just echo data fromajax.php
toindex.php
?
source to share
Now this can be done in different ways. One of them is the following. Try the following:
Index.php file
<form method="get" id="calculator_form">
<input name="one" type="text" id="one">
<input name="two" type="text" id="two">
<input type="submit" name="submit">
</form>
<div class="result"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#calculator_form").on('submit', function(event){
event.preventDefault();
var one = $('#one').val(); // Taking value of input one
var two = $('#two').val(); // Taking value of input two
$.get( "ajax.php", { one:one, two:two }). done( function( data ) {
$('.result').html(data); // Printing result into result class div
});
});
});
</script>
ajax.php
<?php if(isset($_GET["one"])) { ?>
<div>
<?php echo $_GET["one"] . " " . $_GET["two"]; ?>
</div>
<?php } ?>
source to share
Use this,
$(document).ready(function() {
$(document).on('submit',"#calculator_form",function(event) {
event.preventDefault();
$.get(
'ajax.php',
function(ret_data){
$("#divtoappend").html(ret_data);
}
);
});
}) ;
The original syntax for $.get
is
$.get(
URL,
{
VAR_NAME1:VAL1,
VAR_NAME2:VAL2
},
function(response){
// your action after ajax complete
}
);
source to share
I'm not sure if I understood the question correctly, but here's what you can do: assign an ID or at least a css class name to the target div and draw the stuff you get from the AJAX response like below,
$ (document) .ready (function () {
$ ("# calculator_form"). submit (function (event) {
event.preventDefault ();
$ .ajax ({
url: "Ajax_URL",
success: function (result) {
$ ("# targetDiv"). html (result.one + "" + result.two); // assuming you have assigned ID to the target div.
}
});
})
})
source to share