make user name

zer0uk · March 26, 2020

Hi all, could you please tell me how i can get the username on this form to be ghosted out and the content to be the product of Firstname+Surname boxes?

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1">
		<title>Register</title>
		<link href="style.css" rel="stylesheet" type="text/css">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	</head>
	<body>
		<div class="register">
			<h1>Register</h1>
			<div class="links">
				<a href="index.php">Login</a>
				<a href="register.html" class="active">Register</a>
			</div>
			<form action="register-with-activation.php" method="post" autocomplete="off">
				<label for="firstname">
					<i class="fas fa-user"></i>
				</label>
				<input type="text" name="firstname" placeholder="Firstname" id="firstname" required>
				<label for="Surname">
					<i class="fas fa-user"></i>
				</label>
				<input type="text" name="surname" placeholder="Surname" id="surname" required>
				<label for="username">
					<i class="fas fa-user"></i>
				</label>
				<input type="text" name="username" placeholder="Username (This will be displayed)" id="username" required>
				<label for="password">
					<i class="fas fa-lock"></i>
				</label>
				<input type="password" name="password" placeholder="Password" id="password" required>
				<label for="cpassword">
					<i class="fas fa-lock"></i>
				</label>
				<input type="password" name="cpassword" placeholder="Confirm Password" id="cpassword" required>
				<label for="email">
					<i class="fas fa-envelope"></i>
				</label>
				<input type="email" name="email" placeholder="Email" id="email" required>
				<div class="msg"></div>
				<input type="submit" value="Register">
			</form>
		</div>
		<script>
		$(".register form").submit(function(event) {
			event.preventDefault();
			var form = $(this);
		    var url = form.attr('action');
		    $.ajax({
				type: "POST",
				url: url,
				data: form.serialize(),
				success: function(data) {
					$(".msg").text(data);
				}
		    });
		});
		</script>
	</body>
</html>

ginerjm · March 26, 2020

What do you mean by 'ghosted out'?

zer0uk · March 26, 2020

so that the user can see (and make a note of the username) but not amend/change

Barand · March 26, 2020

readonly ?

zer0uk · March 26, 2020

but also how do i automatically get the user name to generate from the other two fields ?

Barand · March 26, 2020

javascript, for example ...

        var a = $("#surname").val().substring(0,8).toLowerCase()
        var b = $("#firstname").val().substring(0,1).toLowerCase()
        $("#username").val(a+b)

zer0uk · March 26, 2020

looks great how do i add that to my file please (not done any java )

Barand · March 26, 2020

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>Example</title>
<script type="text/javascript">
    $().ready( function() {
        
        $("#firstname").change( function() {
            makeUsername()
        })
        
        $("#surname").change( function() {
            makeUsername()
        })
    })
    
    function makeUsername()
    {
        var a = $("#surname").val().substring(0,8).toLowerCase()
        var b = $("#firstname").val().substring(0,1).toLowerCase()
        $("#username").val(a+b)
    }
</script>
</head>
<body>
        <form>
                <label for="firstname">
                    <i class="fa fa-user"></i>
                </label>
                <input type="text" name="firstname" placeholder="Firstname" id="firstname" required><br>
                <label for="surname">
                    <i class="fa fa-user"></i>
                </label>
                <input type="text" name="surname" placeholder="Surname" id="surname" required><br>
                <label for="username">
                    <i class="fa fa-user"></i>
                </label>
                <input type="text" name="username" placeholder="Username" id="username" required readonly><br>
                </body>
                <label for="password">
                    <i class="fa fa-lock"></i>
                </label>
                <input type="password" name="password" placeholder="Password" id="password" required>
        </form>                
</body>        
</html>

Now, is there anything else I can do for you? Cut up your food into bite-size pieces maybe?

zer0uk · March 26, 2020

7 minutes ago, Barand said:

Now, is there anything else I can do for you? Cut up your food into bite-size pieces maybe?

Haha thank you i'll give that a go ..

zer0uk · April 4, 2020

On 3/26/2020 at 2:59 PM, Barand said:

Now, is there anything else I can do for you? Cut up your food into bite-size pieces maybe?

Well actually ... I slightly modified your code so it included a space, but what I'd really like it to do is make the first letter upper case so "James Brown" could someone please help me with that ?

<script type="text/javascript">
			$().ready( function() {
			   
				$("#firstname ").change( function() {
					makeUsername()
				})
			   
				$("#surname").change( function() {
					makeUsername()
				})
			})
		   
			function makeUsername()
			{
				var c = " "
				var b = $("#surname").val().substring(15,0).toLowerCase()
				var a = $("#firstname").val().substring(15,0).toLowerCase()
				$("#username").val(a+c+b)
			}
		</script>

zer0uk · April 14, 2020

Hi can anyone help with this please ?

I want the below script to Capitalise just the first letter of each name .. so make james brown into James Brown really appreciate any help as this is driving my mad.

<script type="text/javascript">
			$().ready( function() {
			   
				$("#firstname ").change( function() {
					makeUsername()
				})
			   
				$("#surname").change( function() {
					makeUsername()
				})
			})
		   
			function makeUsername()
			{
				var c = " "
				var b = $("#surname").val().substring(15,0).toLowerCase()
				var a = $("#firstname").val().substring(15,0).toLowerCase()
				$("#username").val(a+c+b)
			}
</script>

Barand · April 14, 2020

ucfirst()

zer0uk · April 15, 2020

Thanks but I was looking for Java script as this is part of a user registration form so I wanted the user to see the name update as they type, ucfirst is php so would only update after the page is ran / refreshed wouldn't it ?

Thanks

zer0uk · April 15, 2020

Fixed it using the original code you gave me Barand might not be pretty (?) but its doing the job thanks for all your help (think I learned a few things)

<script type="text/javascript">	
			$().ready( function() {
				$("#firstname ").change( function() {
					makeUsername()
				})
				$("#surname").change( function() {
					makeUsername()
				})
			})
			function makeUsername()
			{
				var c = " "
				var b = $("#surname").val().substring(0, 1).toUpperCase()
				var bb = $("#surname").val().substring(1, 15).toLowerCase()
				var a = $("#firstname").val().substring(0, 1).toUpperCase()
				var aa = $("#firstname").val().substring(1, 15).toLowerCase()
				$("#username").val(a+aa+c+b+bb)
			}
			</script>

gizmola · April 15, 2020

Your variable naming could use some work. Don't name variables other than for loop counters with meaningless letter names like 'a', 'b' etc.

The other thing that's not great is that you have hardcoded string length into your function. None of that is actually needed.

It's best practice to just have functions perform a single task, and then to combine/compose functionality from other more focused functions.

Here's a real simple first letter uppercase function:

const capitalize = (s) => {
  if (typeof s !== 'string') return ''
  return s.charAt(0).toUpperCase() + s.slice(1)
}

Now makeUsername becomes much simpler:

function makeUsername()
{
  let username = capitalize($("#firstname").val()) + ' ' + capitalize($("#surname").val());
  $("#username").val(username);
}

Sign In

make user name

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information