J'ai un formulaire sur une page appelée buyback.php et ce formulaire est au bas de la page. le codage du formulaire est : -

<div class="mktoForm" id="elqForm">
        <form id="elqForm" method="post" name="elqForm" action="buyback.php">
            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718959"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Contact_First_Name"><strong>First Name</strong> *:</label>
                <input type="text" required="required" id="Contact_First_Name" name="Contact_First_Name" autocomplete="off">
            </div>

            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718960"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Contact_Last_Name"><strong>Last Name</strong> *:</label>
                <input type="text" required="required" id="Contact_Last_Name" name="Contact_Last_Name" autocomplete="off">
            </div>

            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718961"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Contact_Email"><strong>Business Email</strong> *:</label>
                <input type="text" required="required" pattern="[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$" id="Contact_Email" name="Contact_Email" autocomplete="off">
            </div>

            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718962"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Job_Responsibility"><strong>Job Title</strong> *:</label>
                <input type="text" required="required" id="Job_Responsibility" name="Job_Responsibility" autocomplete="off">
            </div>

            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718963"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Company_Name"><strong>Company Name</strong> *:</label>
                <input type="text" required="required" id="Company_Name" name="Company_Name" autocomplete="off">
            </div>

            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718964"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Company_Country"><strong>Country</strong> *:</label>
                <input type="text" required="required" id="Company_Country" name="Company_Country" autocomplete="off">
            </div>

            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718965"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Company_State_Province"><strong>City</strong> *:</label>
                <input type="text" required="required" id="Company_State_Province" name="Company_State_Province" autocomplete="off">
            </div>

            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718966"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Contact_Phone_Number"><strong>Business Phone Number</strong> *:</label>
                <input type="text" required="required" id="Contact_Phone_Number" name="Contact_Phone_Number" autocomplete="off">
            </div>

            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718966"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Number_Of_Employees"><strong>Number of Employees</strong> *:</label>
                <select id="Number_Of_Employees" name="Number_Of_Employees">
                    <option value="bet10and49">Between 10 and 49</option>
                    <option value="bet50and99">Between 50 and 99</option>
                    <option value="bet100and199">Between 100 and 199</option>
                    <option value="ab200">Above 200</option>
                </select>
            </div>

            <div class="elqFormRow text-center">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718967"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <div class="elqFormRow text-center">
                    <input type="submit" id="elqFormSubmitBut" name="elqFormSubmitBut" class="orange_btn" value="Submit" checkrequired="true">
                </div>
            </div>
        </form>
        <div id="result"><?php if(isset($result)){ echo $result; } ?></div>
    </div>

Sous cette forme, il y a un div qui est <div id="result"></div> et je veux imprimer un message de réussite sous cette forme. actuellement, je lis les valeurs du champ et j'envoie l'e-mail par php en disant :-

if ($_POST['elqFormSubmitBut']) {
$Contact_First_Name = $_POST['Contact_First_Name'];
$Contact_Last_Name = $_POST['Contact_Last_Name'];
$Contact_Email = $_POST['Contact_Email'];
$Job_Responsibility = $_POST['Job_Responsibility'];
$Company_Name = $_POST['Company_Name'];
$Company_Country = $_POST['Company_Country'];
$Company_State_Province = $_POST['Company_State_Province'];
$Contact_Phone_Number = $_POST['Contact_Phone_Number'];
$Number_Of_Employees = $_POST['Number_Of_Employees'];

$to = "aaa@gmail.com";
$from = "bbb@gmail.com";

switch ($Number_Of_Employees) {
    case "bet10and49": $Number_Of_Employees = "Between 10 and 49"; break;
    case "bet50and99": $Number_Of_Employees = "Between 50 and 99"; break;
    case "bet100and199": $Number_Of_Employees = "Between 100 and 199"; break;
    case "ab200": $Number_Of_Employees = "Above 200"; break;
}

$message = "
  Contact First Name: $Contact_First_Name<br/>
  Contact Last Name: $Contact_Last_Name<br/>
  Contact Email: $Contact_Email<br/>
  Job Responsibility: $Job_Responsibility<br/>
  Company Name: $Company_Name<br/>
  City: $Company_State_Province<br/>
  Business Phone Number: $Contact_Phone_Number<br/>
  Number Of Employees: $Number_Of_Employees";

$subject = "New Message from the Buyback Form";
$header  = 'MIME-Version: 1.0' . "\r\n";
$header .= 'Content-type: text/html; charset=utf-8' . "\r\n";
$header .= 'From:'. $from  . " \r\n";

if (mail($to, $subject, $message, $header)) {
    $result = "Thank you for contacting us. We will reply you as soon as possible";
} else {
    $result = "Message Sending Failed, try again";
}

}

