2011-06-27 5 views
15

Я искал ответ, но не смог найти его!Подтвердить перед отправкой формы

У меня есть простая форма,

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

Как бы я изменить это, чтобы подтвердить перед обработкой формы?

Я попробовал onclick, но не смог заставить его работать.

Любые идеи?

ОБНОВЛЕНИЕ - Что у меня сейчас есть.

<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

, что был код OnClick, что у вас было? – AllisonC

+0

Вы должны добавить слушателя ** после ** формы в документе. Используйте window.onload, чтобы добавить его, или поместите скрипт после формы на странице. – RobG

+0

Не знал, что это должно было последовать, но это имеет смысл. Спасибо RobG. – sark9012

ответ

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: вы всегда можете использовать встроенный JS код, как это:

<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

Ничего не происходит, когда я нажимаю кнопку? Просто перейдите на страницу adminprocess.php! – sark9012

+0

Вы использовали разметку, которую я предоставил? Ваш HTML не содержит элемент id, который я добавил в форму, чтобы я мог его захватить с помощью метода getElementById. –

+0

Я копирую и вставляю код, и это просто минует попытку подтверждения. Я уточню вопрос с тем, что у меня сейчас есть. – sark9012

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

@RobG вы ошибаетесь. Это '

Greenisha

+0

@RobG отредактировал бит – Greenisha

2

Правильное событие onSubmit(), и она должна быть прикреплена к форме. Хотя я думаю, что можно использовать onClick, но onSubmit является правильным.

+1

Не существует события onsubmit. Существует атрибут HTML с именем * onsubmit *, но связанным с ним событием является [submit] (http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents) мероприятие. – RobG

+0

ОК, это о семантике, поскольку onclick также не является событием, но я согласен с вами, поскольку вы указываете правильные условия. –

1

Если вы уже используете JQuery .. вы можете использовать обработчик событий для запуска до отправки

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

Ссылка: http://api.jquery.com/submit/

+0

Не использовать jQuery, но спасибо за предложение. Определенно кое-что, что мне нужно, чтобы узнать больше. – sark9012

+0

Я бы настоятельно предложил использовать jQuery, если вы собираетесь разрабатывать javascript. Он обеспечивает платформу, на которой многие функции, которые могут возникнуть для вас, уже созданы. И его очень расширяемость. – Atticus

+0

Любые предложения по лучшему месту, чтобы справиться с этим? Достаточно просто сайт jQuery? – sark9012

-2

, если у вас есть более чем один представить кнопки, которые делают различные действия, которые вы можете сделать это таким образом.

<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>

Смежные вопросы