Прежде всего, спасибо за вашу любезную помощь.
Я попробовал почти все, что я нашел в stackoverflow, но я не могу заставить это работать.
Я создал форму для отправки текста веб-мастеру (вместо электронной почты). Поэтому у меня есть файл index.php
<style> .result{ padding: 20px; font-size: 16px; background-color: #ccc; color: #fff; } </style> <form id="contact-form" method="post"> <div> <input type="text" id="fullname" name="fullname" value="" placeholder="Name" required="required" autofocus="autofocus" autocomplete="off" /> </div> <div> <input type="email" id="email" name="email" value="" placeholder="example@yourdomain.com" required="required" autocomplete="off" /> </div> <div> <textarea id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="off" ></textarea> </div> <div> <input type="submit" value="Submit" id="submit-button" name="submit" /> *indicates a required field </div> </form> <div class="result"></div> И это мой jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $('#contact-form').submit(function() { $.ajax({ type:"POST", url:"sendtext.php", data: $("#contact-form").serialize(), success: function(response){$(".result").appendTo(response)} }); //return false; }); }); </script>
Сценарий не работает. Если я положу action = sendtext.php в <form> он будет работать отлично, но мне понадобится sendtext.php и echo -сообщение.
Я хочу показать echo в <div class="result"></div> .
Еще раз спасибо за вашу помощь.
UPDATE # 1 После нескольких комментариев …
это то, что у меня есть до сих пор …
<script> $(document).ready(function(){ $('#contact-form').submit(function(e) { e.preventDefault(); $.ajax({ type:"POST", url:"sendtext.php", data: $("#contact-form").serialize(), success: function(response){$(".result").append(response)} }); //return false; }); }); </script>
Обновление 2
Прочитав все комментарии и попробовав разные варианты, пока ничего не получилось! Я сделал то, что предложил @guy, и это сработало, но я хочу использовать form и submit .
Опять же, я ценю все ваше время, которое вы ставите, чтобы помочь мне. Спасибо!
Проблема заключается в том, что когда вы добавляете sendText.php в качестве действия, ваш jQuery будет выполняться, потому что форма отправляется так, чтобы она работала … НО она также перенесет вас на страницу поля действия формы. То, что вы хотите сделать, это не вызов submit, а просто сделайте кнопку вместо этого и попросите jQuery прослушать щелчок по этой кнопке.
Вместо:
<input type="submit" value="Submit" id="submit-button" name="submit" />
Измените его на обычную кнопку:
<button id="submit-button">Submit</button>
Затем в вашем jQuery измените строку
$('#contact-form').submit(function() {
в
$('#submit-button').click(function() {
Кроме того, измените appendTo на html, а затем результат должен появиться в вашем div.
—-РЕДАКТИРОВАТЬ—-
Это сработало для меня:
<style> .result{ padding: 20px; font-size: 16px; background-color: #ccc; color: #fff; } </style> <div id="contact-form" > <div> <input type="text" id="fullname" name="fullname" value="" placeholder="Name" required="required" autofocus="autofocus" autocomplete="off" /> </div> <div> <input type="email" id="email" name="email" value="" placeholder="example@yourdomain.com" required="required" autocomplete="off" /> </div> <div> <textarea id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="off" ></textarea> </div> <div> <button id="submit-button">Submit</button> *indicates a required field </div> </div> <div class="result"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $('#submit-button').click(function() { $.ajax({ type:"post", url:"sendText.php", data: $("#contact-form").serialize(), success: function(response){ $(".result").html(response); } }); }); }); </script>
Используйте функцию preventDefault (), чтобы форма не выполняла перенаправление при отправке. После этого используйте append () вместо appendTo ()
$ ('# contact-form'). submit (function (e) {
e.preventDefault ();
Изменить:
$(".result").appendTo(response)
чтобы:
$(".result").append(response)
Можете ли вы попробовать это,
$(".result").html(response);
вместо
$(".result").appendTo(response)
Jaavscript:
$(document).ready(function(){ $('#contact-form').submit(function() { $.ajax({ type:"POST", url:"sendtext.php", data: $("#contact-form").serialize(), success: function(response){ $(".result").html(response); } }); return false; }); });
Ваш appendTo в успешном обратном appendTo назад. В вашем примере вы пытаетесь добавить элемент .result к переменной response . Должно быть:
success: function(response){ response.appendTo(".result")}