Et je fais écho à $result dans le div. comment puis-je écrire le code ajax équivalent pour envoyer l'e-mail et écrire le message de résultat dans ce div ? j'ai besoin de quelqu'un pour me dire exactement quoi écrire

1
shiddo 14 mars 2019 à 21:07

2 réponses

Meilleure réponse

Vous avez deux options, JavaScript vanille ou jQuery.

HTML

Vous n'avez pas besoin de modifications majeures de votre code HTML, il vous suffit d'ajouter un attribut onsubmit="return function()" avec la fonction que vous souhaitez appeler, dans ce cas nous utiliserons sendForm().

<form id="elqForm" method="post" name="elqForm" onsubmit="return sendForm()">

Javascript

Quelque part ailleurs dans votre code JavaScript, vous devez ajouter ces lignes :

JavaScript vanille:

function sendForm(){
   var form = document.querySelector('elqForm');
   var data = new FormData(form);
   const Http = new XMLHttpRequest();
   const url='path/to/your/phpfile.php';
   Http.open("POST", url);
   Http.send(data);
   Http.onreadystatechange = function () {
    if(Http.readyState === XMLHttpRequest.DONE && Http.status === 200) {
        document.getElementById("result").innerHTML = Http.responseText;
    }
};
return false;
}

Avec jQuery:

https://api.jquery.com/

function sendForm(){
   var data = $("#elqForm").serialize();
   $.ajax({
     type: "POST",
     url: "path/to/your/phpfile.php",
     data: data,
     success: function(response){
        $("#result").html(response);
     }
   });
}

PHP

Modifiez simplement ces lignes pour faire écho au texte que vous souhaitez afficher dans votre div.

if (mail($to, $subject, $message, $header)) {
    echo "Thank you for contacting us. We will reply you as soon as possible";
} else {
    echo "Message Sending Failed, try again";
}
1
k3llydev 14 mars 2019 à 19:09

Ce code a été testé par moi

De nombreuses modifications ont été apportées à votre code. Plus de fonctionnalités ajoutées, comme lorsqu'un message réussit ou échoue, les messages respectifs disparaîtront après un certain temps via ajax.

Ok voici ce que j'ai fait. J'envoie vos données en utilisant ajax comme vous le souhaitez via la méthode formData ().

Votre bouton de soumission est maintenant modifié ci-dessous.

<input type="submit" value="Submit" class="orange_btn" name="elqFormSubmitBut"/>

Votre résultat ajax div modifié ci-dessous supprimant ainsi le script php dessus

<div id="result"></div>

Sur le backend de votre serveur, votre réponse de résultat a également été modifiée comme ci-dessous

echo "<div  id='fadebox'>Thank you for contacting us. We will reply you as soon as possible</div>";

Vous pouvez voir l'identifiant ayant des attributs fadebox. C'est ce qui fait disparaître la réponse des résultats via ajax après un certain temps. Vous pouvez augmenter ou réduire le temps dans le code ajax.

Je suppose que vous devrez être en ligne pour tester correctement votre script à cause du courrier

<html>
<head>
<title>PHP AJAX Image Upload</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
    $("#elqForm").on('submit',(function(e) {
        e.preventDefault();
        $.ajax({
            url: "buyback.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data)
            {
            $("#result").html(data);

                                    $('#fadebox').delay(5000).fadeOut('slow');
            },
            error: function() 
            {
            }           
       });
    }));
});
</script>
</head>
<body>






