Выбор одного из значений (input или select) при отправке формы

Бакрин Андрей
2 авг. 2015 г., 6:47

Выбор одного из значений (input или select) при отправке формы

В блоге Песочница

Добрый день. Подскажите, как реализовать с помощью Formlt отправку формы таким образом, чтобы если в списке выбрано значение «Другое» — то отправлялся бы текст из соответствующего поля input. А иначе — значение из select? Форма самая простая, вот кусок с select и input
<div class="form-group [[!+error.firma:notempty=`has-error`]]"> <label for="firma" class="col-lg-4 control-label">Фирма</label> <div class="col-lg-8"> <select id="select" name="firma" class="form-control"> <option value="[[!+firma]]">Выберите фирму...</option> <option value="Sony" [[!+fi.firma:FormItIsSelected=`Sony`]]>Sony</option> <option value="BBK" [[!+fi.firma:FormItIsSelected=`BBK`]]>BBK</option> <option value="Oursson" [[!+fi.firma:FormItIsSelected=`Oursson`]]>Oursson</option> <option value="Toshiba" [[!+fi.firma:FormItIsSelected=`Toshiba`]]>Toshiba</option> <option value="Другое" [[!+fi.firma:FormItIsSelected=`Другое`]]>Другое</option> </select> <input type="text" value="[[!+firma]]" class="form-control" id="custom" placeholder="Введите свое значение" name="firma"> </div> </div>
Повесьте функцию onchange на ваш select, добавьте в форму input type=hidden и подставляйте туда при смене нужные значения
Вот такой скрипт использую — все равно отправляется значение из select — слово «Другое»
$(document).ready(function() { var $select = $('#select'); var $custom = $('#custom'); var customValue = 'Другое'; $('#form').on('submit', function() { var $element = $select; if ($select.val() == customValue) { $element = $custom; } $element.attr('name', 'value'); }); $select.on('change', function() { $custom.toggle($(this).val() == customValue); }); });
Правильно вы же элементу $custom подставляете значение
if ($select.val() == customValue) { $element = $custom; }
а нужно $select
А в таком случае если выбрано в селекте не «Другое», то есть должно отправляться значение из селекта, приходит пустое значение.
Принимай значение не selecta а inputa а при смене подставляй в этот интуп что хочешь
input другой не твой custom, еще один скрытый
А подскажите как? Что-то я не соображу.
Да, это я так и делаю. Помимо всего еще один скрытый, в него нужно передать значение перед отправкой?
Даже вот так попробуй проще
$(document).ready(function() { var $select = $('#select'); var $custom = $('#custom'); var $customValue = 'Другое'; $select.on('change', function() { if ( ($this).val() == $customValue) && ($custom.val() != '') ) { $(this).val() = $custom.val(); } }); });
А так все равно из инпута значение берет. При любом значении в селекте. Мне нужно чтобы при значении селекта «Другое» — появлялся инпут для ввода этого самого своего значения. Значит и отправляться он должен. Иначе — отправляются значения из селекта и инпут не появляется))
$(document).ready(function() { var $select = $('#select'); var $custom = $('#custom'); var $customValue = 'Другое'; $select.on('change', function() { $name = $(this).val(); if ( ($this).val() == $customValue) && ($custom.val() != '') ) { $(this).val() = $custom.val(); } else { $(this).val() = $name; } }); });
чтобы появлялся добавьте show, а изначально спрячьте
А куда добавить show?
$(document).ready(function() { var $select = $('#select'); var $custom = $('#custom'); var $customValue = 'Другое'; $select.on('change', function() { $name = $(this).val(); if ($this).val() == $customValue) { $('#custom').show(); } else { $('#custom').hide(); } }); $('#form').on('submit', function() { if ( ($select.val() == $customValue) && ($custom.val() != '') ) { $select.val() = $custom.val(); } else{ $select.val() = $name; } }); });
$(document).ready(function() { var $select = $('#select'), $custom = $('#custom'), $customValue = 'Другое', $name = $('#select').val(); $select.on('change', function() { if ($name == $customValue) { $('#custom').show(); } else { $('#custom').hide(); } }); $('#form').on('submit', function() { if ( ($select.val() == $customValue) && ($custom.val() != '') ) { $select.val() = $custom.val(); } else{ $select.val() = $name; } }); });
нет теперь не надо код ниже
$(document).ready(function() { var $select = $('#select'); var $custom = $('#custom'); var $customValue = 'Другое'; $select.on('change', function() { $name = $(this).val(); if ($(this).val() == $customValue) { $('#custom').show(); } else { $('#custom').hide(); } }); $('#form').on('submit', function() { if ( ($select.val() == $customValue) && ($custom.val() != '') ) { $select.val() = $custom.val(); } else{ $select.val() = $name; } }); });
В этом коде в плане отображения/скрытия инпута все ОК. Но отправляет только из инпута значение. Здесь нужен скрытый инпут или все работает в связке select/input type «text»
последний бери в этом да может только input
Может в форме чего я не та прописал?
<div class="form-group [[!+error.firma:notempty=`has-error`]]"> <label for="firma" class="col-lg-4 control-label">Фирма</label> <div class="col-lg-8"> <select id="select" name="firma" class="form-control"> <option value="[[!+firma]]">Выберите фирму...</option> <option value="Sony" [[!+fi.firma:FormItIsSelected=`Sony`]]>Sony</option> <option value="BBK" [[!+fi.firma:FormItIsSelected=`BBK`]]>BBK</option> <option value="Oursson" [[!+fi.firma:FormItIsSelected=`Oursson`]]>Oursson</option> <option value="Toshiba" [[!+fi.firma:FormItIsSelected=`Toshiba`]]>Toshiba</option> <option value="Другое" [[!+fi.firma:FormItIsSelected=`Другое`]]>Другое</option> </select> <input type="text" value="[[!+firma]]" class="form-control" id="custom" placeholder="Введите свое значение" name="firma"> </div> </div>
нет последний код бери Этот...
А в нем не появляется input…
Я то пишу не проверяю ) поидее так
$(document).ready(function() { var $select = $('#select'), $custom = $('#custom'), $customValue = 'Другое', $name = $select.val(); $select.on('change', function() { if ($select.val() == $customValue) { $('#custom').show(); } else { $('#custom').hide(); } }); $('#form').on('submit', function() { if ( ($select.val() == $customValue) && ($custom.val() != '') ) { $select.val() = $custom.val(); } else{ $select.val() = $name; } }); });
Так все работает, опять же в плане скрытия/отображения все ОК. Но при выборе в селекте не «Другое» приходит пустое значение. Это видимо из-за того, что в верстке после селекта присутствует (хоть и скрытый через display:none) input. Он получается с пустым значением и оно и перезаписывает при отправке значение из селекта (вернее, они 2 по порядку уходят — последний пустой.) Возможно, нужно не отображать/скрывать а вобще добавлять элемент, а чтобы при выборе не «Другое» — он удалялся из верстки. Как это сделать?
Нет проверьте код select в форме на правильность передачи значений FORMIT, кажется там некорректно у вас что то
если там верно
то пробуйте так
$(document).ready(function() { var $select = $('#select'), $custom = $('#custom'), $customValue = 'Другое', $name = $select.val(); $select.on('change', function() { $name = $select.val(); if ($select.val() == $customValue) { $('#custom').show(); } else { $('#custom').hide(); $name = $select.val(); } }); $('#form').on('submit', function() { if ( ($select.val() == $customValue) && ($custom.val() != '') ) { $select.val() = $custom.val(); } else{ $select.val() = $name; } }); });
Форма тут — все ли правильно?
Вот так передаются значения по консоли посмотрел:
firma:Oursson firma:
В результате пустое значение приходит.
ну проверь по букварю я не помню формит уже давно не использую
Так как бы форма то правильная но проблему я вижу в том, что поля идут один за одним с одинаковым name. И приходил последнее значение (пустое).
Как я предполагал, мешает инпут, идущий после select с тем же name. Костыль конечно, но свою задачу решает. Сделал просто удаление инпута перед отправкой формы, все работает как надо. Спасибо за помощь!
else{ $('#custom').remove(); $select.val() = $name; }
Это в форму и пропиши ее на прием Formit как там правильно теги забыл, у selecta убери их совсем
<input type="hidden" name="firma" value="" id="firma" />
$(document).ready(function() { var $select = $('#select'), $custom = $('#custom'), $customValue = 'Другое', $select.on('change', function() { if ($('#select :selected').val() == $customValue) { $('#custom').show(); } else { $('#custom').hide(); } }); $('#form').on('submit', function() { if ( ($('#select :selected').val() == $customValue) && ($custom.val() != '') ) { $('#firma).val() = $custom.val(); } else{ $('#firma).val() = $('#select :selected').val(); } }); });
else{ $('#firma').val() = $('#select :selected').val(); }
Смени ему name просто тогда, зачем ему такое же, в том коде не нужно оно таким же
У меня идет не отправка а запись в БД, тогда нужно при записи в БД делать дополнительную выборку, из какого поля записывать? Типа проверки на данные?
в каком случае? если со старым кодом то из селекта и записывать
С Вашим кодом и с моим костылем)) Все правильно работает. А если сделать разные name то тогда при записи в БД нужно делать проверку из какого name данные приходят?
они у вас приходят все время из одного — которое select, из второго мы подставляем значение в первый
Андрей, не могли бы вы выложить полностью рабочий код вместе с формой, тоже мучаюсь этим вопросом. Спасибо!
Да, конечно. Вот полный код формы.
[[!getSheetData]] [[!FormIt? &hooks=`add_remont,redirect` &redirectTo=`10` &placeholderPrefix=`` &validate=`fio:required, dogovor:required` ]] <div class="row"> <div class="col-lg-6" style="margin-left: auto; margin-right: auto; float: none;"> [[!+error.process_error:notempty=`<div class="alert alert-dismissable alert-danger"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Ошибка!</strong> [[!+error.process_error]] </div>`]] <div class="well"> <form class="bs-example form-horizontal" action="[[~[[*id]]]]" method="post" id="form"> <input type="hidden" value="[[!+id]]" name="sheet"> <fieldset> <legend>[[*pagetitle]]</legend> <div class="form-group [[!+error.group:notempty=`has-error`]]"> <label for="dogovor" class="col-lg-4 control-label">Номер договора</label> <div class="col-lg-8"> <input type="text" value="[[!+dogovor]]" class="form-control" id="dogovor" placeholder="12345/2015-25" name="dogovor"> <span class="help-block">[[!+error.dogovor]]</span> </div> </div> <div class="form-group [[!+error.fio:notempty=`has-error`]]"> <label for="fio" class="col-lg-4 control-label">ФИО</label> <div class="col-lg-8"> <input type="text" value="[[!+fio]]" class="form-control" id="fio" placeholder="Иванов Иван Иванович" name="fio"> <span class="help-block">[[!+error.fio]]</span> </div> </div> <div class="form-group [[!+error.phone:notempty=`has-error`]]"> <label for="phone" class="col-lg-4 control-label">Телефон</label> <div class="col-lg-8"> <input type="text" value="[[!+phone]]" class="form-control" id="phone" placeholder="8xxxxxxxxxx" name="phone"> <span class="help-block">[[!+error.phone]]</span> </div> </div> <div class="form-group [[!+error.firma:notempty=`has-error`]]"> <label for="firma" class="col-lg-4 control-label">Фирма</label> <div class="col-lg-8"> <select id="select" name="firma" class="form-control"> <option value="[[!+firma]]">Выберите фирму...</option> <option value="Sony" [[!+fi.firma:FormItIsSelected=`Sony`]]>Sony</option> <option value="BBK" [[!+fi.firma:FormItIsSelected=`BBK`]]>BBK</option> <option value="Oursson" [[!+fi.firma:FormItIsSelected=`Oursson`]]>Oursson</option> <option value="Toshiba" [[!+fi.firma:FormItIsSelected=`Toshiba`]]>Toshiba</option> <option value="Другое" [[!+fi.firma:FormItIsSelected=`Другое`]]>Другое</option> </select> <input type="text" value="[[!+firma]]" class="form-control" id="custom" placeholder="Введите свое значение" name="firma"> </div> </div> <div class="form-group [[!+error.model:notempty=`has-error`]]"> <label for="model" class="col-lg-4 control-label">Модель</label> <div class="col-lg-8"> <input type="text" value="[[!+model]]" class="form-control" id="model" placeholder="Bravia" name="model"> <span class="help-block">[[!+error.model]]</span> </div> </div> <div class="form-group [[!+error.serial:notempty=`has-error`]]"> <label for="serial" class="col-lg-4 control-label">Серийный номер</label> <div class="col-lg-8"> <input type="text" value="[[!+serial]]" class="form-control" id="serial" placeholder="XPH1245879" name="serial"> <span class="help-block">[[!+error.serial]]</span> </div> </div> <div class="form-group [[!+error.remonttype:notempty=`has-error`]]"> <label for="remonttype" class="col-lg-4 control-label">Тип ремонта</label> <div class="col-lg-8"> <select name="remonttype" class="form-control"> <option value="Гарантийный" [[!+fi.remonttype:FormItIsSelected=`Гарантийный`]]>Гарантийный</option> <option value="Платный" [[!+fi.remonttype:FormItIsSelected=`Платный`]]>Платный</option> </select> </div> </div> <div class="form-group [[!+error.status:notempty=`has-error`]]"> <label for="status" class="col-lg-4 control-label">Статус</label> <div class="col-lg-8"> <select name="status" class="form-control"> <option value="[[!+status]]">Выберите статус...</option> <option value="Принят" [[!+fi.status:FormItIsSelected=`Принят`]]>Принят</option> <option value="Направлен в ремонт" [[!+fi.status:FormItIsSelected=`Направлен в ремонт`]]>Направлен в ремонт</option> <option value="В процессе" [[!+fi.status:FormItIsSelected=`В процессе`]]>В процессе</option> <option value="Ожидание запчасти" [[!+fi.status:FormItIsSelected=`Ожидание запчасти`]]>Ожидание запчасти</option> <option value="Ремонт окончен" [[!+fi.status:FormItIsSelected=`Ремонт окончен`]]>Ремонт окончен</option> <option value="Аппарат выдан" [[!+fi.status:FormItIsSelected=`Аппарат выдан`]]>Аппарат выдан</option> </select> </div> </div> <div class="form-group [[!+error.description:notempty=`has-error`]]"> <label for="description" class="col-lg-4 control-label">Комментарий</label> <div class="col-lg-8"> <input type="text" value="[[!+description]]" class="form-control" id="description" placeholder="Комментарий к ремонту" name="description"> <span class="help-block">[[!+error.description]]</span> </div> </div> <div class="form-group"> <div class="col-lg-8 col-lg-offset-4"> <button type="submit" class="btn btn-primary">Сохранить</button> <button type="submit" class="btn btn-danger btn-xs" name="remove" value="remove" onclick="return confirm('Удалить заказ?')">Удалить</button> </div> </div> </fieldset> </form> </div> </div> </div>

Добавить комментарий