json Daten in Div ausgeben.

[creativeheadz]

Hallo,
folgender Code funktioniert soweit. Zwei Dinge stören mich aber. Zum einen wird nach absenden des Formulars, die Seite komplett neu geladen. Das möchte ich gerne unterbinden. Und ich möchte mir das JSON ECHO der process.php in einem DIV ausgeben.Das klappt irgendwie auch nicht. Die Daten werden allerdings erfolgreich in der Datenbank gespeichert.

    <script type="text/javascript">
    $(document).ready(function(){
        $("#add").submit( function () {  
            $.ajax({
                url: 'process.php'
                ,type: 'post'
                ,dataType: 'json'
                ,data: {
                    id: $('#id').val(),
		    title: $('#title').val()
                }
                ,success: function(data) {
                    $('#results').html(data.result);
                }
            });
        });
    });

</script>
<div id="results"> </div>
       <form id="add" name="add" method="post" >
         <input type="hidden" name="id"  id="id" value="1"/>
          <input type="hidden" name="title"  id="title" value="testtitel"/>
         <input type="submit" name="button" id="button" value="speichern"  class="button"/>
       </form>

process.php

session_start();
	
	include('config.php');
	
	$sid = session_id();
	

		$insert = mysql_query("INSERT INTO list (VID, SID, TITLE)VALUES ('".$_POST['id']."', '".$sid."', '".$_POST['title']."')");
        
        if($insert == true){
        
        $r = 'Gespeichert.';
        
        }else{
        
        $r = 'Nicht gespeichert.';
        
        }

    $ret = Array("result" => $r);
	
    echo json_encode($ret);

Hat jemand ne Ahnung, was ich falsch mache.

 

[erik s.]

Hi,

sagt die Fehlerkonsole was dazu?
Um das eigentliche Abschicken des Formulars zu unterbinden, gibt es mehrere Wege. Einer davon ist, ans Ende des submit-Handlers ein return false; zu setzen:

$(document).ready(function(){
  $("#add").submit( function () {
    $.ajax({
      url: 'process.php',
      type: 'post',
      dataType: 'json',
      data: {
        'id': $('#id').val(),
        'title': $('#title').val()
      },
      success: function(data) {
        $('#results').html(data.result);
      }
    });
    
    return false;
  });
});