Generate user id using javascript and display it in textbox

generate unique id from string javascript
generate unique id javascript
how to generate unique id in html
generate 10 digit unique number in javascript
how to get current user login name using javascript
javascript generate unique string
browser unique id javascript
how to generate sequence id in javascript

So i need to display the user id that has been generated in javascript but i have problem to display it on textbox.

here's the javascript coding:

  function AddDetails(){
      var button = document.getElementById('button');
      button.addEventListener('click', SaveDetails, false);
    }

    function SaveDetails(){

      var CreateuserID = generateuserID();
      document.getElementById('userID').value = CreateuserID;

      var name = document.getElementById('userName').value;
      var occupation = document.getElementById('userOccupation').value;
      sessionStorage.setItem(name, occupation);
      display();

      var name = document.getElementById('userName').value = "";

  var occupation = document.getElementById('userOccupation').value = "";  
}

function display(){
    var output = document.getElementById('output');
    output.innerHTML = "";

    for(var i=0;i<sessionStorage.length;i++)
    {
        var name = sessionStorage.key(i);
        var occupation = sessionStorage.getItem(name);
        output.innerHTML += name+"|"+occupation+"<br>";
    }

}

function generateuserID()
{
    var userIDnum = 1;
    userIDnum++;
}
window.addEventListener('load', AddDetails, false);

This is the HTML code:

<!DOCTYPE HTML>
<html>

<head>
<link rel="stylesheet" href="Style.css">
<script src="script.js"></script>
</head>

<br>

<body>

<section id="input">
<form>

ID : <input type="number" readonly id="userID" value="">

Name : <input type="text" id="userName" >

Occupation : <input type="text" id="userOccupation">

<input type="button" id="button" value="Add">

</form>
</section>

<br>

<br>

Sort by: <select name="sort">
         <option value ="userID">userID</option>
         <option value ="userID">userName</option>
         <option value ="userID">userOccupation</option>
         </select>

<br>         

<section id="output">

</section  
</body>
</html>

Please help me i have been doing this for days and cant think of solution. I tried using ECMAScript and it wont work either. I'm still new and lack of knowledge.

There are many mistakes in your sample. You don't need sessionStorage just for static content. Here is the working codepen [ https://codepen.io/vivekamin/pen/gQMRPx ] .I have created for you from your code. Please check it out. Here is the code. I have used createElement just for sake of working example. However, if you have many elements to append you can use createDocumentFragment which is more efficient. I am just adding the last data to HTML, output element in form of paragraph text

HTML:

<body>

<section id="input">
<form>

ID : <input type="number" readonly id="userID" value="">

Name : <input type="text" id="userName" >

Occupation : <input type="text" id="userOccupation">

<input type="button" id="button" value="Add">

</form>
</section>

<br>

<br>

Sort by: <select name="sort" id ="sortBy">
         <option value ="userID">userID</option>
         <option value ="name">userName</option>
         <option value ="occupation">userOccupation</option>
         </select>

<br>         

<section id="output">

</section  
</body>

JS Code:

let counter = 1;
let data = [];
function AddDetails(){
  var button = document.getElementById('button');
  button.addEventListener('click', SaveDetails, false);
  let sortBy = document.getElementById('sortBy');
  sortBy.addEventListener('change', SortAndDisplay, false);
  document.getElementById('userID').value = counter;
}
function SortAndDisplay(){
  console.log("Sorting", document.getElementById('sortBy').value);
  let sortBy = document.getElementById('sortBy').value;
  if(sortBy === "userID"){
    data.sort(function (a, b) {
      return a.id - b.id;
    });
  }
  else{
    sortByNameOrOccupation(sortBy);
  }
  console.log(data);
  displayAfterSort();


}
function SaveDetails(){


  let name = document.getElementById('userName');
  let occupation = document.getElementById('userOccupation');
  data.push({id: counter, name: name.value, occupation: occupation.value });
  console.log(data);
  counter++;
  document.getElementById('userID').value = counter;
  name.value='';
  occupation.value ='';

  let outputSection  = document.getElementById('output');
  let outputData = data[data.length - 1];
  let newP = document.createElement('p');
  newP.textContent = outputData['id'] + " " + outputData['name'] + "  "+outputData['occupation'];
  outputSection.appendChild(newP);


}

