Добрый день.
Подскажите, как реализовать с помощью 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="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>