<div class="mktoForm">
<form id="elqForm" action="buyback.php" method="post">
            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718959"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Contact_First_Name"><strong>First Name</strong> *:</label>
                <input type="text" required="required" id="Contact_First_Name" name="Contact_First_Name" autocomplete="off">
            </div>

            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718960"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Contact_Last_Name"><strong>Last Name</strong> *:</label>
                <input type="text" required="required" id="Contact_Last_Name" name="Contact_Last_Name" autocomplete="off">
            </div>

            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718961"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Contact_Email"><strong>Business Email</strong> *:</label>
                <input type="text" required="required" pattern="[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$" id="Contact_Email" name="Contact_Email" autocomplete="off">
            </div>

            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718962"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Job_Responsibility"><strong>Job Title</strong> *:</label>
                <input type="text" required="required" id="Job_Responsibility" name="Job_Responsibility" autocomplete="off">
            </div>

            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718963"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Company_Name"><strong>Company Name</strong> *:</label>
                <input type="text" required="required" id="Company_Name" name="Company_Name" autocomplete="off">
            </div>

            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718964"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Company_Country"><strong>Country</strong> *:</label>
                <input type="text" required="required" id="Company_Country" name="Company_Country" autocomplete="off">
            </div>

            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718965"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Company_State_Province"><strong>City</strong> *:</label>
                <input type="text" required="required" id="Company_State_Province" name="Company_State_Province" autocomplete="off">
            </div>

            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718966"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Contact_Phone_Number"><strong>Business Phone Number</strong> *:</label>
                <input type="text" required="required" id="Contact_Phone_Number" name="Contact_Phone_Number" autocomplete="off">
            </div>

            <div class="elqFormRow">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718966"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <label for="Number_Of_Employees"><strong>Number of Employees</strong> *:</label>
                <select id="Number_Of_Employees" name="Number_Of_Employees">
                    <option value="bet10and49">Between 10 and 49</option>
                    <option value="bet50and99">Between 50 and 99</option>
                    <option value="bet100and199">Between 100 and 199</option>
                    <option value="ab200">Above 200</option>
                </select>
            </div>

            <div class="elqFormRow text-center">
                <div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718967"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
                <div class="elqFormRow text-center">

<input type="submit" value="Submit" class="orange_btn" name="elqFormSubmitBut"/>
                      </div>
            </div>
        </form>
        <div id="result"></div>
    </div>


</body>
</html>

Voici le buyback.php modifié. vous pouvez également voir comment la réponse du résultat est modifiée et je valide simplement en utilisant first_name

<?php
// validate  using first name

if ($_POST['Contact_First_Name']) {
$Contact_First_Name = $_POST['Contact_First_Name'];
$Contact_Last_Name = $_POST['Contact_Last_Name'];
$Contact_Email = $_POST['Contact_Email'];
$Job_Responsibility = $_POST['Job_Responsibility'];
$Company_Name = $_POST['Company_Name'];
$Company_Country = $_POST['Company_Country'];
$Company_State_Province = $_POST['Company_State_Province'];
$Contact_Phone_Number = $_POST['Contact_Phone_Number'];
$Number_Of_Employees = $_POST['Number_Of_Employees'];

$to = "aaa@gmail.com";
$from = "bbb@gmail.com";

switch ($Number_Of_Employees) {
    case "bet10and49": $Number_Of_Employees = "Between 10 and 49"; break;
    case "bet50and99": $Number_Of_Employees = "Between 50 and 99"; break;
    case "bet100and199": $Number_Of_Employees = "Between 100 and 199"; break;
    case "ab200": $Number_Of_Employees = "Above 200"; break;
}

$message = "
  Contact First Name: $Contact_First_Name<br/>
  Contact Last Name: $Contact_Last_Name<br/>
  Contact Email: $Contact_Email<br/>
  Job Responsibility: $Job_Responsibility<br/>
  Company Name: $Company_Name<br/>
  City: $Company_State_Province<br/>
  Business Phone Number: $Contact_Phone_Number<br/>
  Number Of Employees: $Number_Of_Employees";

$subject = "New Message from the Buyback Form";
$header  = 'MIME-Version: 1.0' . "\r\n";
$header .= 'Content-type: text/html; charset=utf-8' . "\r\n";
$header .= 'From:'. $from  . " \r\n";

if (mail($to, $subject, $message, $header)) {
    $result = "";
echo "<div  id='fadebox'>Thank you for contacting us. We will reply you as soon as possible</div>";

} else {

echo "<div  id='fadebox'>Message Sending Failed, try again</div>";
}
}
?>
0
Nancy Mooree 14 mars 2019 à 19:37