function sortByNameOrOccupation(attribute){
  data.sort(function(a, b) {
    var nameA = a[attribute].toUpperCase(); // ignore upper and lowercase
    var nameB = b[attribute].toUpperCase(); // ignore upper and lowercase
    if (nameA < nameB) {
      return -1;
    }
    if (nameA > nameB) {
      return 1;
    }

    // names must be equal
    return 0;
  });
}

function displayAfterSort(){
  let outputSection  = document.getElementById('output');
  outputSection.innerHTML = '';
  let fragment = document.createDocumentFragment();
  data.forEach(function(d) {
      let p = document.createElement('p');
      p.textContent = d['id'] + " " + d['name'] + "  "+d['occupation'];
      fragment.appendChild(p);
  });
  outputSection.appendChild(fragment);

}


window.addEventListener('load', AddDetails, false);

How to asssign id to dynamically created textboxes?, Not clear what the issue are but the posted JavaScript seem functioning in it current form with a minor tweak. Based on the markup code. We can get the value of text input field using various methods in script. There is a text value property which can set and return the value of the value attribute of a text field . Also we can use jquery val() method inside script to get or set the value of text input field.

Your generateuserID() method doesn't return anything. Even if your returned userIDnum everyone's user id will be 2. Do you realize that JavaScript just runs in the browser? None of the variables will exist between different users.

How to Retrieve Data from a Text Box in Javascript, This article shows how you can retrieve user input data from a text box (or text The only other attribute which each text box needs is the id attribute. This is done by creating a Javascript variable and storing the value of the text box into The Javascript code to extract the information from the text boxes and then display it  The fetched values are serialized to a JSON string and assigned to the Values protected variable, this JSON string will be used on Client Side for recreating the dynamic TextBoxes after PostBack. Finally a loop is executed and values of the TextBoxes are displayed using JavaScript alert.

To set the value of the textbox. Do:

$('#//ID of the textbox').val(CreateuserID)

This is assuming that 'CreateuserID' is a string or int

EDIT: Your CreateuserID function will need to return a value.

User Input and Output in JavaScript, You can create checks in your JavaScript code that detects when the user doesn't enter a The text is then displayed to the user using the "alert" function. The element we're using is the div HTML tag with the id of "welcome. the following code uses the input prompt to enter the user's name in the "username" text field. <​! Create a <p> element with some text, use innerText to set the text, and append it to the document: var para = document.createElement("P"); // Create a <p> element para.innerText = "This is a paragraph"; // Insert text

How to Manage Text Input and Output with JavaScript for HTML5 , Here is a page with a web form containing two textboxes and a button. In web pages, the user interface is usually built of HTML and CSS. a program that can manage text input and output is to create the HTML framework. <fieldset> <​label>Type your name: </label> <input type = "text" id = "txtName" /> <input type  Once you got to build your web form using HTML and CSS, you’ll need to add JavaScript that will randomize a string of characters within the input of a field. You can then use the input in any way you want, from displaying it on the form, passing it to the success page or sending it to the form user through a confirmation email.

HTML id Attribute, The id attribute specifies a unique id for an HTML element (the value must be by JavaScript (via the HTML DOM) to manipulate the element with the specific id. Many jQuery plugins are available to implementing a popup on the web page. But if you want to use your own modal popup without using any third party jQuery plugins, this tutorial will help you to make a simple modal popup using JavaScript and CSS. This simple modal popup will less impact on page load time than the jQuery plugin.

#20 Taking Input from user in JavaScript, to generate a dynamic text box with unique id in asp.net with jquery and then looping with all the dynamic controls textbox value in javascript . The JavaScript prompt asks the user for his name and then displays the result in the "welcome" div. You can also use this same code to display the result in the span element using the same code except change the div tag to a span opening and closing tag.

Comments
  • As @kagronick said generateuserID() is not returning anything. Apart from that, it will always return 2, as you are resetting it to 1 in every generateuserID() call.
  • @Vivek should i use loop?
  • Check my codepen link in answer
  • omg thank you so much i will work on understanding some of the term you just mentioned above. I really need to learn more thank you once again!^^
  • i wanna ask how can i apply this code with the sorting?
  • check this codepen [ codepen.io/vivekamin/pen/gQMRPx ] . It's same codepen. I have updated it and also the code in answer.