I stuck with a problem for almost one week now.
I’m working on a website that allow people to check the availability of vehicle spare parts and order them if available.
for that, the user has to select the make then the model, then the year and submit the request, the application tells whenever it’s available or not and displays the form for preordering.
Until here nothing special.
i use jquery.post() method to send elements to a backend.php file and to generate the form regarding those elements without refreshing the page.
Every thing work fine except for my last form, I’m not able to add an eventlistener (onSubmit) …
Could someone help please !!
Here’s my code:
- jquery
$(".form").on("submit", function(e) {
e.preventDefault();
var marque = $("#marque").val();
var model = $("#model").val();
var year = $("#year").val();
if (typeof year != "undefined") {
year = year;
} else {
year = "0";
}
$.post("backEnd.php", {
"references": [marque, model, year]
}, function(data5) {
$(".result").html(data5);
$('html,body').animate({
scrollTop: $(".result").offset().top
}, 'slow')
})
})
$("#mail_form").on("submit", function(e) {
e.preventDefault();
alert("test");
})
- backend.php
if (isset($_POST["references"])) {
$marque = $_POST["references"][0];
$model = $_POST["references"][1];
$year = $_POST["references"][2];
$req = $connexion->prepare("SELECT * FROM suspension WHERE marque = ? AND model = ? AND year_range = ?");
$req->execute(array($marque, $model, $year));
$results = $req->fetchAll();
$front = $results[0]["front"] + $results[0]["both_sides"];
$rear = $results[0]["rear"] + $results[0]["both_sides"];
$modelYear = ($year != "0") ? " - modèle " . $year : "";
$message1 = ($front > 0) ? "<span>Disponibles</span>" : "Non disponible";
$message2 = ($rear > 0) ? "<span>Disponibles</span>" : "Non disponible";
?>
<h2 class="main_result_title"><?php echo $marque . " - " . $model . $modelYear . " :"; ?></h2>
<h3 class="main_result_subtitle"><?php echo "Amortisseurs Avants : " . $message1; ?></h3>
<h3 class="main_result_subtitle"><?php echo "Amortisseurs Arrières : " . $message2; ?></h3>
<p class="main_result_text">Vos amortisseurs sont disponibles chez <span>Algérie Pièces</span>, pour avoir plus de détails ou pour une précommande, utilisez le formulaire de contact ci-dessous pour nous contacter, un agent commercial prendra attache avec vous très rapidement pour vous prendre en charge</p>
<div class="form2">
<form action="" method="post" id="mail_form">
<input type="text" name="id" id="ref" value="<?= $results[0]['id']; ?>" hidden="true">
<label for="user_name">Vos noms et prénoms <small style="font-style: italic">(obligatoire)</small>
: </label><input type="text" name="user_name" id="user_name" placeholder="Nom et prénom" required><br />
<label for="user_mail">Votre Adresse mail : </label><input type="email" inputmode="email" name="user_mail" id="user_mail" placeholder="Adresse mail"><br />
<label for="user_tel">Votre numéro de téléphone : </label><input type="tel" name="user_tel" id="user_tel" placeholder="Numéro de téléphone" inputmode="tel"><br />
<label for="user_msg">Message <small style="font-style: italic">(facultatif)</small> :
</label><textarea name="user_msg" id="user_msg" cols="30" rows="10" placeholder="Remarque ou besoin d'informations supplémentaires"></textarea><br />
<div class="buttons2" style="text-align: right">
<input type="submit" value="Envoyer" class="btn2" />
<input type="reset" value="Effacer" class="btn2" />
</div>
</form>
<div class="state_message"></div>
</div>
<?php
}
the function works fine, everything is ok except the last eventlistener