представления формы с помощью Jquery

Я использую JQuery + JSON комбинированную что-то вроде этого:представления формы с помощью Jquery

test.php:

<form action='_test.php' method='post' class='ajaxform'> 
<input type='text' name='txt' value='Test Text'> 
<input type='submit' value='submit'> 
</form> 

<div id='testDiv'></div>

_test.php:

<?php 
     // Code here to deal with your form submitted data. 
     $arr = array('testDiv' => 'Form is successfully submitted.'); 
     echo json_encode($arr); 
?>

jsFile .js:

jQuery(document).ready(function(){ 

    jQuery('.ajaxform').submit(function() { 

     $.ajax({ 
      url  : $(this).attr('action'), 
      type : $(this).attr('method'), 
      dataType: 'json', 
      data : $(this).serialize(), 
      success : function(data) { 
         for(var id in data) { 
          jQuery('#' + id).html(data[id]); 
         } 
         } 
     }); 

     return false; 
    }); 

});

Теперь, что я хочу, так это то, что при успешной форме, без обновления страницы, сообщение должно отображаться в div testDiv. Я надеялся, что этот сценарий поможет, но когда форма была отправлена, то страница переходит к .../_ test.php и отображает следующее -

{"testDiv":"Form is successfully submitted."}

Пожалуйста help.Thanks в advanvce

источник

2010-09-21 Ayush

У Вас есть ошибка в коде JavaScript. Откройте firebug и нажмите «тормозить на все ошибки», чтобы увидеть, что это за ошибка. Исправьте его, и вам должно быть хорошо идти. –

На вашей странице есть '_test.php', но в вашем описании написано' sms.php' ... что это? :) –

Я не знаю jquery; но я нигде не замечаю, что вы отменяете действие отправки (по умолчанию), поэтому я бы предположил, что он выполняет вашу функцию отправки, а затем продолжает и выполняет обычную отправку. –

-2

Почему бы не просто есть обычная кнопка с событием клика вместо кнопки отправки?

источник

2010-09-21 13:02:16

совсем не имеет значения –

-1

Ваш JSON строка немного не так, вам нужно будет его вернуть:

{"id":"testDiv","message":"Form is successfully submitted."}

Тогда в ответ:

 
for(var id in data) { 
    jQuery('#' + data.id).html(data.message); 
}

источник

2010-09-21 13:03:45 Alex

Неправильно, что у него есть работы, он перебирает пары свойств/значений. Даже если это было неправильно, это не вызвало бы поведения в вопросе. –

D'oh! Это научит меня думать во вторник днем! – Alex

Это только меня или делает этот сценарий работы для кто-нибудь еще? У меня есть три файла, как описано выше, с добавлением нормального doctype и ядра jquery в голове в файле test.php, и я получаю сообщение об успешном завершении без перенаправления страницы.

источник

2010-09-21 13:17:20

перейдите по адресу http: //174.132.194.155/~ kunal17/devbuzzr/deals/5-discount-on-all-guitars и нажмите «grab coupon». затем введите число, подобное 919262005226 ... посмотрите, что произойдет .. – Ayush

Я думаю, что, возможно, у меня есть это или, по крайней мере, у меня такие же симптомы.

Вам необходимо проверить и убедиться, что вы загрузили файл jquery в теге скрипта до jsFile.js тега скрипта.

BAD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
     "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title></title> 
    <script type="text/javascript" src="jsFile.js"></script> 
    <script type="text/javascript" src="../../_api/jquery-1.4.2.js"></script> 
</head> 
<body> 

<form action='_test.php' method='post' class='ajaxform'> 
    <label> 
     <input type='text' name='txt' value='Test Text'> 
    </label> 
    <input type='submit' value='submit'> 
</form> 

<div id='testDiv'></div> 

</body> 
</html>

ХОРОШО

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
     "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title></title> 
    <script type="text/javascript" src="../../_api/jquery-1.4.2.js"></script> 
    <script type="text/javascript" src="jsFile.js"></script> 
</head> 
<body> 

<form action='_test.php' method='post' class='ajaxform'> 
    <label> 
     <input type='text' name='txt' value='Test Text'> 
    </label> 
    <input type='submit' value='submit'> 
</form> 

<div id='testDiv'></div> 

</body> 
</html>

источник

2010-09-22 17:45:47 Gutzofter

представления формы с помощью Jquery

ответ

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