2013-08-10 5 views
0

Я не могу загрузить внешний файл при использовании AJAX jQuery. Я хочу использовать jQuery AJAX для всплывания формы, а затем проверки, ввода данных в MySQL. но начиная с простой функции AJAX. Пожалуйста, дайте мне знать, где я неправильноФорма с использованием AJAX JQUERY PHP не работает

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" media="all" href="test_style.css"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> 
     <script> 
     $(document).ready(function(){ 
      $("#ajax-contact-form").submit(function(){ 
       var str = $(this).serialize(); 
       $.ajax({ 
        type: "POST", 
        url:"contact.php", 
        data: str, 
        success:function(result) { 
         $("#div1").html(result); 
        } 
       }); 
      }); 
     }); 
     </script> 
    </head> 
    <body> 
     <div id="contact_form"> 
      <form id="ajax-contact-form" name="contact" action=""> 
       <fieldset> 
        <label for="name" id="name_label">Name</label> 
        <input type="text" name="name" id="name" size="30" value="" class="text-input"/> 
        <label class="error" for="name" id="name_error">This field is required.</label> 
        <input class="button" type="submit" name="submit" value="Send Message"> 
       </fieldset> 
      </form> 
     </div> 
    </body> 
</html> 

и contact.php файл является

<?php 
echo "Hello"; 
?> 
+0

какая ошибка вы получаете? и я не вижу элемента кнопки –

+0

Выглядит как код для копирования-вставки. Следовательно, вы не можете увидеть очевидное значение – asprin

+0

, существует разница между '

ответ

0
<!DOCTYPE html> 
<html> 
<head> 

<link rel="stylesheet" type="text/css" media="all" href="test_style.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 



<script> 
$(function() { 
$(".button").click(function() { 
    $.ajax({url:"contact.php",success:function(result){ 
     $("#div1").html(result); 
    }}); 
    return false; 
    }); 
}); 
</script> 


</head> 
<body> 

<div id="contact_form"> 
<form name="contact" action=""> 
<fieldset> 
    <label for="name" id="name_label">Name</label> 
    <input type="text" name="name" id="name" size="30" value="" class="text-input" /> 
<label class="error" for="name" id="name_error">This field is required.</label> 

<input type="submit" name="submit" class="button" id="submit_btn" value="Send" /> 
</fieldset> 
</form> 
</div> 
<div id="div1"> 
</div> 


</body> 
</html> 

Попробуйте это:

Что нужно быть исправлено:

1) Вы дублировали функцию onReady,

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

3) Там не было # div1 за результат, который будет отображаться в.

Будем надеяться, что это было полезно ... Happy кодирования!

+0

это идеально для меня – user2267055

0

Попробуйте с типом button типа

<input type="button" name="submit" class="button" id="submit_btn" value="Send" /> 

А также ваши оба скрипта такие же, использование либо DOM ready или $ (функция), например

<script> 
    $(document).ready(function(){ 
     $(".button").click(function(){ 
      $.ajax({url:"contact.php",success:function(result){ 
       $("#div1").html(result); 
      }}); 
     }); 
    }); 
</script> 

button Ваше имя класса, так что он будет представлен как .button и создать DIV с идентификатором div1 на вашей HTML странице

+0

спасибо gautam Я внесем изменения – user2267055

+0

Это работает .. ?? – Gautam3164

0
$("#div1").html(result); 

Используйте один DIV, который идентификатор div1 внутри вашей страницы, которые вы хотите, чтобы показать результат.

<div id="div1"></div> 
Смежные вопросы