Как сделать работу формы PHP в модальном

У меня есть этот HTML код для формы в модальном (используя Bootstrap)Как сделать работу формы PHP в модальном

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="edit-user-modal-label" aria-hidden="true"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 


      <form name="login_form" action="test.php" method="post" role="form"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Login</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="form-group">     
         <label for="email">Email:</label> 
         <input type="email" class="form-control" id="email" placeholder="Enter email">     
       </div> 

       <div class="form-group"> 
         <label for="pwd">Password:</label> 
         <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
       </div> 
      </div> 

      <div class="modal-footer"> 
       <input id="submit" name="submit" type="submit" value="Ok" class="btn btn-primary"> 
      </div> 

      </form> 

     </div> 

    </div> 
</div>

Проблема заключается в том, что при нажатии на кнопку «ОК», Безразлично Ничего не случилось. Это файл «test.php» (который я использовал только, чтобы увидеть, если он работал)

<html> 
    logged 
</html>

Я новичок в загрузчике, так что я не совсем уверен, почему он не работает как обычный HTML + Страница CSS. Спасибо за вашу помощь!

EDIT

Я нашел этот AJAX код, пытался addapt его в мой код, но до сих пор не работает.

$(document).ready(function() { 
      $("input#submit").click(function(){ 
       $.ajax({ 
        type: "POST", 
        url: "test.php", // 
        data: $('form.login_form').serialize(), 
        success: function(msg){ 
         $("#form-content").modal('hide'); 
        }, 
        error: function(){ 
         alert("failure"); 
        } 
       }); 
      }); 
     });

К настоящему времени, я просто хочу, чтобы перейти на другую страницу PHP после нажатия на кнопку (я не закодированы проверку логина пока).

источник

2015-10-20 user3587175

Показать фактический PHP-код, обрабатывающий форму, и показать любой JS-код, который у вас есть, который обрабатывает событие 'submit' для формы. Если вы хотите создать модульную форму, вы, вероятно, захотите обработать событие отправки, отмените отправку и выполните вызов AJAX вместо этого. PS: вам не нужен атрибут 'action =" test.php "': по умолчанию форма отправляется на текущий url –

Извините, я не понял, уже отредактировал мой пост. Я еще не работал AJAX, поэтому не уверен, правильно ли добавлен код. Спасибо, четыре вашего ответа! – user3587175

Вы должны действительно начать один шаг за раз, вы пытаетесь протолкнуть вещи себе в горло без четкого понимания основ.Лучше прогрессировать медленно, но устойчиво, чем быстро и с перерывами. – Onilol

Я вижу, что происходит, просто добавьте этот

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script> 
<script> 
    $(document).ready(function(){ 

    $('#submit').click(function(){ 

     $('#loginModal').modal('show'); 
    }); 

</script>

источник

2015-10-20 12:32:29

Как вы можете «видеть, что происходит» _? OP не публиковал JS-код и не показывал PHP-код, который, по-видимому, обрабатывает форму. –

Извините, я добавил в список вопросов для получения более подробной информации. Это не то, что я хотел сделать, но все равно спасибо за вашу помощь! – user3587175

@Elias, когда я отправил свой ответ, не было javascript ... Извините. –

Наиболее очевидная часть вашей проблемы в том, что, в то время как вы выполняете вызов AJAX, you'r фактически не предотвратить форму от представления. Вы не хотите отправлять страницу, а вместо этого ждать завершения запроса ajax и обрабатывать ответ в своем обратном вызове. Так как вы используете JQuery, самый простой способ сделать это, чтобы вернуть false от обратного вызова события:

$(document).ready(function() { 
      $("input#submit").click(function(){ 
       $.ajax({ 
        type: "POST", 
        url: "test.php", // 
        data: $('form.login_form').serialize(), 
        success: function(msg){ 
         $("#form-content").modal('hide'); 
        }, 
        error: function(){ 
         alert("failure"); 
        } 
       }); 
       return false;//stop form submission 
      }); 
     });

JQuery-х return false является эквивалентом ваниль-JS-х:

eventObj.preventDefault();//do not handle event in a normal fashion 
eventObj.stopPropagation();//do not propagate event to other handlers

Сказав, что, ваш переключатель и привязка событий могут быть лучше, я установил идентификатор для формы (<form id='modalformid'>) и привязал submit событие (которое может быть вызвано пользователем, нажимая enter), а затем привяжите обработчик следующим образом:

$('#modalformid').on('submit', function() 
{ 
    var frm = $(this);//reference to the form that is submitted 
    $.ajax({ 
     type: "POST", 
     url: "test.php", 
     data: frm.serialize(),//serialize correct form 
     success: function(msg) { 
      //the response from the server is in msg here! 
      $("#form-content").modal('hide'); 
     }, 
     error: function(){ 
      alert("failure"); 
     } 
    });//your ajax call here 
    return false; 
});

Я бы также проверить консоль, чтобы убедиться, что вы в том числе всех зависимостей JS (т.е. JQuery) перед тем вы звоните $(document).ready() и дважды проверять наличие конфликтов имен (в консоли console.log($) и console.log($ === jQuery)).
И, наконец, переключатель $('form.login_form') не надежный: идентификаторы по определению уникальны. Классы - нет. используя $('form.login_form'), теоретически можно совместить несколько форм. эмпирическое правило: классы полезны для правил CSS, а не только для обработки событий JS (делегирование), если вы хотите обрабатывать одну форму/элемент: используйте идентификатор.

источник

2015-10-20 12:48:49

Не работает :(Я также удалил атрибуты «действие» и «метод» из кода формы, но все еще не работал. Я добавил тег

Как сделать работу формы PHP в модальном

ответ

Смежные вопросы