javascript - Create text string while selecting form options -
hi there have form create file, file name obtained selections made user, guess should "display text type" mentioned here, in case not textbox radio buttons too. instance:
textbox: "name given user"
radio1: sp (selected), en, de
radio2: sp, en (selected), de
radio3: sp (selected), en, de
resulting name: name given user spanish-english (sp)
as can see names of 2 selected languages added linked dash name given user, , iso code language selected @ third radio group added between parenthesis.
here add code i'm using @ 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 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 user should able see resulting name before submiting form**</p> <p><input type="submit" value="create corpus"></p> update trying find solution adapting code mentioned here manage compose 2 first elements on third , forth not work, here's 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 sure have added code came with, way, here 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 can get: name given user es - (es) if language selected @ third radio grup same 1 selected @ first radio group, if it's same 1 selected @ second radio group, language bewteen parenthesis not appear..
like this: name given user es - ()
as can see second , third radio selections not show...
$('#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>try one.
Comments
Post a Comment