CODEWITHSUNDEEP
javascripthtml
oofssup13
oofssup13

Reputation: 3

Generate user id using javascript and display it in textbox

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.

Upvotes: 0

Views: 4388

Answers (3)

Vivek
Vivek

Reputation: 1525

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);

Upvotes: 0

kagronick
kagronick

Reputation: 2688

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.

Upvotes: 1

JamesS
JamesS

Reputation: 2300

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.

Upvotes: 0

Related Questions