Member Avatar for drimacus

Hi, this is probably a trivial question but I'm so new to this I would learn a lot from any help... Why does the content in global variable "str" disappear as soon as I unclick the alertbox? How can I keep it? I put the string in a <div> and one see's the content disappear. here is the code :

<head>
<p>input your text </p>
<div>
<form method="get" id="testform" name="testform" onSubmit="document.str = subCont()">
<textarea name="locs" id="locs" cols="40" rows="5">
...
</textarea><br>
<INPUT TYPE=SUBMIT VALUE="Submit">
</form>
</div>
<div id="test"> </div>
</head>

<script type="text/javascript"> 
// I need the inputed text to stay in this variable
var str =new String();

function subCont(){
document.str=document.testform.locs.value;
document.getElementById("test").innerHTML= document.str;
alert(document.str);
return str;
}
</script>
  • 2 Contributors
  • 2 Replies
  • 354 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by drimacus

Dani AI

Generated

Good fix by (preventing the submit) and useful notes from about using string literals. A few concise, practical improvements that readers often miss:

  • Avoid inline onSubmit. Attach a handler with addEventListener and call event.preventDefault() so the page does not reload. Use document.getElementById to read the textarea value (this keeps your code explicit and avoids relying on legacy automatic globals).
  • If you need the value to survive a full page reload, persist it (for example, with localStorage or sessionStorage) instead of trying to keep a global variable across navigations.
  • Do not attach custom data to document (for example document.str); use a proper variable or storage API. Prefer a string literal ('') over new String() and prefer textContent over innerHTML to avoid accidental HTML injection.

Example: unobtrusive submit handling (no page refresh):

document.getElementById('testform').addEventListener('submit', function (e) {
  e.preventDefault();
  var value = document.getElementById('locs').value;
  document.getElementById('test').textContent = value;
  // optionally persist:
  localStorage.setItem('locs', value);
});

Example: restore on load:

window.addEventListener('DOMContentLoaded', function () {
  var saved = localStorage.getItem('locs');
  if (saved) document.getElementById('test').textContent = saved;
});

Quick troubleshooting: open the browser console for errors, confirm the handler actually runs, and check whether a server redirect or form action is still triggering a navigation. These checks will save time compared with guessing why a variable “disappeared.”

Recommended Answers

All 2 Replies

Member Avatar for Member #905211

1. You don't need document.str, just str.
2. Use literals. var str = ''; instead of var str = new String();
In your case, str is going to be of type object as String() is an object where as if you use a literal it will be of type string.

Type | Literal
--------------------
object | {} (example: {name: 'Bob', age: 43, gender: 'male', old: true})
array | [] (example: [0, 1, 2, 3, 4, 5, 6])
string | '' (example: 'Test')
regex | // (example: /^[0-9]{3}$/)
number | 0 (example: 0 or 1 or 12312312, all numbers are floating point)
function| function(){} (example: function(){ alert('test'); }; )

3. setting the str value in the onsubmit does nothing as it will be cleared once the page refreshes.

Edited by Member #905211 because: n/a
Member Avatar for drimacus

Thank you so much for your help. I didn't know about the refreshing bit. I now prevent that somehow and my code works like I want with this (onSubmit returns false):

<head>
    <p>input your text </p>
    <div>
    <form method="get" id="testform" name="testform" onSubmit=" subCont();return false;">
    <textarea name="locs" id="locs" cols="40" rows="5">
    ...
    </textarea><br>
    <INPUT TYPE=SUBMIT VALUE="Submit">
    </form>
    </div>
    <div id="test"> </div>
    </head>
     
    <script type="text/javascript">
    // I need the inputed text to stay in this variable
    var str =new String();
     
    function subCont(){
    str=document.testform.locs.value;
    document.getElementById("test").innerHTML= str;
    }
    </script>
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.