Verzend ajax-formulier en blijf op dezelfde pagina werkt niet

Het formulier wordt verzonden en blijft niet op dezelfde pagina staan vanwege het actiekenmerk op het formulier en de normale verzendknop.

Wat leidt tot uw .submit() methode inclusief .preventDefault() wordt waarschijnlijk ook niet geïnterpreteerd nadat de html is geladen.

Je zou iets in de trant van dit kunnen doen:

<html>
  ...
  <body>
  ...
    <form id="formA" action="test.php" method="post" enctype="multipart/form-data">
      <input id="commentData" name="commentData" type="text" />
      <input type="submit" value="toDb" id="toDB" name="toDB" />
    </form>
  ...
  </body>
  <script>
   ...script here...
  </script>
 </html>

En het javascript kan iets zijn in de trant van:

( function( $ )
  {
    var submit = $( 'input[id=toDB]' );
    $( submit ).on
    (
      'click',
      function( event )
      {
        event.preventDefault();
        var form = $( this ).parent();

        // Get form fields
        var data = $( form ).serializeArray(), obj = {}, j = 0;
        for( var i = 0; i < data.length; i++ )
        {
          if( data[i].name in obj )                                                                  
          {
            var key = data[i].name + '_' + j;
            obj[key] = data[i].value;
            j++;
          }
          else
          {
            obj[data[i].name] = data[i].value;
          }
        };

        // Make AJAX request
        $.ajax
        (
          {   
            url: $( form ).attr( 'action' ),    
            type: 'POST',
            data: 'toDB=' + JSON.stringify( obj ),    
            success: function( data, textStatus, xhr )
            {
              // Do something with data?
              ...    
              alert( 'ok' );    
            }
          }
        );
      }
    );
  }( jQuery )
);

Zie de jsfiddle voor jezelf.

Je kunt zien dat het werkt omdat je een consolefout krijgt dat de aanvraagbestemming niet is gevonden - 404 - hoewel de pagina niet wordt vernieuwd, blijf je precies waar je bent ... met een goede pagina om het in te dienen, werkt het volledig.

BEWERKEN

Ik heb de instelling van 'data' gewijzigd in de ajax() aanroepen zodat de formuliervelden worden ingesteld als een json-tekenreeks voor een POST-variabele [toDB].

Dus in je PHP zou je doen:

$datas = json_decode( $_POST['toDB'], true );

En nu je $datas variabele is een associatieve array die alle namen en waarden van uw formuliervelden bevat. Ik ben niet 100% op deze volgende verklaring, maar je moet misschien PHP's stripslashes() gebruiken methode op de POSTED-gegevens voorafgaand aan het gebruik van json_decode()

d.w.z.:

//Connect to database server
mysql_connect( "localhost", "user", "" ) or die ( mysql_error() );
mysql_select_db( "test" ) or die( mysql_error() );
$strSQL = "SELECT * FROM comments order by RAND() LIMIT 5";
$rs = mysql_query( $strSQL );

if( !$rs ) 
{
  echo 'Could not run query ' . mysql_error();
  exit;
}

$dt1=date("Y-m-d");

if( isset( $_POST['toDB'] ) )
{
  $datas = json_decode( stripslashes( $_POST['toDB'] ), true );
  $dataA = $datas['commentData'];
  $sql = "INSERT INTO comments( id, comment, datum )VALUES( DEFAULT, '" . $dataA . "', '" . $dt1 . "' );";
  $result=mysql_query( $sql );
}
mysql_close();

Ik hoop dat dat helpt