Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Присвоить значение перед отправкой формы

Автор: Hashashin 12.10.2012, 10:17

Доброго времени суток!
Мне необходимо, чтобы перед отправкой формы выполнялся скрипт, результат выполнения записывался в поле и форма успешно отправлялась.
Вот примерно что я делаю:

Код


<script type="text/javascript">
function doThis() {
        document.getElementById('mapsLat').value = '35.10';
        document.getElementById('mapsLng').value = '-20.50';
    }
</script>
<% using (Html.BeginForm())
       { %>

       <%=Html.HiddenFor(m => m.mapsLat)%>
       <%=Html.TextBoxFor(m => m.mapsLng)%>
    <input type="submit" value="Добавить место" class="buttonLink" name="submitButton" onclick="doThis()" />

<% } %>

Код ASP.NET MVC. Убрал все ненужное. Код работает, если сделать отдельную кнопку, которая будет только выполнять этот скрипт. Но ничего не выходит, если я пытаюсь выполнить скрипт при отправки формы.

Автор: Aliance 12.10.2012, 10:40

Самое простое, сделать так:
заменить кнопку с submit на button, в функцию-обработчик кнопки передать ссылку на форму (this.form), после всех действий вызвать у переданного аргумента функцию-триггер submit()

ВАриант 2:
Если ничего не менять, то в функции-обработчике нужно получить событие, отменить действие по умолчанию (preventDefault) и после всех действий вручную опять же таки вызвать функцию-триггер submit(). Узнать как работать с событием можно узнать по ссылке в моей подписи.

Автор: Hashashin 12.10.2012, 11:19

Сделал так:

Код


<script type="text/javascript">
function doThis(myForm) {
        document.getElementById('mapsLat').value = '35.10';
        document.getElementById('mapsLng').value = '-20.50';
        myForm.submit();
    }
</script>
<% using (Html.BeginForm())
       { %>
       <%=Html.HiddenFor(m => m.mapsLat)%>
       <%=Html.TextBoxFor(m => m.mapsLng)%>
    <input type="button" value="Добавить место" onclick="doThis(this.form)" />
<% } %>

На форме все отображается, но полученные данные не передаются.
Так же пробовал называть форму и выполнять document.myform.submit(); тоже ничего не получилось. Возможно проблема с MVC.

Автор: Aliance 12.10.2012, 14:45

Цитата(Hashashin @ 12.10.2012, 12:19

)

На форме все отображается, но полученные данные не передаются.

покажите разметку, генерируемую сервером, а не серверный код. Скорее всего проблема в отсутствии аттрибута name у полей.

Автор: Hashashin 15.10.2012, 09:32

Нет, с разметкой все в порядке. Если я сначала нажму на кнопку, а потом отправлю фому, то все передается отлично.

Код


       <input id="mapsLat" name="mapsLat" type="hidden" value="" />
       <input id="mapsLng" name="mapsLng" type="text" value="" />

Автор: Aliance 15.10.2012, 10:27

Цитата(Hashashin @ 15.10.2012, 10:32

)

Если я сначала нажму на кнопку, а потом отправлю фому, то все передается отлично.

Запутался. В чем тогда проблема? И разметку не полную скинули. интересует тег форм и его аттрибуты (action, method)

Автор: Hashashin 15.10.2012, 10:57

Весь код большой, хочу оградить Вас от ненужных строк:

Код


<script type="text/javascript">
function doThis(myForm) {
        document.getElementById('mapsLat').value = '35.10';
        document.getElementById('mapsLng').value = '-20.50';
        myForm.submit();
    }
</script>
<form action="/trip" method="post">
       <input id="mapsLat" name="mapsLat" type="hidden" value="" />
       <input id="mapsLng" name="mapsLng" type="text" value="" />

        <input type="button" value="Добавить место" onclick="doThis(this.form)" />
    </form>

Т.е. если у меня 2 кнопки: одна заполняет эти инпуты, а вторая отправляет форму, то все работает прекрасно.
Если я привязываю это к одной кнопке, то ничего не выходит. Как уже писал выше, поля заполняются, а параметры не передаются.

Решил добавить к инпуту(который обязательно заполняется) событие onChange и пока оставить так. Просто не хотелось бы, чтобы функция выполнялась больше одного раза.

Автор: lomaster 15.10.2012, 11:00

Почему у кнопки тип - button, а не сабмит?

Автор: Hashashin 15.10.2012, 11:04

Цитата(lomaster @ 15.10.2012, 11:00)

Почему у кнопки тип - button, а не сабмит?

Потому что отправка формы в функции JavaScript. Как посоветовал мне Aliance

Автор: lomaster 15.10.2012, 11:12

От типа это не зависит.

Код


<input type="submit" value="Добавить место" onclick="doThis()" />

если не надо чтобы срабатывал сабмит то

Код


<input type="submit" value="Добавить место" onclick="doThis(); return false;" />

либо

Код


function doThis() {
        document.getElementById('mapsLat').value = '35.10';
        document.getElementById('mapsLng').value = '-20.50';
        return false;
    }
<input type="submit" value="Добавить место" onclick="return doThis();" />

также у формы еще есть ивент onsubmit, который также вызывается перед отправкой, и в нем также можно "глушить" отправку.

А вот почему у вас не приходят на сервер данные, не понятно, тут надо смотреть код сервера, да и еще хорошо бы снифером посмотреть что и как уходит.

Автор: Aliance 15.10.2012, 13:09

Hashashin, данный код есть в сети? Если да - ссылку дайте.

lomaster, отключите js и сравните 2 варианта, поймете разницу ;-)

Автор: lomaster 15.10.2012, 13:16

Цитата(Aliance @ 15.10.2012, 13:09

)

отключите js и сравните 2 варианта, поймете разницу ;-)

Без js сама ветка не имеет смысла.