Выбор одного из значений (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>

FreeCode.Academy

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

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