如何顯示輸入和選擇字段到一個域結果

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/