Append text to textbox input

Question

I have a textbox where the user is supposed to type in a subdomain but the root domain is always going to be the same. So I want to append the root domain like ".example.com" so if the user wants to make it "test.example.com" they only have to type "test". Following Append text to input field I can get this to work if I wait to append the text until the user is done with the field, but to clearly show the user the main domain is appended for them I want the append to happen as they type, not knowing Javascript I did this:

<input class="form-control" type="text" name="subdomain" id="subdomain" placeholder=".example.com" oninput="$('#subdomain').val($('#subdomain').val() + '.example.com');">

I am sure you can see what is going wrong, ".example.com" keeps getting appended with every key press so I end up with something like "te.example.com.example.com" as I type. Is there an easy way to make it to where it is just appended only once?

score 0 · Answer 1 · answered Nov 17 '19 at 11:22

If there isn't any specific reason to use this method, you could use two different inputs, one for the user to put the subdomain and one for the domain. This approach is used by Plesk panel to register subdomains (image).

Something like this:

$('#submitBtn').click(function() {
  $subdomain_val = $('#subdomainInput').val();
  $domain_val = $('#domainInput').val();
  
  console.log($subdomain_val + '.' + $domain_val);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <input class="form-control" type="text" name="subdomain" id="subdomainInput" placeholder="test">

  <b>.</b>

  <input id="domainInput" class="domain" type="text" value="example.com" name="domain" disabled>

  <button id="submitBtn">Submit</button>
</div>

The #domainInput has been disabled so the user cannot changed it. You can remove it if you want.

Also you can style it to hide that it is an input field, like this:

#domainInput {
  border: 0;
  background: #fff;
}

That's almost like what I tried earlier just having the .example.com as a regular text strong in-line, getting everything to line up perfectly with the rest of the form fields was a pain. And when I did get it got out of whack again if I resized the window. This option seems to have the same downsides, unless there is a way to combine the two input boxes into one. — , Nov 17 '19 at 13:44

score 0 · Answer 2 · answered Nov 17 '19 at 11:28

0

Just add a condition to check if example.com is already present at the end. Try something like this

<input class="form-control" type="text" name="subdomain" id="subdomain" placeholder=".example.com" oninput="/.*\.example.com$/.test('a.example.com') ? $('#subdomain').val($('#subdomain').val()) : $('#subdomain').val($('#subdomain').val() + '.example.com');">

But as suggested by @Αntonis Papadakis, its better to append data on submit.

answered Nov 17 '19 at 11:28

Abhisek Mishra

269
3
15

I don;t need the last part when it submits, because it's static and will always be the same, it's there for the benefit of the UI. – Nov 17 '19 at 13:46

score 0 · Answer 3 · answered Nov 17 '19 at 11:31

Once you wanna show the user how the result will be this may works for you.

https://jsfiddle.net/7d4Lnz02/2/

('#subdomain').on('keyup', function(event){
    const key = event.keyCode || event.charCode;
    const domain = ".example.com";
    if( key == 8 || key == 46 ){
        $('#subdomain').val('');
      return false;
    }
    if($('#subdomain').val()===''){
      $('#subdomain').val($('#subdomain').val() + domain);
    }else{
      $('#subdomain').val($('#subdomain').val().replace(domain,''));
      $('#subdomain').val($('#subdomain').val() + domain);
    }

})

score 0 · Answer 4 · answered Nov 17 '19 at 11:56

you can do this if you want to it manually

<script>
$('#subdomain').keyup(function(a,b) {
    var text = $('#subdomain').val() ;
    var beforeDomaineName  = text.replace (".example.com", "");
    $('#subdomain').val(beforeDomaineName + '.example.com');
});

But the probably best way is using a jquery plugin like https://coreui.io/docs/components/masked-input/

Append text to textbox input

4 Answers4