How to Escape a Space in JavaScript

Hello, Experts;

I'm using a form with a JS verification script. When the form is processed (FormMail.pl), the input name appears as it is in the input script, with an underscore between the first & second words, in this example, First_Name. I'd like to have that processed so that when it shows up in the recipients email, First Name has a space in it, but the JS verify script won't allow it. Is there a way to make this happen using an escape of some kind? I've tried %20 in every way I can think of with no success.

I'd also like to have a colon after First Name: when it arrives with the processed information, but the JS won't allow that either. If that solution could be included as well, that would be great.

Many thanks.

Cayce
<input id="required_field" name="First_Name"  type="text" onFocus="this.className='changedField'" class="textfield_red" style="width:100%;" size="45" maxlength="200" />



<script type="text/javascript">
function verify() {
var errmsg = "";

if (document.reg_form.First_Name.value=="Required Field") {
errmsg = errmsg + " - First Name:\n";
}
//alert if fields are empty and cancel form submit
if(errmsg != "") {
alert("Please Check the Following Fields: \n"+errmsg);
return false;
}
return true;
}
</script>

Open in new window

dcayceAsked:
Who is Participating?
 
nap0leonConnect With a Mentor Commented:
I changed your script from:
document.reg_form.First_Name.value
to
document.getElementById("First_Name")

Your original way, you cannot use spaces.
My way, you can.

As mentioned above, here is the modified version of the form that fully support the field being named and IDd "First Name":
<form name="reg_form">
First Name: <input id="First Name" name="First Name"  type="text" onFocus="this.className='changedField'" value="1 2 and 3" class="textfield_red" style="width:100px;" maxlength="200" />
<br/><a href="javascript:verify();">verify</a>
</form>

<script type="text/javascript">
function verify() {
  var errmsg = '';

  if (document.getElementById("First Name")){
    //field exists on page
    if (document.getElementById("First Name").value == ''){
      errmsg += '\n - First Name was blank';
    } else {
      //not blank!
      //Do some testing for only letters, numbers, apostrophes, hypens, spaces, etc.
      //Testing - let's pretend "123 and 3" is an invalid name
      if (document.getElementById("First Name").value == "1 2 and 3"){
        errmsg += '\n - First Name:' + document.getElementById("First Name").value + ' is invalid';
      }
    }

    if(errmsg != "") {
      //there were errors
      alert('Please Check the Following Fields: \n'+errmsg);
      //return false;
    } else {
      alert('All fields verified');
      //return true;
    }
  }
}


</script>

Open in new window

0
 
yjchong514Commented:
0
 
nap0leonCommented:
element IDs and Names cannot have spaces in them.
You mention that you want the field name to show up as "First Name" in a users email... so I presume you are emailing them the error?  If so, you can simply do the replace when you write the text to the email.

But... you are saying the "verify script" won't allow the user's First Name to have a space in it.  The script you posted above allows for any first name (including blank) that is not the text "Required Field".

Here is a mocked up sample based on your code that validates that the First_Name field is non-empty.  Since this is a name field, you may want to add other validation measures (like no numbers etc.)...
<form name="reg_form">
<input id="required_field" name="First_Name"  type="text" onFocus="this.className='changedField'" value="" class="textfield_red" style="width:100%;" size="45" maxlength="200" />
<br/><a href="javascript:verify();">verify</a>
</form>

<script type="text/javascript">
function verify() {
var errmsg = "";

if (document.reg_form.First_Name.value=="") {
  errmsg = errmsg + " - First Name:\n";
}

//alert if fields are empty and cancel form submit
if(errmsg != "") {
  alert("Please Check the Following Fields: \n"+errmsg);
  //return false;
}
  alert('All fields verified');
  //return true;
}
</script>

Open in new window


Perhaps you can clarify what you are expecting of the javascript.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
dcayceAuthor Commented:
Thanks, yjchong514:

But how would I incorporate that escape function, document.write(escape("First Name"));, into my script?
0
 
nap0leonCommented:
This one's a little better.  It has placeholder section for any non-blank validation you want to run.

For testing purposes, the default value of First Name is "1 2 and 3" which fails validation and is alerted to the user.

<form name="reg_form">
First Name: <input id="First_Name" name="First_Name"  type="text" onFocus="this.className='changedField'" value="1 2 and 3" class="textfield_red" style="width:100px;" maxlength="200" />
<br/><a href="javascript:verify();">verify</a>
</form>

<script type="text/javascript">
function verify() {
  var errmsg = '';

  if (document.getElementById("First_Name")){
    //field exists on page
    if (document.getElementById("First_Name").value == ''){
      errmsg += '\n - First Name was blank';
    } else {
      //not blank!
      //Do some testing for only letters, numbers, apostrophes, hypens, spaces, etc.
      //Testing - let's pretend "123 and 3" is an invalid name
      if (document.getElementById("First_Name").value == "1 2 and 3"){
        errmsg += '\n - First Name:' + document.getElementById("First_Name").value + ' is invalid';
      }
    }

    if(errmsg != "") {
      //there were errors
      alert('Please Check the Following Fields: \n'+errmsg);
      //return false;
    } else {
      alert('All fields verified');
      //return true;
    }
  }
}


</script>

Open in new window

0
 
dcayceAuthor Commented:
Thanks, nap0leon, but that;s not what I'm after.

Let's say the person filling out the form is named David. When the name attribute in the input tag shows up in the form results email, it displays as First_Name: David. I'm trying to figure a way to have it come up in a more conventionally readable format, with a space between 'First' and 'Name' instead of an underscore. So it would read: First Name: David. But we aren't allowed to use a blank in either script, unless there's a way to escape the space.
0
 
nap0leonCommented:
What is the code for the email?
That is where you will want to replace "_" with " ".
0
 
nap0leonCommented:
I took my form above and replaced all occurrences of "First_Name" with "First Name", and it works 100% in IE8, FF8, Chrome 16, and Opera 11.6

So, it's OK to use spaces in the field IDs and Names (contrary to what i wrote above).
Is the issue then that your PL script does not allow spaces in the field IDs?
0
 
dcayceAuthor Commented:
The issue is that the JS verfier script won't execute with a space between First & Name. So I've been forced to have an underscore there, which means I also have to have one in the form script, which means it will show in the email form results. It in the JS verification script that I need the escape for.

Thanks again.

Cayce
0
 
dcayceAuthor Commented:
It this part of the JS script where I'd like to replace the underscore with a space, but the space needs to be escaped:

if (document.getElementById("First_Name"))
0
 
dcayceAuthor Commented:
Thanks, nap0leon:

I'm leaving the office in just a few minutes but will give this a run in just a bit.

Cayce
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.