Submit форма без презареждане и показване на съобщение ajax

vinsbg

Registered
Както е ясно, че съм доста зле с ajax-a и js, като цяло. Затова отново моля за помощ, че се оплетох бая.

Искам след събмит на формата да си изпълни добавянето в базата и да покаже съобщение за успех. Ето, какво измайсторих за момента, но освен, че рефрешва страницата, то нищо и не добавя в базата. Сигурен съм, че проблема е в javascrpta, понеже пробвах директно action на формата да е към Post.php и тогава работи.
Код:
    $(".open2").click(function() {

    function submitForm()
    {
        var data = $("#basicform").serialize();

        $.ajax({

            type : 'POST',
            url  : 'post.php',
            data : data,

            success :  function(data)
            {

                if(data=="success")
                {

		        $("#loader").show();
		         setTimeout(function(){
		           $("#basicform").html('<img src="assets/images/logo3.png" style="width:450px;height:250px;margin-left: 30%;"><h2>Awesome! We have received your details! Sit tight while we prepare your itinerary!</h2>');
		         }, 1000);
		        return false;

                }

            }
        });
        return false;
    }
    /* form submit */	
    });
това е формата
Код:
    <form name="basicform" id="basicform" method="post" action="" role="form">
        <div class="panel panel-primary setup-content" id="step-1">
            <div class="panel-heading">
                 <h3 class="panel-title">Tell us about yourself</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="control-label">Your Name *</label>
                    <input maxlength="100" type="text" name="entry_name" required="required" class="form-control" placeholder="" />
                </div>              
                <button class="btn btn-primary nextBtn pull-right open1" type="button">Next</button>
            </div>
        </div>
        
        
        
        <div class="panel panel-primary setup-content" id="step-2">
            <div class="panel-heading">
                 <h3 class="panel-title">Final Step!</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="control-label">By submitting the form , you agree to the Terms & Conditions and Privacy Policy</label>

                    <div class="editable" disabled><?php include 'privandeerms.php'; ?></div>
                </div>

                <button class="btn btn-danger pull-left" type="reset" >I Don’t Agree</button>
                <button class="btn btn-success pull-right open2" type="submit" name="add" id="add">I agree. I’m ready to get my itinerary!</button>
                <img src="assets/images/spinner.gif" alt="" id="loader" style="display: none; width:32px;height:32px;">
                
            </div>
        </div>
    </form>
и php-то
Код:
if(isset($_POST)){
	
	$entry_name = $_POST['entry_name'];

		try {

                       $stmt = $pdo->prepare('INSERT INTO entries (entry_name)  VALUES (:entry_name)');
           		$stmt->bindParam(":entry_name",$entry_name);

		            if($stmt->execute())
		            {
		                echo "success";
		            }
		//else catch the exception and show the error.
		} catch(PDOException $e) {
		    var_dump ($e->getMessage());
		    exit;
		}
	
}
 
Първо имаш функция във функцията :D Защо го правиш с ajax като ти е труден?


Промени:
Код:
$(".open2").click(function() {
  function submitForm() {

На само:
Код:
$(".open2").click(function() {
});

И тъй като .open2 ти е submit бутон, формата ще се събмитне нищо, че имашclick евент закачен за бутона.

За това трябва да спреш изпълнението на събмита.

$(".open2").click(function(e) {
e.preventDefault();
});

Другото, което не разбирам е защо имаш loader след като получиш резултата и то с Timeout :D
 
Благодаря, но същата работа. Пак само рефрешва страницата и отива в началото и без да запази нищо в базата.

А искам да е с ajax, за да стои на формата заедно със съощението след събмит
 
Оправих го. Ето целия скрипт
PHP:
    $("#basicform").submit(function ()
    {        
        var data = $(this).serialize(); 
        
        $.ajax({
        type: "POST",
        url: "post.php",
        data: data,
             success : function(data){
                $("#loader").show();
                   setTimeout(function(){
                   $('#basicform').html(data);
               }, 1000);
	        	      
            
             }
        });
        return false;
    });
и php-то, което връща
Код:
if($stmt->execute()) {
	echo '<img src="assets/images/logo3.png" style="width:450px;height:250px;margin-left: 30%;"><h2>Awesome!</h2>';		           
}

А таймаута е за ... красота, че много бързо се появява това :D :D
 
Промени си подхода на изпращане на данните от PHP.
За мен правилния начин е да изпратиш JSON с нужните данни, който след това да парснеш в JavaScript.

Като например. Тази картинка(по-точно тага) е ужасно грешно да я изпращаш по този начин. Някой ден така ще ти начупи кода, че ще се чудиш от къде ти е дошло.
Ако винаги е тази картинка, по-добре връщай отговор TRUE/FALSE и създавай/изтривай или показвай/скривай картинката чрез JavaScript.
 

Горе