javascript — преобразование контактной формы PHP в AJAX

Question

javascript — преобразование контактной формы PHP в AJAX

В настоящее время я использую смс-сервис twilio для отправки сообщения пользователям с подробностями. Форма отправляется и доставляется при отправке с использованием метода действия и публикации во время отправки. Я хотел бы изменить это на отправленную форму AJAX. Есть идеи, пожалуйста? Ниже я включил некоторый код того, как он работает в настоящее время:

**** Форма обратной связи ****

<form action="sendsms.php" method="post" id="sms">
<input type="text" name="name" id="name" value="Sam"/>
<input type="phone" name="phone" id="phone" value="0000000000"/>
<textarea name="message" style="width: 500px; height: 300px;"> Test Message</textarea>
<input type='submit' value='submit'/>
</form>

**** PHP ****

<?php
if($_POST)
{

require "Services/Twilio.php";$AccountSid = "ACaa1c********";
$AuthToken = "ae6c269********";$client = new Services_Twilio($AccountSid, $AuthToken);

$from = '+44**********';
$name = $_POST['name'];
$phone = $_POST['phone'];

// Send a new outgoing SMS */
$body = htmlspecialchars($_POST['message'].$name );
$client->account->sms_messages->create($from, $phone, $body );
echo "Sent message to $name";
}
?>

**** AJAX ****

$('#sms').submit(function(event) {
// Stop the browser from submitting the form.
event.preventDefault();
//get input field values
var user_name       = $('input[name=name]').val();
var user_phone      = $('input[name=phone]').val();
var user_message    = $('textarea[name=message]').val();

var proceed = true;

if(proceed)
{
//data to be sent to server
post_data = {'userName':user_name, 'userPhone':user_phone, 'userMessage':user_message};

//Ajax post data to server
$.post('sendsms.php', post_data, function(data){

alert(data);}).fail(function(err) {  //load any error data
$("body").hide().html('<div class="error">'+err.statusText+'</div>').slideDown();
});
}
return true;
});

0

ajax forms javascript php twilio

Решение

Другие решения

 $(function(){
$('#sms').submit(function(e){
e.preventDefault();

var d = $(this).serialize();

$.ajax({
type        :       'post',
url         :       'sendsms.php',
data        :       d
}).done(function(data){
alert('done');
}).fail(function(x,y,z){
alert('error');
});

});
});

это так просто.

2

Источник

Accepted Answer

Используйте jquery для получения действия и данных из формы напрямую, с attr('action') а также serialize():

 $(function(){
$('#sms').submit(function(event) {
event.preventDefault();

$.post($(this).attr('action'), $(this).serialize(), function(data){
console.log(data); //alert(data);
}).fail(function(err){
console.log(err); //alert(err);
});
});
});

Как уже отмечалось, оповещение — плохой метод отладки.
Все современные браузеры имеют консоль javascript (Ctrl + Shift + J в google chrome или правый клик> осмотреть элемент, чтобы вызвать полнофункциональные инструменты разработки).
console.log() отправит ваши данные на консоль. Другие ошибки JavaScript также будут отображаться.

2