Php form içinde form etiketi kullanmak
Php form etiketi içinde form kullanmak hk;
<form action="" method="post"> //PdoFormu
<form id="normalpost" method="post"> //Ajax Formu
<button type="submit" id="normalpost">
</form>
</form>
Bu tarz bir senaryoda ajax formu içindeki butona basınca doğal olarak diğer formu da post ediyor. Bu sorunu nasıl engelleyebiliriz?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Posts</title>
<style>
/* Selector Specificity: (1, 0, 0) */
#pdoForm {
background-color: red;
width: 250px;
padding: 10px;
}
/* Selector Specificity: (1, 0, 1) */
form#ajaxForm {
background-color: blue;
width: 200px;
padding: 10px;
}
</style>
</head>
<body>
<!-- PdoFormu -->
<form action="pdo.php" method="POST" id="pdoForm">
<input type="text" name="first_name" placeholder="Ad"><br><br>
<input type="text" name="last_name" placeholder="Soyad"><br><br>
<!-- Ajax Formu -->
<form method="POST" id="ajaxForm" style="background-color: purple; width: 200px; padding: 10px;">
<input type="text" name="username" placeholder="Kullanıcı Adı"><br><br>
<input type="password" name="password" placeholder="Şifre"><br><br>
<button type="submit" id="ajaxSubmit" name="btn_ajax" value="1">Ajax Gönder</button><br><br>
</form>
<button type="submit" id="pdoSubmit" name="btn_pdo" value="1">Pdo Gönder</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// eğer ajaxSubmit'a tıklandıysa
$('#ajaxSubmit').click(function(e) {
// formu submit etme
e.preventDefault();
// ajaxForm'daki verileri al
let data = $('#ajaxForm').serialize();
// ajaxForm'daki verileri ajax.php'ye gönder
console.log(data);
$.ajax({
type: 'POST',
url: 'ajax.php',
data: data,
success: function(response) {
let data = JSON.parse(response);
console.log(data);
}
});
});
</script>
</body>
</html>
Normalde bu şekilde ayrı ayrı alıp POST edebiliyor olman gerekirdi ama gel gör ki ne yazık ki içi içe olan form'a basit bir CSS dahi işlemiyor !!!
Doğal olarak bu durum POST işlemi içinde aynı...
Ama illa ki bunun da vardır bir çözümü...
Yapsa yapsa @tayfunerbilen hocam yapar bunu :)