Add random unique string to input value, and display the result live?

Question

I'm trying to se up unique user names without registration, this could end up with having same user names and I can't say "see all posts by this user" as users could have the same name.

Basically I am using this wordpress plugin called User Submitted Posts which is great as user can post an article without registration, but there is the duplicate name issue, so I thought a solution could be that we have an input field:

<input name="user-submitted-name" type="text" value="" data-required="true" required placeholder="Your name" class="form-control input-lg usp-input">

And we add a random unique string to the output in order to have:

User 1: simon_xyz
User 2: simon_abc

I guess it's quite simple to generate a random string in php, founds lots of stacks that help me on that such as this question: PHP random string generator

But ideally i want to tell the user something like "This is you username, copy it and always use this". There won't be an email requirement as there isn't a registration, so how to add a random unique string to an input field value and show the result live?

I am using this jQuery to add the value of a checkbox to the input field for something else on the site:

            $('.checkTag').click(function() {
                $("#user-submitted-tags").val(
                    $('.checkTag:checked').map(function() {
                            return $(this).val();
                    }).get().join(', ')
                );
        });

Perhaps something like that could be used but i'm struggling as the random string isn't something you would select.

The live result would be something like:

<h2>This is your username</h2>
<h3>Use this user name the next time you write your post</h3>
<p>Your usernanme is: simon_xyz</p>

How about generating a random string with Javascript and sending it to the server when it needs to be saved? It seems to me that making one request to the server to save the random string is better (as in faster/easier to implement/easier to maintain/less error prone) than making 20 request to the server to get a new random string every time the user pokes around with his/her username. — 11684, Sep 15 '13 at 15:49
And random is random; you may have duplicate random suffixes, so this way of solving the problem you had first is not foolproof. — 11684, Sep 15 '13 at 15:50
when users gets to the page, there is a question? Do you have a user name? Yes, write it. No? write your name and next to the text field there is the string. Then when you write your name below the input field there will be: You user name is: simon_xyz. So basically isn't like making tons of request, but the string is generate each time you go on the page, once. In regards of the second comment, dunno how else I could solve the issue. What do you suggest? — rob.m, Sep 15 '13 at 15:52
As I read the question (I don't understand it exactly) you want an input that updates live, while the user types, by appending a value generated on the server to what is in the input box, while that value could easily be generated client-side. Even 4 requests is still worse than 1. I don't see the point in generating this random string on the server. Actually, I don't see the point in generating a random string, as there _will be_ collisions, but that's not what the question is about. — 11684, Sep 15 '13 at 15:58
No no, it's not sending that to the server yet. It's client side. The name once the user has stopped writing it, will be send to the server just as a normal form. So it won't be appending the value to the server live. Literally, you go to the page, you see an input field + _yxz (the random generated string) and once you write your name, below there is the result live so client side. Once you finished writing your name, you send that to the server. I updated the question adding "unique" — rob.m, Sep 15 '13 at 16:01
but well..actually yeah... the server would generate the unique random string based on the already strings saved in the database — rob.m, Sep 15 '13 at 16:09

11684 · Accepted Answer · 2013-09-15T16:43:10.207

As far as I understand it now, based on your comments, I'd propose something like this:

Page with the username input box (omitting <head>, <html> and <body>)(based on the JS-snippet in the question I assume you can use jQuery):

$uniqueRandomString = ...;

?>

<form id="username-form"> (or get, that doesn't really matter, just remember to adjust it on the processing page.)
    <input type="text" name="username" id="username-input" /> <? echo "+ " . $uniqueRandomString; ?>
    <input type="hidden" name="unique-random-string" value="<? echo $uniqueRandomString; ?>"/>
    <input type="submit" />
</form>
<script>
    $("#username-form").on('submit', function() { // Of course you could change the ID of the form, but you'll have to change this as well in that case.
        $.get('url/of/processing/page.php?' + $(this).serialize(), function(data) {
            if (data.indexOf("SUCCESS") == 0) {
                username = data.substring(8);
                $('body').append("<h2>This is your username</h2>
                                  <h3>Use this user name the next time you write your post</h3>
                                  <p>Your usernanme is: " + username + "</p>");
            } else {
                // Display an error message.
            }
        });
    });

Page where you process the username:

<?
// Check if the unique random string - now contained is $_POST['unique-random-string'] - is valid!
// If not, make the expression in this if-statement evaluate to true.
if ($error) echo "ERROR";
else echo "SUCCESS:" . $_GET['username'];
?>

ok yes, this sounds logical and yes you definitly solved one problem which is sending that username with that string to the server, but what about the live display of the complete user name? — rob.m, Sep 15 '13 at 16:23
Do you want to show it on the same page as the form? Otherwise you can simply echo it, along with the HTML snippet you provided, as I just showed in my edit. @rob.m — 11684, Sep 15 '13 at 16:27
Ah, while writing the post I already thought it was a little to simple. — 11684, Sep 15 '13 at 16:31
hehe :) .. but yeah while writing the user name yes. That's why I have posted the other jQuery bit just to give some idea. In that case the input field is updated live while clicking the checkbox value... — rob.m, Sep 15 '13 at 16:33
@rob.m I just made an edit, but realised I forgot to add a submit button. I'll do that now. — 11684, Sep 15 '13 at 16:44

Add random unique string to input value, and display the result live?

1 Answers1