2

I developed a php form which initiates a database request to fetch data depending on a drop down choice.

PHP Form:

<form method="get" action="<?php echo $url = basename($_SERVER['PHP_SELF']); ?>">
<select name="town" onchange='this.form.submit()'> 
    <?php $result= mysql_query('Query'); ?> 
<option value="x" selected>Select Choice</option>
    <?php while($row= mysql_fetch_assoc($result)) { ?> 
        <option value="<?php echo htmlspecialchars($row['town']);?>" > 
            <?php echo htmlspecialchars($row['town']); ?> 
        </option> 
    <?php } ?> 
<input type="hidden" name="action" value="submit" /><br>
</select>
</form>

Form action:

<?php
if(isset($_GET["action"])) { 

$var1= $wpdb->get_results("Query");
$var2= $wpdb->get_results("Query");

Content to show once executed }


 ?>

How can I make the form fetch the Data using AJAX not to stay refreshing the whole page continuously but only the form part?

user3492795
  • 193
  • 5
  • 19

1 Answers1

0
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <form id="form_id" action="<?php echo $url = basename($_SERVER['PHP_SELF']); ?>" method="post">
    <select id="town" name="town" onchange="send_to_server()"> 
<?php $result= mysql_query("Query"); ?> 
<option value="x" selected>Select Choice</option>
<?php while($row= mysql_fetch_assoc($result)){ ?> 
    <option value="<?php echo htmlspecialchars($row['town']); ?>"> 
        <?php echo htmlspecialchars($row['town']); ?> 
    </option> 
<?php } ?> 
<input type="hidden" name="action" value="submit" /><br>
</select>
 </form>
<script type='text/javascript'>
/* attach a submit handler to the form */
function send_to_server(){

var value = $("#town").val();

  /* get some values from elements on the page: */
  var $form = $("#form_id"); var url = $form.attr('action');

  /* Send the data using post */
  var posting = $.post( url, { option_value: $("#town").val() } );

  posting.done(function( data ) {
    alert('success');
  });
}
</script>
</body>
</html>

The above does exactly what you want. Check it in localhost

Riq
  • 182
  • 1
  • 2
  • 17
  • You should at least do an htmlentities conversion on the PHP_SELF , as it is a known security risk (Cross site scripting). – developers-have-no-vacation Apr 17 '14 at 16:19
  • @developers-have-no-vacation : I was concentrating more on the AJAX part as question asker wants how to get the values without page refresh. Anyways thanks for pointing out. – Riq Apr 17 '14 at 16:40
  • @MahasishShome many thanks for your code and help!!! Really appreciate. What is the best way to go about displaying html with php code in it instead of the `alert('success')` ? – user3492795 Apr 18 '14 at 08:20
  • @user3492795 If you want to display the value of a variable then use echo http://in1.php.net/echo & if an array then print_r http://in3.php.net/print_r . Consider upvoting or accepting the answer if it suffices your need. – Riq Apr 18 '14 at 19:14
  • @MahasishShome the problem is that as far as I know you cannot integrate php code directly in the javascript code, that is why I asked that question or I might be wrong ? – user3492795 Apr 20 '14 at 17:40