2012-05-12 2 views
-7

Можно создать дубликат:
Submit form without page reloadingКак отправить форму без перезагрузки?

Привет Мне нужно отправить форму без перезагрузки, как я могу сделать это с помощью Javascript или кадров?

Благодаря

+2

1) Ajax. 2) Добавьте 'iframe' с именем' frameName' и установите атрибут 'target =" frameName "' для формирования. – VisioN

+0

Вы можете использовать следующий плагин jquery: https://github.com/jinujd/jQuery-Async-Form –

ответ

4

Вы можете сделать это с помощью JQuery: http://jquery.com/

Сво Javascript рамки и один из методов, которые вы можете использовать, чтобы сделать этот вид вещи:

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

    var ajaxURL = '/ajax/saveAccountSettings.php'; 

    $.ajax({ 
     type: 'POST', 
     url: ajaxURL, 
     data: { 
      username: $('#accountForm #username').val() 
     }, 
     success: function(data){ 

         //Do something 

     } 
    }); 

    return false; 

}); 

Возможно стоит чтение, как использовать jquery сначала, хотя ...

+1

Спасибо! Трудно ли учиться? что-то новое для веб-материала ... –

+0

Эй, нет, на самом деле это довольно легко, как только вы получите концепцию, jQuery довольно эпический, может сделать намного больше, чем просто это. Просто прочитайте документацию, и вы поймете, что вы можете с ней сделать. –

0

Я бы порекомендовал JavaScript над попыткой сделать что-либо с iframes. То, что вы ищете, это XHRRequest, самым простым решением было бы использовать JQuery. Я собирался написать быстрый пример, но this tutorial, кажется, покрывает шаги довольно хорошо.

+0

Спасибо, конечно, проверьте! –

0

Вы можете использовать jQuery и jQuery Form Plugin.

Функция jQuery Form Plugin's ajaxForm позволяет вам «захватить» форму в вашем HTML. Рассмотрим этот пример:

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 

    <script> 
     // wait for the DOM to be loaded 
     $(document).ready(function() { 
      // bind 'myForm' and provide a simple callback function 
      $('#myForm').ajaxForm(function() { 
       alert("Thank you for your comment!"); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="myForm" action="comment.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form> 
</body> 
</html> 

Дополнительную информацию см. На сайте плагина. Он поддерживает различные функции обратного вызова для обработки ошибок и т. Д.

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