表单:如何在输入文本字段的末尾添加下拉选项?

时间:2014-12-10 14:19:33

标签: javascript forms select input

我正在为子域制作者构建HTML表单。我使用javascript并不是很好,所以我的问题可能很愚蠢。但我在这里问,因为这个地方给了我最好的答案: - )

子域名将由{users-input}组成。{oneofmanypredefined.domains}

用户将能够尽可能地创建子域 1)在文本字段中输入任何值(a-z,0-9, - ), 和 2)然后选择他们想要添加子域的预定义主域。

我现在通过使用输入文本字段+选择选项使其工作。这样我需要将它们混合到下一页的一个隐藏字段中(表单操作=" nextpage.php")

可能的解决方案1: 有没有办法我可以让一个文本字段有一个部分就像一个普通的文本字段,然后一个部分是一个下拉列表,但具有相同的ID和名称?

我尝试发布图片,但需要更多声誉:http://bildr.no/image/cSsyNWdQ.jpeg

我在谷歌搜索并搜索过,但没有找到任何解决方案。可能因为没有,但至少我可以问: - )

我问的原因是,如果存在,那么它将帮助我节省时间重做所有javascript和在这一个输入字段上构建的所有其他代码。

可能的解决方案#2:是否有一种很好的方法可以使用javascript来快速组合"#34;输入到文本字段中的值+在select中选择的值,因此我可以使用该组合值输入所有javascript。因此,每次我在文本字段中写入,或者进行新的选择选择时,javascript会立即更新吗?

2 个答案:

答案 0 :(得分:0)

可能的解决方案#2可能是现实的。 这是一个初始状态:

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都包含整个子域。

答案 1 :(得分:0)

使用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个输入不为空白时才会过帐表单。