Кто-нибудь знает о хорошем учебнике, в котором объясняется, как отправить форму из пения? У меня есть несколько просмотров страниц в моем html-коде, и одна из них – это форма с тремя полями (Name, Email и Message), которую я пытаюсь достичь, – это отправить данные формы через Ajax, не используя непосредственно process.php.
Это форма:
<section class="hidden" id="view-forms"> <header> <button class="left arrow" data-vin="view-home" data-sd="sr"> <div class="label">All Contacts</div> </button> <h1>Message</h1> <button class="right bold green" data-vin="view-done" data-sd="sl"> <div class="label">Send</div> </button> </header> <div class="scrollMask"></div> <div class="scrollWrap"> <div class="scroll"> <div class="content"> <input placeholder="Name" type="text" /> <input placeholder="Email" type="email" /> <textarea placeholder="Your Message" rows="5"></textarea> </div> </div> </div> </section> Это страница подтверждения после отправки сообщения:
<section class="hidden" id="view-done"> <header> <h1>That's it!</h1> <button class="right bold" data-vin="view-home" data-sd="popout"> <div class="label">Done</div> </button> </header> <div class="scrollMask"></div> <div class="scrollWrap"> <div class="scroll"> <div class="content"> <h2>Message sent!</h2> </div> </div> </div> </section>
Пожалуйста, дайте мне знать, если кто-то из вас уже реализовал что-то подобное. Спасибо.
Вы можете отправить на ту же страницу PHP. Вам просто нужен оператор if, чтобы отделить код, который генерирует страницу, из кода, который отправляет вашу форму. При этом вам, вероятно, следует просто создать второй PHP-скрипт для обработки формы. Если вы хотите реализовать его с помощью оператора if, я добавлю часть информации в ваш запрос GET / POST, который будет выглядеть примерно так:
'formSubmission='+true
Хорошо, для более подробной информации, посмотрите на этот урок , он перебирает основы. В вашем случае попробуйте это (ПРИМЕЧАНИЕ: я не тестировал это). Кроме того, добавьте идентификатор к каждому из элементов (я предположил, что они будут такими же, как ваши текущие атрибуты имени, и что текстовое поле будет иметь идентификационное сообщение).
function()submitForm(){ var name = document.getElementById('name').value; var email = document.getElementById('email').value; var message = document.getElementById('message').value; var requestData = 'name='+name+'&email='+email+'&message='+message+'&formSubmission='+true; //I'm assuming that you're using a POST request (this depends on the length of the message var AJAXObj = new XMLHttpRequest(); //don't forget to replace currentURL.php with the name of the page that will handle the submission AJAXObj.open('POST', 'currentURL.php', true); AJAXObj.setRequestHeader('Content-type','application/x-www-form-urlencoded'); AJAXObj.send(requestData); AJAXObj.onreadystatechange = function (){ var AJAXObj = event.target; if(AJAXObj.readyState == 4 && AJAXObj.status == 200){ var responseText = AJAXObj.responseText; //things that you might want to do with your responseText } } }
Теперь вот PHP:
if(isset($_POST['formSubmission'])){ $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; //code that handles the form data that has now been passed to PHP }
Просто подумайте, не отправляйте на ту же страницу PHP, на которой вы сейчас находитесь. Создайте новый файл и вставьте в него код. Это будет чище.