[]
HTML - JS basit bir form sorusu
Selamlar bir formum var. Kontrolleri forma yazdım. benim için yeterli. güzel uyarıyor.
Fakat bir kusuru var. form submit olunca içine yazılan parametreler adres çubuğuna düşüyor. Sanki get isteği atıyorum gibi. Halbuki ben submit işleminde ayrı bir fonksiyonda post atıyorum.
Bu olay form submit yüzünden oluyor.
event.preventDefault(); koymayı denedim. Bu mani oldu ancak bu sefer de validationlar, uyarılar çalışmıyor formun defaultundaki.
<form action="" class="form-container">
<input type="text" placeholder="İsim" id="formName" name="text" required minlength="5">
<input type="email" placeholder="Email" id="formEmail" name="email" required minlength="8">
<input type="number" placeholder="Telefon" id="formPhone" name="phone" minlength="10">
<button type="submit" class="" onclick="getForm()">ONAYLA</button>
</form>
window.getForm = () => {
let name = document.getElementById('formName').value;
let email = document.getElementById('formEmail').value;
let phone = document.getElementById('formPhone').value;
GetOrder(name, email, phone)
}
function GetOrder(name, email, phone) {
-fetch ile post işlemi-
}
Fakat bir kusuru var. form submit olunca içine yazılan parametreler adres çubuğuna düşüyor. Sanki get isteği atıyorum gibi. Halbuki ben submit işleminde ayrı bir fonksiyonda post atıyorum.
Bu olay form submit yüzünden oluyor.
event.preventDefault(); koymayı denedim. Bu mani oldu ancak bu sefer de validationlar, uyarılar çalışmıyor formun defaultundaki.
<form action="" class="form-container">
<input type="text" placeholder="İsim" id="formName" name="text" required minlength="5">
<input type="email" placeholder="Email" id="formEmail" name="email" required minlength="8">
<input type="number" placeholder="Telefon" id="formPhone" name="phone" minlength="10">
<button type="submit" class="" onclick="getForm()">ONAYLA</button>
</form>
window.getForm = () => {
let name = document.getElementById('formName').value;
let email = document.getElementById('formEmail').value;
let phone = document.getElementById('formPhone').value;
GetOrder(name, email, phone)
}
function GetOrder(name, email, phone) {
-fetch ile post işlemi-
}
chatgpt ==>> javascript ajax isteği parametreler görünmesin istiyorum nasıl yapabiliim?
- demirKamil
(24.01.24 22:02:53)
doğru anladıysam button type="button" yapınca sorunun çözülecektir.
<form action="#" class="form-container">
<input type="text" placeholder="İsim" id="formName" name="text" required minlength="5">
<input type="email" placeholder="Email" id="formEmail" name="email" required minlength="8">
<input type="tel" placeholder="Telefon" id="formPhone" name="phone" minlength="10">
<button type="button" class="" onclick="getForm()">ONAYLA</button>
</form>
<script>
window.getForm = () => {
alert("test uyarı");
let name = document.getElementById('formName').value;
let email = document.getElementById('formEmail').value;
let phone = document.getElementById('formPhone').value;
getOrder(name, email, phone);
}
</script>
<form action="#" class="form-container">
<input type="text" placeholder="İsim" id="formName" name="text" required minlength="5">
<input type="email" placeholder="Email" id="formEmail" name="email" required minlength="8">
<input type="tel" placeholder="Telefon" id="formPhone" name="phone" minlength="10">
<button type="button" class="" onclick="getForm()">ONAYLA</button>
</form>
<script>
window.getForm = () => {
alert("test uyarı");
let name = document.getElementById('formName').value;
let email = document.getElementById('formEmail').value;
let phone = document.getElementById('formPhone').value;
getOrder(name, email, phone);
}
</script>
- durbidakka
(24.01.24 22:12:56)
ama form kontrolleri de çalışsın istiyorum, oralara ayrıca kontrol yazmak istemiyorum. input type a, length e ve required a bakabiliyorum submit kullanınca.
yani hem submit kullanayım, hem post atayım, hem form kontrolleri çalışsın ama adres çubuğu değişmesin gibi bir seçeneğim yok mu?
edit: şöyle çözdüm. benim aslında invalid durumda submit e izin vermem sorun değil. zaten başarılı olmadığı için form göndermeye çalışmayacak. sadece başarılı durumda önünü kesmem yeterli. onun için de şu kontrol işimi gördü.
var form = document.getElementById('offerForm')
if (form.checkValidity()) {
sendOffer();
event.preventDefault();
return true;
} else {
return false;
}
yani hem submit kullanayım, hem post atayım, hem form kontrolleri çalışsın ama adres çubuğu değişmesin gibi bir seçeneğim yok mu?
edit: şöyle çözdüm. benim aslında invalid durumda submit e izin vermem sorun değil. zaten başarılı olmadığı için form göndermeye çalışmayacak. sadece başarılı durumda önünü kesmem yeterli. onun için de şu kontrol işimi gördü.
var form = document.getElementById('offerForm')
if (form.checkValidity()) {
sendOffer();
event.preventDefault();
return true;
} else {
return false;
}
- ananiyimioguz (24.01.24 22:18:45 ~ 23:15:35)
1
