Проблемы Onclick и Onsubmit (правда/ложь и поведение предупреждений?)

Короче говоря, я пытаюсь понять, как правильно использовать onsubmit. Функция testresults отлично работает с onclick, но я не могу активировать ее при отправке (с помощью кнопки или нажатия Enter). Я что-то упустил здесь? В конечном счете, я просто хочу, чтобы onsubmit запускал проверку и давал те же виды изменений/предупреждений границ, что и onclick. Разве это невозможно?

function testResults(form) {
    var TestVar = form.firstname.value;
    if (TestVar.length > 0) {
        alert("You typed: " + TestVar);
        document.getElementById('firstname').style.border = ''
    } else {
        alert("You didn't typed!" + TestVar);
        document.getElementById('firstname').style.border = '1px solid red';
        return false;
    }
    return true;
}

HTML

<html>    
<head>
    <link rel="stylesheet" type="text/css" href="note.css">
    <script type="text/javascript" src="formJS2.js"></script>
</head>
<body>
    <form NAME="myform" ACTION="" METHOD="GET" onSubmit="testResults();"> <span>First name:</span> 
        <input type="text" name="firstname" id="firstname" value="" />
        <br>
        <input type="submit" value="Submit">
        <input type="button" name="button" value="Click" onClick="testResults(this.form)">
    </form>
</body>
</html>

javascript html onclick onsubmit
person Xagrand    schedule 04.04.2013    source источник
comment
Вам понадобится onsubmit="return testResults(this);" — обратите внимание на return. Это предотвратит отправку, если функция testResults вернет false   -  person Ian    schedule 04.04.2013

Ответы (4)


arrow_upward
3
arrow_downward

Да, вы что-то упускаете. Ваша функция testResults имеет параметр form, но когда вы вызываете ее в атрибуте onSubmit, вы не передаете никакого значения (поэтому form внутри функции будет undefined). Измените его на:

<form NAME="myform" ACTION="" METHOD="GET" onSubmit="testResults(this);">
person Anthony Grist    schedule 04.04.2013

arrow_upward
2
arrow_downward

просто используйте:

onSubmit="testResults(this);"

объяснение: ваш метод ожидает аргумент формы типа, вам нужно передать его...

person Laurent S.    schedule 04.04.2013

arrow_upward
1
arrow_downward

Ваш текущий подход заключается в том, что вы ожидаете form в качестве первого параметра обратного вызова onsubmit. В других ответах уже указано, что вам просто нужно передать его.

Обычно, когда у вас есть обработчик событий, первым параметром является событие. Таким образом, переопределяя его собственной функцией, вы теряете возможность что-либо делать с событием. В этом примере вам это сойдет с рук, но если вы ищете способ сделать это правильно, то вот мое предложение:

<form method="post" action="submit.php" id="my_form">
    <input type="submit" value="submit" />
</form>

<script type="text/javascript">
    document.getElementById("my_form").addEventListener("submit", function (event) {
        if (false === form_is_valid(event.target)) {
            event.preventDefault(); // prevents submitting to submit.php
        }
    });
</script>

Отказ от ответственности. Это неполный код, который не будет работать во всех (старых) браузерах. Это просто для иллюстрации того, как использовать обработку событий.

person Halcyon    schedule 04.04.2013

arrow_upward
0
arrow_downward

вы также можете использовать это

    <input type="button" name="button" value="Click" onClick="return testResults(this.form)">

просто поместите return перед вашей функцией и соответственно верните true или false.

person sushant goel    schedule 04.04.2013