Jump to content
#FlattenTheCurve ×
zer0uk

make user name

Recommended Posts

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>

 

 

Share this post


Link to post
Share on other sites

What do you mean by 'ghosted out'?

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

javascript, for example ...

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

 

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
<!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?

Share this post


Link to post
Share on other sites
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 ..

Share this post


Link to post
Share on other sites

 

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>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.