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

347

15 декабря 2016, 16:26

В форме нужен select с некими значениями, последнее из которых - "Другое". При выборе этого значения появляется поле input, в которое можно вписать своё значение.

При отправке всё должно сохраняться в базу. Значит, значение из select и из input должны писаться в одно и то же поле базы. При выборе в select "Другое" должно писаться значение из input.

Как отправить на сервер только нужное значение?

Answer 1

Идея такова:

При изменении значения в select показываем или скрываем input.
input при загрузке страницы скрыт.
При отправке формы запрещаем стандартную отправку и отсылаем с помощью Ajax-запроса.
В качестве параметра value при запросе указывает либо значение select, либо значение input.

$(document).ready(function() { 
    var $select = $('#select'); 
    var $custom = $('#custom'); 
    var customValue = 'Другое'; 
     
    $('#form').on('submit', function() { 
        var value = $select.val(); 
        if (value == customValue) { 
            value = $custom.val(); 
        } 
        $.ajax({ 
            url: 'send.php', 
            data: { 'value': value } 
        }); 
        return false; 
    }); 
     
    $select.on('change', function() { 
        $custom.toggle($(this).val() == customValue); 
        return false; 
    }); 
});

#custom { 
    display: none; 
}

<form id="form" action=""> 
    <select id="select"> 
        <option>First</option> 
        <option>Second</option> 
        <option>Другое</option> 
    </select> 
    <input id="custom" placeholder="Введите своё значение" /> 
    <input type="submit" value="Отправить" /> 
</form> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Вариант со стандартной отправкой формы:

$(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 { 
    display: none; 
}

<form id="form" action="index.php"> 
    <select id="select"> 
        <option>First</option> 
        <option>Second</option> 
        <option>Другое</option> 
    </select> 
    <input id="custom" placeholder="Введите своё значение" /> 
    <input type="submit" value="Отправить" /> 
</form> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Пример в fiddle.