您好,我有一个用于创建文件的表单,文件名是从用户所做的选择中获取的,我想它应该类似于提到的“键入时显示文本”here ,但就我而言,它不仅是一个文本框,还有一些单选按钮。例如:
文本框:“用户给出的名称”
radio1:sp(选定)、en、de
radio2:sp、en(选定)、de
radio3:sp(选定)、en、de
结果名称:用户西类牙语-英语 (sp) 给出的名称
正如您所看到的,两种选定语言的名称通过短划线添加到用户给出的名称链接,最后在第三个单选组中选择的语言的 iso 代码添加在括号之间。
在这里,我添加了我在表单中使用的代码:
<form name="bilingual" action="bilingual.php" method="post">
<p><input type="text" name="corpustitle" placeholder="Corpus name" required></p>
<table>
<tr>
<th>Origin language</th>
<th>Target language</th>
<th>Language to index first</th>
</tr>
<tr>
<td>
<label><input type="radio" name="lang_or" value="de">German</label>
<label><input type="radio" name="lang_or" value="en">English</label>
<label><input type="radio" name="lang_or" value="ca">Catalan</label>
<label><input type="radio" name="lang_or" value="es">Spanish</label>
<label><input type="radio" name="lang_or" value="fr">French</label>
<label><input type="radio" name="lang_or" value="it">Italian</label>
<label><input type="radio" name="lang_or" value="pt">Portugues</label>
</td>
<td>
<label><input type="radio" name="lang_tg" value="de">German</label>
<label><input type="radio" name="lang_tg" value="en">English</label>
<label><input type="radio" name="lang_tg" value="ca">Catalan</label>
<label><input type="radio" name="lang_tg" value="es">Spanish</label>
<label><input type="radio" name="lang_tg" value="fr">French</label>
<label><input type="radio" name="lang_tg" value="it">Italian</label>
<label><input type="radio" name="lang_tg" value="pt">Portugues</label>
</td>
<td>
<label><input type="radio" name="language" value="de">German</label>
<label><input type="radio" name="language" value="en">English</label>
<label><input type="radio" name="language" value="ca">Catalan</label>
<label><input type="radio" name="language" value="es">Spanish</label>
<label><input type="radio" name="language" value="fr">French</label>
<label><input type="radio" name="language" value="it">Italian</label>
<label><input type="radio" name="language" value="pt">Portugues</label>
</td>
</tr>
</table>
<p>Generated name: **HERE THE USER SHOULD BE ABLE TO SEE THE RESULTING NAME BEFORE SUBMITING THE FORM**</p>
<p><input type="submit" value="Create corpus"></p>
<小时/>
更新 试图找到一个适应提到的代码的解决方案here我可以设法组合前两个元素,但在第三个和第四个元素上它不起作用,这就是我所做的:
...
<p><input type="text" name="corpustitle" id="name1" placeholder="Corpus name" required></p>
...
<tr>
<td>
<label><input type="radio" name="lang_or" id="name2" value="de">German</label>
<label><input type="radio" name="lang_or" id="name2" value="en">English</label>
...
<td>
<label><input type="radio" name="lang_tg" id="name3" value="de">German</label>
<label><input type="radio" name="lang_tg" id="name3" value="en">English</label>
.....
<td>
<label><input type="radio" name="language" id="name4" value="de">German</label>
<label><input type="radio" name="language" id="name4" value="en">English</label>
更新2(抱歉,我确定我已经添加了我想出的代码,无论如何,就是这里)
<script>
$('#name1').keyup(function() {
$('#name_1').html($(this).val());
});
$('#name2').click(function() {
$('#name_2').html($(this).val());
});
$('#name3').click(function() {
$('#name_3').html($(this).val());
});
$('#name4').click(function() {
$('#name_4').html($(this).val());
});
</script>
....
<p>Generated name: <span id='name_1'></span><span id='name_2'></span>-<span id='name_3'></span>(<span id='name_4'></span>)</p>
这样我可以获得:用户给出的名称 es - (es) 如果第三个单选组选择的语言与第一个单选组选择的语言相同,但如果与第二个单选组选择的语言相同,则不会出现括号内的语言。
像这样:用户给出的名称 - ()
正如您所看到的,第二个和第三个单选选项没有显示...
最佳答案
$('#name1').on('input',function() {
$('#name_1').html($(this).val());
});
$('input[type=radio]').on('change',function(){
var id=$(this).attr('id');
$('span[id='+id+']').text($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input type="text" name="corpustitle" id="name1" placeholder="Corpus name" required></p>
<tr>
<td>
<label><input type="radio" name="lang_or" id="name2" value="de">German</label>
<label><input type="radio" name="lang_or" id="name2" value="en">English</label>
...
<td>
<label><input type="radio" name="lang_tg" id="name3" value="de">German</label>
<label><input type="radio" name="lang_tg" id="name3" value="en">English</label>
.....
<td>
<label><input type="radio" name="language" id="name4" value="de">German</label>
<label><input type="radio" name="language" id="name4" value="en">English</label>
<p>Generated name: <span id='name_1'></span> <span id='name2'></span>-<span id='name3'></span>(<span id='name4'></span>)</p>
试试这个。
关于javascript - 选择表单选项时创建文本字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45762911/