Формы: как добавить выпадающий список в конце текстового поля ввода?

Question

Я создаю форму HTML для субдомена. Я не очень люблю использовать javascript, поэтому мой вопрос может быть глупым. Но я спрашиваю здесь, как это место, которое дало мне лучшие ответы еще :-)

Субдомна будет состоять из {пользователей входа}. {} Oneofmanypredefined.domains

Пользователь сможет сделайте субдомен, где они могут 1) введите любое значение (az, 0-9, -) в текстовое поле, и 2) затем выберите, какой предопределенный основной домен им нужно добавить поддомен.

Я сделал это сейчас, используя текстовое поле ввода + варианты выбора. Таким образом, мне нужно смешивать их в одном скрытом поле на следующей странице (форма действия = «nextpage.php»)

Возможное решение 1: Есть ли способ, где я могу сделать одно текстовое поле имеет одну часть это как обычное текстовое поле, а затем одна часть, которая является выпадающим списком, но с тем же именем и именем?

Я попытался опубликовать изображение, но нужно больше репутации: http://bildr.no/image/cSsyNWdQ.jpeg

Я гугле и искали здесь, но не нашли никакого решения для этого. Это может быть потому, что их нет, но, по крайней мере, я могу спросить :-)

Причина, по которой я спрашиваю, если это существует, то это поможет мне сэкономить время, переработав весь javascript и весь другой код, построенный на этом одном поле ввода.

Возможное решение №2: Есть ли способ использовать javascript для объединения «на лету» значения, введенного в текстовое поле + значение, выбранное в выборе, поэтому я могу использовать это комбинированное значение для войдите во все javascript. Так что каждый раз, когда я пишу в текстовом поле или создаю новый выбор, обновления javascript на лету?

Answer 1

Возможное решение № 2, вероятно, будет реалистичным. Это состояние INIT:

var combined_value = ''; 
var input_field = $('#subdomain'); // <input type="text" id="subdomain" ... > 
var select_field = $('#domain_list'); // <select id="domain_list" ... > 

Затем два OnChange события может быть определен:

input_field.change(update_combined_value); 
select_field.change(update_combined_value); 

function update_combined_value() { 
    combined_value = input_field.val() + select_field.val(); 
} 

Таким образом, после каждого изменения переменной combined_value содержит все субдомна.

Answer 2

Использование JQuery и (обязательный атрибут HTML5), вы можете использовать это:

<form action="anything.html" target="_blank"> 
    <input type="text" id="field1" name="par1" required /> 
    <input type="text" id="field2" name="par2" required /> 

    <input type="text" id="willbehidden" name="concatpars" /> 

    <button>send</button> 
</form> 

$("form").on("submit", function() { 
    $("#willbehidden").val($("#field1").val() + $("#field2").val()) 
}); 

JSFIDDLE здесь: http://jsfiddle.net/chrisbenseler/6xw3f8mq/

форма размещена только если первые 2 входа не пусты.