Ajax insert werkt niet

Door Snelle Jaap op 06-03-2014 10:55 gewijzigd op 06-03-2014 12:10

1.673 views

Morge,

Ik heb Ajax weer even nodig, is weer een tijd terug dat ik het heb gebruikt, dus ik dacht ik doe even een tutorial. Maar ik krijg hem niet werkend, alles insert maar hij blijft verversen.

Ja ik weet dat het mysql is, PDO/mysqli is beter etc etc, maar dat komt allemaal later wel, ik wil eerst even ophelderen hoe dat Ajax werkt.


index.php
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
        <form id="myForm" action="action1.php" method="post">
        Name: <input type="text" name="name" /><br />
        Age : <input type="text" name="age" /><br />
        <button id="sub">Save</button>
        </form>
    </body>
</html>

script.js


$("#sub").click( function() {
 $.post( $("#myForm").attr("action"), 
         $("#myForm :input").serializeArray(), 
         function(info){ $("#result").html(info); 
   });
 clearInput();
});
 
$("#myForm").submit( function() {
  return false;	
});

function clearInput() {
	$("#myForm :input").each( function() {
	   $(this).val('');
	});
}

<?php
include_once('includes/connection.php');

$name = $_POST['name'];
$age = $_POST['age'];

if(mysql_query("INSERT INTO user VALUES('$name', '$age')"))
echo "Successfully Inserted";
else
echo "Insertion Failed";

?>

Aangepaste code na reactie:


$("#sub").click( function() {
 (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
 $.post( $("#myForm").attr("action"), 
         $("#myForm :input").serializeArray(), 
         function(info){ $("#result").html(info); 
   });
 clearInput();
});

function clearInput() {
	$("#myForm :input").each( function() {
	   $(this).val('');
	});
}

Mich

06-03-2014 11:10

Met verversen bedoel je dat het formulier gepost wordt?
hiervoor de volgende regel in je click function plaatsen en event meesturen

(event.preventDefault) ? event.preventDefault() : event.returnValue = false;

regel 9-11 kunnen dan weg.

Snelle Jaap

06-03-2014 11:35

Ik wil wel dat het formulier gepost wordt (insert in de database) maar niet dat hij ververst, vandaar dat ik Ajax nodig heb.

Mich

06-03-2014 11:36

Ja dat doe je met $.post zoals je nu hebt,maar daarom moet je wel voorkomen dat de post request door je browser wordt uitgevoerd. Dat kan dus met preventDefault()

Snelle Jaap

06-03-2014 11:55

Hij refresht hem alsnog, ligt dat niet aan die knop ofzo?

Mich

06-03-2014 12:02 gewijzigd op 06-03-2014 12:02

Bugje waarschijnlijk. Wat zegt de console log? Wat als je wat delen van de code even weg haalt? Wat heb je nu?

Snelle Jaap

06-03-2014 12:10

Ik heb de code aangepast zoals in je vorige post (heb hem nog even in de post gezet onderaan), de consolelog zegt niks (ik gebruik chrome logger)

Toevoeging op 06/03/2014 13:02:21:

?

Erwin H

06-03-2014 13:12

In jquery kan je dat veel eenvoudiger oplossen volgens mij. De meeste events geven het event object mee in de handler aanroep. Op dat object kan je de prevent default aanroepen.
[code lang=js]
$("#sub").click( function(e) {
e.preventDefault();
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){ $("#result").html(info);
});
clearInput();
});
[/code]

Snelle Jaap

06-03-2014 13:13

Bedankt, maar hij blijft hem nog steeds refreshen, heeft dat er niet mee te maken dat hij de knop ziet als een submit? Moet dat niet worden input type="button"?

Erwin H

06-03-2014 13:19

Nee. Omdat je de preventDefault aanroept gaat het event niet verder naar het form, ongeacht wat voor type button. Alleen als jij in code het form nog een keer submit, dan gebeurt dat wel. In je originele code had je dat staan, als het form nu nog steeds submit lijkt me dat dat ergens is achtergebleven.

Mich

06-03-2014 13:19

in de function moet je inderdaad event nog mee geven zoals Erwin aangeeft.
Nee of het een submit is maakt niet uit.

Probeer eens alleen


$("#sub").click( function(event) {
 (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
});

en anders eens (denk niet dat t uitmaakt)


$("#sub").on('click', function(event) {
 (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
});

Reageren

Inloggen om te reageren