つのフィールド結果

Question

別名フィールドと小文字とをもたらすために、入力フィールドと選択フィールドから表示するには、このコードを完了するためにどのように

Name <input class="has-value m-r" type="text"> 

Gender : 
<select name="post_status" class="form-control parsley-validated" data-required="true"> 
              <option value="">Male</option> 
         <option value="">Female</option> 
</select> 


Result <input class="has-value m-r" type="text"> 

https://jsfiddle.net/okoLxgug/

この私のコードを入力し、選択フィールドを表示する方法 -

Answer 1

を追加します。

function changeInput() { 
 
var name = document.getElementById("name").value; 
 
var gender = document.getElementById("gender").value; 
 
document.getElementById("result").value = name.split(' ').join('-') + '-' + gender; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
\t Name <input class="has-value m-r" type="text" id="name" onKeyup="changeInput()" > 
 
    \t <br><br> 
 
    Gender : 
 
<select name="post_status" class="form-control parsley-validated" data-required="true" id="gender" onChange="changeInput()"> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="male">Male</option> 
 
         <option value="female">Female</option> 
 
</select> 
 
    \t  
 
    <br><br><br> 
 
    
 
    Result <input class="has-value m-r" type="text" id="result"> 
 
    
 
    <br> <br> <br> 
 
    if i input on field name "Jhon Dhoe" and i select Gender field is "Male" 
 
    <br><br> 
 
    on field Result will show alias like this : jhon-dhoe-male (lowercase) 
 
    
 

Answer 2

あなたが望む結果は「リアルタイム」だと思います。つまり、名前フィールドを編集するたびに、エイリアスフィールドが更新されます。

このコードをチェックして、必要なものかどうか教えてください。

aproppiateフィールドIDを追加する必要があります。これは機能するはずです。

HTMLコード：

Name 
<input class="has-value m-r" id="name_input" type="text"> 
<br> 
<br> Gender : 
<select name="post_status" class="form-control parsley-validated" id="gender_select" data-required="true"> 
    <option value="">Male</option> 
    <option value="">Female</option> 
</select> 

<br> 
<br> 
<br> Result 
<input id="result_input" class="has-value m-r" type="text"> 

JSコード：

<script> 
$("#name_input").on("change keyup paste", function() { 
    e = document.getElementById('gender_select'); 
    gender = e.options[e.selectedIndex].text; 
    name = document.getElementById('name_input').value.replace(" ", "-"); 
    document.getElementById('result_input').value = name + "-" + gender; 
}) 
</script> 

https://jsfiddle.net/okoLxgug/4/

編集：私は以下のコードは、あなたの問題を解決すべきだと思うjsfiddle

Answer 3

名前と性別の組み合わせのヘビケースで出力を取得することができません。

$(document).ready(function() { 
 
    function refresh() { 
 
    $result = $name + "-" + $gender; 
 
    $result = $result.replace(/\s+/g, '-').toLowerCase(); 
 
    document.querySelectorAll('[name="result"]')[0].value = $result; 
 
    } 
 

 
    $('select').on('change', function() { 
 
    $gender = this.value; 
 
    refresh(); 
 
    }) 
 

 
    $("input").keyup(function() { 
 
    $name = document.querySelectorAll('[name="name"]')[0].value; 
 
    refresh(); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Name <input class="has-value m-r" name="name" type="text"> 
 
<br><br> Gender : 
 
<select name="post_status" class="form-control parsley-validated" data-required="true"> 
 
    <option value="Male">Male</option> 
 
    <option value="Female">Female</option> 
 
    </select> 
 

 
<br><br><br> Result <input class="has-value m-r" name="result" type="text"> 
 

 
<br> <br> <br> if i input on field name "Jhon Dhoe" and i select Gender field is "Male" 
 
<br><br> on field Result will show alias like this : jhon-dhoe-male (lowercase)

外部リンク：https://jsfiddle.net/okoLxgug/7/