Выбор одного из значений (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, из второго мы подставляем значение в первый

Андрей, не могли бы вы выложить полностью рабочий код вместе с формой, тоже мучаюсь этим вопросом. Спасибо!

Или Batyabest )

Да, конечно. Вот полный код формы. [[!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>