2011-06-27 20 views
15

Szukałem odpowiedzi, ale nie mogłem jej znaleźć!Potwierdź przed wysłaniem formularza

Mam prosty formularz,

<form action="adminprocess.php" method="POST"> 
    <input type="submit" name="completeYes" value="Complete Transaction" /> 
</form> 

Jak dostosować to do potwierdzenia przed przetworzeniem formularz?

Próbowałem onclick, ale nie mogłem go uruchomić.

Wszelkie pomysły?

AKTUALIZACJA - Co mam teraz.

<script type="text/javascript"> 
var el = document.getElementById('myCoolForm'); 

el.addEventListener('submit', function(){ 
return confirm('Are you sure you want to submit this form?'); 
}, false); 
</script> 

<form action="adminprocess.php" method="POST" id="myCoolForm"> 
    <input type="submit" name="completeYes" value="Complete Transaction" /> 
</form> 
+1

jaki był kod onclick że miałeś? – AllisonC

+0

Musisz dodać słuchacza ** po ** formularz jest w dokumencie. Użyj window.onload, aby go dodać, lub umieść skrypt po formularzu na stronie. – RobG

+0

Nie wiedział, że musiał przyjść później, ale ma to sens. Dzięki RobG. – sark9012

Odpowiedz

35

HTML:

<form action="adminprocess.php" method="POST" id="myCoolForm"> 
    <input type="submit" name="completeYes" value="Complete Transaction" /> 
</form> 

JavaScript:

var el = document.getElementById('myCoolForm'); 

el.addEventListener('submit', function(){ 
    return confirm('Are you sure you want to submit this form?'); 
}, false); 

Edit: zawsze można użyć inline kod JS takiego:

<form action="adminprocess.php" method="POST" onsubmit="return confirm('Are you sure you want to submit this form?');"> 
    <input type="submit" name="completeYes" value="Complete Transaction" /> 
</form> 
+0

Nic się nie dzieje po kliknięciu przycisku? Idę na stronę adminprocess.php! – sark9012

+0

Czy używałeś znacznika podanego przeze mnie? Twój HTML nie zawiera elementu id dodanego do formularza, więc mogę go pobrać za pomocą metody 'getElementById'. –

+0

Kopiuję i wklejaję kod, po prostu pomijając próbę potwierdzenia. Zaktualizuję pytanie tym, co teraz mam. – sark9012

16
<input type="submit" onclick="return confirm('Are you sure you want to do that?');"> 
+0

@RobG trochę się mylisz. To '

>
'działa idealnie – Greenisha

+0

@RobG edytował bit – Greenisha

2

Prawidłowe zdarzenie jest onSubmit() powinny być przymocowane do formy. Chociaż myślę, że można użyć onClick, ale onSubmit jest poprawny.

+1

Nie ma zdarzenia onsubmit. Istnieje atrybut HTML o nazwie * onsubmit *, ale powiązanym zdarzeniem jest [submit] (http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents) wydarzenie. – RobG

+0

ok, chodzi o semantykę, ponieważ onclick również nie jest wydarzeniem, ale zgadzam się z tobą, ponieważ podajesz poprawne warunki. –

1

Jeśli już przy użyciu jQuery .. możesz użyć programu obsługi zdarzeń, aby wyzwolić przed wysłaniem

$(document).ready(function() { 
    $("#formID").submit(function(){ 
     // handle submission 
    }); 
}); 

referencyjny: http://api.jquery.com/submit/

+0

Nie używając jQuery, ale dziękuję za sugestię. Zdecydowanie coś, czego potrzebuję, aby dowiedzieć się więcej. – sark9012

+0

Zdecydowanie polecam używanie jQuery, jeśli zamierzasz pracować z javascript. Stanowi platformę, na której wiele funkcji, które możesz sam stworzyć, jest już utworzona. I to bardzo rozszerzalne. – Atticus

+0

Jakieś sugestie dotyczące najlepszego miejsca, aby się z tym uporać? Po prostu strona jQuery? – sark9012

-2

jeśli masz więcej niż jeden przedstawić przycisków, które wykonują różne działania można zrobić to w ten sposób.

<input TYPE=SUBMIT NAME="submitDelete" VALUE="Delete Script" onclick='return window.confirm("Are you sure you want to delete this?");'> 
0

var submit = document.querySelector("input[type=submit]"); 
 
    
 
/* set onclick on submit input */ 
 
submit.setAttribute("onclick", "return test()"); 
 

 
//submit.addEventListener("click", test); 
 

 
function test() { 
 

 
    if (confirm('Are you sure you want to submit this form?')) {   
 
    return true;   
 
    } else { 
 
    return false; 
 
    } 
 

 
}
<form action="admin.php" method="POST"> 
 
    <input type="submit" value="Submit" /> 
 
</form>

Powiązane problemy