Auto generate name based on user input using jquery

Question

I have two Input fields I want to name based on user input but this name should be lowercase and spaces between words change to "-". I am doing like this

$(function() {
  $("#name").keyup(function() {
    var name = $("#name").val();
    var alias = name.charAt(0);
    $("#alias").val(alias);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input name="name" class="text-input medium-input" type="text" id="name" value="" />

<input name="alias" class="text-input medium-input" type="text" id="alias" />

This given me result I write "arslan" in first input field then showing "a" in second input field
Showing only one letter

You are using .charAt(0) thus getting first character. Can you share few inputs and expected outputs? — Satpal
– Satpal, Commented Feb 15, 2018 at 13:12
I want like this "Home services" then second input field make "home-services" — Arslan
– Arslan, Commented Feb 15, 2018 at 13:16

gurvinder372 · Accepted Answer · 2018-02-15 13:15:39Z

5

I want to name based on user input but this name should be lowercase and spaces between words change to "-".

Use replace

$("#alias").val( name.replace( /\s+/g, "-" ) );

Your function should look like

 $(function() {
     $("#name").keyup(function() {
        var name = $("#name").val();
        $("#alias").val( name.toLowerCase().replace( /\s+/g, "-" ) );
     });
  });

edited Feb 15, 2018 at 13:15

answered Feb 15, 2018 at 13:13

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ekqnp Over a year ago

And for conversion to lowercase, use : name.toLowerCase()

gurvinder372 Over a year ago

@ekqnp Thanks, I missed the same.

adprocas Over a year ago

I think he wants .toLowerCase() as well.

adprocas Over a year ago

@ekqnp, you got to it before my slow browser could submit, haha.

gurvinder372 Over a year ago

@adpro Happens to me all the time :)

|

Robert · Accepted Answer · 2018-02-15 13:18:15Z

1

You should copy the whole entry from name input to alias while replacing the spaces with '-' and turning it to lower case.

$("#name").keyup(function() {
  $("#alias").val($(this).val().replace(" ", "-").toLowerCase());
});

answered Feb 15, 2018 at 13:18

Robert

2,5431 gold badge28 silver badges36 bronze badges

Comments

Osama Xäwãñz · Accepted Answer · 2018-02-15 13:18:05Z

0

Simple Solution

var name = $("#name").val().toLowerCase();
var alias = name.split(" ").join("-");
$("#alias").val(alias);

answered Feb 15, 2018 at 13:18

Osama Xäwãñz

4372 gold badges9 silver badges23 bronze badges

Comments

Lalit Mohan · Accepted Answer · 2018-02-15 13:20:35Z

0

This will help you

 $(function() {
      $("#name").keyup(function() {
       var name = $("#name").val().toLowerCase();
       $("#alias").val(name.replace(/-/g,' '));
     });
  });

The replace will change all - given in the name with space

answered Feb 15, 2018 at 13:20

Lalit Mohan

4843 silver badges16 bronze badges

Collectives™ on Stack Overflow

Auto generate name based on user input using jquery

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related