javascript - 想要根据选择值动态更改输入值中的“onChange”属性，后缀为

Question

我的用户想在我的门户上创建子域，首先他们必须在输入字段中写下他们选择的名称，然后代码检查该名称的可用性。如果只有一个域名，那么它会通过以下代码自动出现。

<input type="text" id="username" name="username"  AUTOCOMPLETE=OFF />
<span id="availability_status"></span></div> </p>
<script>/
$("#username").change(function(){
    var suffix = ".example.com"
    if(this.value.indexOf(suffix) !== 0 ){
        this.value = this.value + suffix;
    }
});

现在我希望该用户可以从下拉框中的多个域名选择中选择用户名作为子域。例如像

<div>
    <label>Domain Name</label>
    <select name="s1">
        <option value="example.com">example.com</option>
        <option value="myexample.org">myexample.org </option>
<option value="myworld.org">myworld.org</option>
    </select>
</div>

如果他选择第二个 - 即 myexample.com 并且在输入框中他将写下子域示例的名称----

sports 

然后在输入框中它应该改变

sports.myexample.com

那是后缀

.myexample.com 

应该在写入输入值后动态出现。

编辑：

假设如果

sports.myexample.com

已经被占用，然后他必须选择另一个域名，例如

.myworld.com 

通过下拉，它应该像

sports.myworld.com

我的可用性检查代码如下：

<script type="text/javascript">
$(document).ready(function()//When the dom is ready 
{
$("#username").change(function() 
{ //if theres a change in the username textbox

var username = $("#username").val();//Get the value in the username textbox

if(username.length > 3)//if the lenght greater than 3 characters
{
$("#availability_status").html('<img src="/loader.gif" align="absmiddle">&nbsp;Checking availability...');
//Add a loading image in the span id="availability_status"

$.ajax({  //Make the Ajax Request
    type: "POST",  
    url: “ajax-usernameapp.php",  //file name
    data: "username="+ username,  //data
    success: function(server_response){  
   
   $("#availability_status").ajaxComplete(function(event, request){ 

    if(server_response == '0')//if ajax_check_username.php return value "0"
    { 
    $("#availability_status").html('<img src="appavailable.png" align="absmiddle"> <font color="Green"> Available </font>  ');
    //add this image to the span with id "availability_status"
    }  
    else  if(server_response == '1')//if it returns "1"
    {  
     $("#availability_status").html('<img src="not_available.png" align="absmiddle"> <font color="red">Not Available </font>');
    }  
   
   });
   } 
   
  }); 

}
else
{

$("#availability_status").html('<font color="#cc0000"> not chosen</font>');
//if in case the username is less than or equal 3 characters only 
}



return false;
});

});
</script>

标签： javascriptjquery

Answer 1

您只能对选择和输入使用一个事件处理程序，并且每当任何一个发生更改时，获取两个元素的值并将其添加到您的输入框中。

演示代码：

$("#username , select[name=s1]").change(function() {
  var suffix = $("[name=s1]").val() //get select value
  var user_name = $("#username").val() //get textbox value
  if (user_name != "") {
    //get value of input before `.`
    var actual_name = user_name.split('.')[0]
    $("#username").val(actual_name + suffix); //add to input
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="username" name="username" AUTOCOMPLETE=OFF />
<span id="availability_status"></span>

<div>
  <label>Domain Name</label>
  <select name="s1">
    <option value=".example.com">example.com</option>
    <option value=".myexample.org">myexample.org </option>
    <option value=".myworld.org">myworld.org</option>
  </select>
</div>