Не удается прочитать значение скрытого свойства после ajax - PullRequest
Новая
       65

Не удается прочитать значение скрытого свойства после ajax

0 голосов
/ 20 апреля 2019

У моего веб-приложения есть

У меня есть сценарий ajax, который отправляет данные формы в другой div на основе входного тега, который есть у формы отправки.Работает хорошо, за исключением случаев, когда сценарию ajax нужно прочитать возвращенные данные ajax.

Сценарий: 

                        <script type="text/javascript">
                        $(document).ready(function() {
                         $("form").submit(function() {
                         // Getting the form ID
                         var  formID = $(this).attr('id');

//var hv = $('input[name=target]').val(); //this only worked for the 1st div, and hadn't worked for the 2nd div
//alert(hv);

//alert( $("#form2 input[name=target]").val() ); //works
alert ("formID at start is " + formID);
if (formID =="form1") {
    var hv = "div2";
    alert ("form id at 1st if is " + formID);
}
if (formID =="form2") {
    var hv = "response";
}
if (formID =="contact3") {
    var hv = "div1";
}

//alert (hv);
                         var formDetails = $('#'+formID);
                         $.ajax({
                         type: "POST",
                         url: 'file.php',
                         data: formDetails.serialize(),
                         success: function (data) { 
                         // Inserting html into the result div
                         $('#'+hv).html(data);
                         },
                         error: function(jqXHR, text, error){
                                    // Displaying if there are any errors
                                     $('#'+hv).html(error);           
                                }
                            });
                         return false;
                         });
                        });
                        </script>

Код HTML: 

<div id="div1" style="background-color:lightblue">
    <form  name="contact1" action="contact.php" method="POST" id="form1">    
 <div>Name: <input type="text" name="name" id="name"   required /></div> 
 <div>Email: <input type="email" name="email" id="email"  required /></div>
 <input type="hidden" name="target" value="form2">
 <div><input type="submit" name="submit" value="Submit" /></div> 
</form>

    <p>This is Div FORM1</p>
</div>

<hr>


<div id="div2" style="background-color:yellow">
<form name="contact2" action="contact.php" method="POST" id="form2">    
 <div>Name: <input type="text" name="name"  required /></div> 
 <div>Message: <input type="text" name="message"  required /></div>
 <input type="hidden" name="target" value="response">
  <div><input type="submit" name="submit" value="Submit" /></div> 
</form>
    <p>This is DIV form 2</p>
</div> 




<div id="response" style="background-color:brown"><p>This is DIV Response. </p><p>This is DIV Response. </p><p>This is DIV Response. </p><p>This is DIV Response. </p><p>This is DIV Response. </p><p>This is DIV Response. </p></div>

и файл.php file 

<?php

if(isset($_POST['email'])){

 echo "Contact Form 1 Submitted Successfully";
}
elseif (isset($_POST['message'])){
 echo "Contact Form 2 Submitted Successfully";
}
elseif (isset($_POST['message'])){
 echo "Contact Form 3 in RESPONSE Submitted Successfully";
}
?>


<form name="contact3" action="contact.php" method="POST" id="contact3">    
 <div>new content: <input type="text" name="contact3"  required /></div> 
 <div>New content <input type="text" name="message3"  required /></div>
 <input type="hidden" name="target" value="form1">
 <div><input type="submit" name="submit" value="Submit" /></div> 
</form>

Итак, в основном, когда я нажимаю кнопку отправки для form2, div ответа обновляется.Но когда я нажимаю на загруженное содержимое из file.php, скрипт jquery не работает.Браузер отправляет весь экран в файл file.php.Пост Ajax не работает!

Бьет меня !!!!!

1 Ответ

0 голосов
/ 20 апреля 2019

Новая форма из файла PHP не работает, потому что она добавляется динамически, вам нужно изменить код так, чтобы он был следующим:

Изменение 

$("form").submit(function() {

К 

$(document).on('submit', 'form', function() {
...