0

Hi there I have a form to create a file, the file name is obtained from the selections made by the user, I guess it should be something like "display text as you type" mentioned here, but in my case it is not only a textbox but some radio buttons too. For instance:

textbox: "Name given by User"

radio1: sp (selected), en, de

radio2: sp, en (selected), de

radio3: sp (selected), en, de

resulting name: Name given by User Spanish-English (sp)

As you can see the names of the two selected languages are added linked by a dash to the name given by user, and finally the iso code for the language selected at the third radio group is added between parenthesis.

Here I add the code I'm using at the form:

<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>

UPDATE Trying to find a solution adapting the code mentioned here I could manage to compose the two first elements but on the third and forth it does not work, here's what I did:

...
<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>

UPDATE 2 (Sorry I was sure I have added the code I came up with, any way, here it is)

<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>

This way I can get: Name given by User es - (es) If the language selected at the third radio grup is the same as the one selected at the first radio group, but if it's the same as the one selected at the second radio group, then the language bewteen parenthesis does not appear..

Like this: Name given by User es - ()

As you can see the second and third radio selections do not show...

Andrés Chandía
  • 999
  • 1
  • 16
  • 32

1 Answers1

1

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

try this one.

Neeraj Pathak
  • 759
  • 4
  • 13
  • Thanks a lot @Neeraj Pathak , it works perfectly, I had to put it at a certain location inside the code, otherwise it does not work, I have to strugle with the visualization format now. Thanks again. – Andrés Chandía Aug 19 '17 at 11:29