- Submit форма без презареждане и показване на съобщение ajax
WT форуми -> PHP MySQL ASP.NET -> Submit форма без презареждане и показване на съобщение ajax
Създайте нова тема Напишете отговор 
Автор Съобщение
vinsbg
Редовен
Редовен

Регистриран на: 28/01/2009 2:21 pm

Support: 51
Bonus: 87
Мнения: 2564
Мнение 07/07/2017 10:50 am     Submit форма без презареждане и показване на съобщение ajax Отговорете с цитат


Както е ясно, че съм доста зле с 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;
      }
   
}
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
Fakeheal
Support
Support

Регистриран на: 17/04/2010 8:37 am

Support: 341
Bonus: 680
Мнения: 2563
Мнение 07/07/2017 11:01 am      Отговорете с цитат


Първо имаш функция във функцията Very Happy Защо го правиш с ajax като ти е труден?


Промени:

$(".open2").click(function() {
  function submitForm() {


На само:

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


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

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

Цитат:

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


Другото, което не разбирам е защо имаш loader след като получиш резултата и то с Timeout Very Happy
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
vinsbg
Редовен
Редовен

Регистриран на: 28/01/2009 2:21 pm

Support: 51
Bonus: 87
Мнения: 2564
Мнение 07/07/2017 11:13 am      Отговорете с цитат


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

А искам да е с ajax, за да стои на формата заедно със съощението след събмит
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
vinsbg
Редовен
Редовен

Регистриран на: 28/01/2009 2:21 pm

Support: 51
Bonus: 87
Мнения: 2564
Мнение 07/07/2017 12:01 pm      Отговорете с цитат


Оправих го. Ето целия скрипт
PHP code:

$("#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>';                 
}


А таймаута е за ... красота, че много бързо се появява това Very Happy Very Happy
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
Fakeheal
Support
Support

Регистриран на: 17/04/2010 8:37 am

Support: 341
Bonus: 680
Мнения: 2563
Мнение 07/07/2017 12:32 pm      Отговорете с цитат


Според мен хората търсят резултати, не красота. Smile
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Revelation
Турист
Турист

Регистриран на: 24/03/2013 3:23 pm

Support: 40
Bonus: 80
Мнения: 563
Мнение 07/07/2017 4:21 pm      Отговорете с цитат


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

Като например. Тази картинка(по-точно тага) е ужасно грешно да я изпращаш по този начин. Някой ден така ще ти начупи кода, че ще се чудиш от къде ти е дошло.
Ако винаги е тази картинка, по-добре връщай отговор TRUE/FALSE и създавай/изтривай или показвай/скривай картинката чрез JavaScript.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Покажи мнения от преди:    
Създайте нова тема   Напишете отговор    web-tourist.net Форуми -> PHP MySQL ASP.NET Часовете са според зоната GMT + 2 Часа
Страница 1 от 1


 
Идете на:  
Не Можете да пускате нови теми
Не Можете да отговаряте на темите
Не Можете да променяте съобщенията си
Не Можете да изтривате съобщенията си
Не Можете да гласувате в анкети