Question

您好我有一个表单来创建一个文件，文件名是从用户的选择中获得的，我想它应该是＆＃34;键入时显示文字＆＃34;提到here，但在我的情况下，它不仅是一个文本框，还有一些单选按钮。例如：

文本框：＆＃34;用户＆＃34;

给出的名称

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给出的名称 - （）

正如您所看到的，第二和第三个无线电选择没有显示......

Answer 1

＆＃13;

$('#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());
});

＆＃13;

<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>&nbsp;&nbsp;<span id='name2'></span>-<span id='name3'></span>(<span id='name4'></span>)</p>

＆＃13;

尝试这个。

选择表单选项

1 个答案: