javascript - Want to change dynamically 'onChange' attribute in input value with suffix depending on select value

Question

My users want to create sub domain on my portal , first they have to write their name of choice in input field then code checks availability of that name. If there is a single domain name, then it comes automatically by following code.

<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;
    }
});

Now i want that user can select username as subdomain from more than one choice of domain name from drop down box. For example like

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

if he selects second one - i.e myexample.com and that in input box he will write the name for subdomain example ----

sports 

then in input box it should change like

sports.myexample.com

that is suffix

.myexample.com 

should come dynamically after writing input value.

EDIT:

Assume that if

sports.myexample.com

is already taken then he has to select another domain name like

.myworld.com 

by drop down and it should come like

sports.myworld.com

My Code for availability check is below :

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

question from:https://stackoverflow.com/questions/65917033/want-to-change-dynamically-onchange-attribute-in-input-value-with-suffix-depen

Answer 1

You can use only one event handler for both select and inputs and whenever any one gets change get value of both elements and add same to your input box.

Demo Code :

$("#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>