Question

Well I have spent a while scouring the internet for what I’d seem to be a simple solution.
I’ll show you the code and the ajax template I have been looking at.

<form style="padding:10px 2px;" name="test" class="searchform" action="#" method="GET">
<input style="margin-top:22.5px;" name="input_value" type="text" class="searchbx" size="" placeholder="Search songs..." />
<select name="cbb">
<?php
echo "<option value='artist'>$Artist</option>";
echo "<option value='name'>$Title</option>";
?>
</select>
<input id="sa" style="position:absolute;margin-top:35px;width:90px;" name="submit" type="submit" class="searchbutton" value="OK" />
</form>
<div id="sidebar-query-results">
         <ul id="current-list" style="list-style: none; padding: 0;">
<?php
if (isset($_GET['submit']))
{
// Execute this code if the submit button is pressed.
if (empty($_GET['input_value'])) {
die();
}
include "db_config.php";

$input_value = $_GET['input_value'];
$combo_box_value = $_GET['cbb'];
echo $formvalue;
echo $cbbvalue;
$query =  "SELECT * FROM `links` WHERE `$combo_box_value` LIKE '%$input_value%' LIMIT 0, 20" ;   
$result = mysql_query($query);
if($result) {
while($row = mysql_fetch_assoc($result)){
$cover = $row['cover'];
$title = $row['title'];
$name = $row['name'];
$artist= $row['artist'];
$url = $row['url'];

The rest of the script is simply printing the results etc.

The script itself Works like a charm although I understand it’s very “scruffy” but, functionality is all that I am really concerned about at the moment.

Anyway here is the ajax template:

 <script>
 $('form[name="test"]').submit(function(e) {
 e.preventDefault();

 $.ajax({
 url : #.action,
 type : this.method,
 data : $(this).serialize(),
 success : function(response) {

 }
 });
 });
 </script>

Either way it’s just the ajax script that I can’t get to work the php script I really don’t want to have to alter, I have looked dozens of tutorials but, I am having a lot of trouble implementing them into my situation.

Answer 1

That’s because the script is actually causing a syntax error so your AJAX binding isn’t occurring as expected (the entire <script> is being rejects so therefore it’s not being bound to the submit event and never calling .preventDefault())–Mostly because of the following:

url : #.action,

Try changing that to use:

url : $(this).prop('action')

(If you want to reference the <form action="..."> attribute) otherwise use a string like url: '/submit.php',

A more universal script would be something like:

$('form.ajax').on('submit',function(e){
  var $form = $(this);
  $.ajax({
    'type': $form.prop('method'),
    'url': $form.prop('action') || document.location,
    'data': $form.serialize(),
    'success': function(response){
      // handle response
    }
  });
  e.preventDefault();
});

Then you can add the ajax class to any form you’d like to be enhanced with ajax (and of course those without javascript support would default back to “traditional” methods).