Member Avatar for subrata_ushasi 
Hi all ,

I have one text box and submit button . I want to submit one by one value into the box and these values will be displayed one by one serially on the page .
ex. aaaa then
    bbbb then
    cccc then will display 


    <input type="text" name="txt" value=""><input type="submit" name="Submit" value="Submit">





Subrata Nandi
  • 3 Contributors
  • 3 Replies
  • 191 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by subrata_ushasi

Dani AI

Generated

Nice simple use-case — as showed, you can add values client-side. Building on that: use a semantic list, insert text safely (avoid innerHTML), support Enter-key via a form submit, and optionally persist entries with localStorage or send them to a PHP endpoint with AJAX. The example below keeps the UX tight (clears and refocuses the input), prevents empty submissions, and is safe for pasted input like your aaaa, bbbb, cccc examples.

<form id="adder">
  <input id="txt" name="txt" autocomplete="off" placeholder="Type value and press Enter">
  <button type="submit">Add</button>
</form>

<ul id="list" aria-live="polite"></ul>

<script>
(function(){
  const form = document.getElementById('adder');
  const input = document.getElementById('txt');
  const list = document.getElementById('list');

  // restore persisted entries
  const saved = JSON.parse(localStorage.getItem('entries') || '[]');
  saved.forEach(v => { const li = document.createElement('li'); li.textContent = v; list.appendChild(li); });

  form.addEventListener('submit', function(e){
    e.preventDefault();
    const val = input.value.trim();
    if (!val) return;
    const li = document.createElement('li');
    li.textContent = val;           // safe insertion (no innerHTML)
    list.appendChild(li);
    input.value = '';
    input.focus();

    const entries = Array.from(list.children).map(li => li.textContent);
    localStorage.setItem('entries', JSON.stringify(entries));

    // optional: send to server (PHP) for persistent, multi-user storage
    // fetch('/save.php', { method: 'POST', headers: {'Content-Type':'application/x-www-form-urlencoded'}, body: 'value=' + encodeURIComponent(val) });
  }, false);
})();
</script>

Notes and troubleshooting:

  • Use textContent (not innerHTML) to avoid XSS when users paste text.
  • aria-live="polite" helps screen readers announce new items.
  • If entries must survive across devices or be shared, submit each value to a server endpoint and validate/escape server-side (never trust client input).
  • If Enter doesn't work, ensure the input is inside a form or handle keydown for Enter.
  • Thanks to for the working idea and to for the AJAX hint — use AJAX/fetch when you need server persistence.

Recommended Answers

All 3 Replies

Member Avatar for ndeniche

You can do this by using . It's an incredibly useful tool.

Member Avatar for Biiim

Heres a basic example of what i think you're asking:

<script type='text/javascript'>
function addValue(eid,addtoeid){
    var obj = document.getElementById(eid);
    var displayObj = document.getElementById(addtoeid);

    displayObj.innerHTML += obj.value+'<br/>';
    obj.value = '';
    obj.focus();
}
</script>
<input type='text' id='showText'/><a href='javascript:' onclick="addValue('showText','displayHTML');">Add</a><br/>

<div id='displayHTML'></div>
Member Avatar for subrata_ushasi

Biiim,

Thanks Biiim. Exactly this is I was looking for.

Subrata

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.