We help IT Professionals succeed at work.

javascript to populate one message

daz1234
daz1234 asked
on
258 Views
Last Modified: 2010-04-06
the entry M might have predefined or you can enter in your own text

how can i get it to accept only 1 entry m instead of sending to m entries

sample script below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<body bgcolor="#FFFFFF">
<style type="text/css">
body, td { font-family: Verdana, Helvetica, sans-serif; font-size: 10pt;}
A       { color : #FF6600; text-decoration : none; }
A:Hover { color : #999999; text-decoration : underline;}
.sm {font-size: 8pt;}
.tiny {font-size: 4pt;}
.heading {font-size: 13pt;font-weight: 800; color: #FF6600;}
.lbl { font-size: 9pt; font-weight: 700;}
td.error  {
  background-color: #FFC;
  padding-right: 5pt;
  padding-left: 5pt;
  padding-top: 3pt;
  padding-bottom: 3pt;
  border-width:1px;
  border-style:solid;
  border-color: #996;
  font-weight: 700;
  color: #F00;
}
td.trow  {
  padding-right: 2pt;
  padding-left: 2pt;
  border-style:solid;
  border-bottom-width:2px;
  border-right-width: 0px;
  border-left-width:1px;
  border-top-width:0;
  border-color: #FFF;
  background-color: #CCC;
  text-align: center;
  font-size : 8pt;
  font-weight: 700;
}
td.orow  {
  padding-right: 4pt;
  padding-left: 4pt;
  padding-top: 2pt;
  padding-bottom: 1pt;
  border-width:1px;
  border-style:solid;
  border-top-width:0;
  border-bottom-width:0;
  border-right-width:0;
  font-size : 8pt;
  border-color: #FFF;
}
td.erow  {
  padding-right: 4pt;
  padding-left: 4pt;
  padding-top: 2pt;
  padding-bottom: 1pt;
  border-width:1px;
  border-style:solid;
  border-top-width:0;
  border-bottom-width:0;
  border-right-width:0;
  font-size : 8pt;
  border-color: #FFF;
}
td.omsg  {
  background-color: #E8E8CF;
  padding-right: 3pt;
  padding-left: 3pt;
  padding-top: 2pt;
  padding-bottom: 2pt;
  border-width:1px;
  border-style:solid;
  border-color: #FFF;
}
td.cmsg  {
  background-color: #E8DCCF;
  padding-right: 3pt;
  padding-left: 3pt;
  padding-top: 2pt;
  padding-bottom: 2pt;
  border-width:1px;
  border-style:solid;
  border-color: #FFF;
}
</style>
<title>Send SMS Form</title>
</head>
<body>
<center>

<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width=904
 style='width:678.0pt;mso-cellspacing:0cm;background:#E4E4E4;mso-padding-alt:
 0cm 0cm 0cm 0cm'>
 <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
</table>

<SCRIPT language=Javascript>
function check(nStr,mStr)
{
  if (nStr.length==0){
     alert("The Mobile Number is empty.");
       return false;
  }
  if (mStr.length==0){
     alert("The Message is empty.");
       return false;
  }
  return true;
}
</SCRIPT>
<body bgcolor="#FFFFFF" text="#666666">
<p><b><font size="+1">Send:</font></b></p>

<form name="form1" method="get" onsubmit="Javascript:return check(this.N.value,this.M.value);" action="http://csend.dll">
<table border=0>
<td> Sent From </td>
<td>
      <select name=sendfrom>
      <option value=test> test</option>
      
</td>
<td> Gateway </td>
<td>
            <select name=commmethod>
      <option value=com1> com1</option>
    </td>

  </table>
 <table width="91%" border="2">
  <!--
   <tr>
      <td>Sleep Amount:</td>
      <td>
        <input type="text" name="S" value=4000>
        (Optional, default is 4000) </td>
    </tr>
  -->
 
    <tr>
      <td>The Mobile Number:</td>
      <td>
        <input type="text" name="N">
        </td>
    </tr>
    <tr>
      <td height="70">The Message Content (max. 160 characters per message):</td>
      <td height="70">
        <textarea name="M" rows=5 cols=50></textarea>
      </td>
    </tr>
      <!--
    <tr>
      <td height="19">The Recipient Number/s:</td>
      <td height="19">
        <input type="text" name="O">
       </td>
    </tr>
      -->
    <tr>
      <td>&nbsp;</td>
      <td>
        <input type="submit" name="Submit" value="Submit">
        <input type="reset" name="Submit2" value="Reset">
      </td>
    </tr>
  </table>

<td> Message templates </td>
<td>
            <select name="M">
                        <option>1</option>
                        <option>2</option>
                                                                <option>3</option>
                        <option>4</option>

                        
    </td>

</form>
<p>&nbsp;</p>
<p>
</body>
</html>

Comment
Watch Question

Commented:
The first thing that jumps out at me is that you have two things named "M". Change the name of your select box, and you should be fine.

Commented:
That is, if you have <textarea name="M"> and <select name="M">, then "this.M" will return a collection of the form objects named M. I like to name things according to the type of control, like "txtM" and "selM". Better yet, I would make the names much more descriptive than "M" and "O", like "messageTemplate" and "messageContent" and "recipientNumber".

Author

Commented:
i need the function to select one or the other of m

ie

if m has nothing entered in the first section and a user selects from drop down list m is to be set as

Commented:
I agree with ftaco96 that you use a different name for the select. I used "T" for template.

for updating the textarea with the template, you can use something like

<select name="T" onchange="this.form.M.value=this.option[this.selectedIndex].value">
      <option value="sample template text">1</option>
      <option value="another sample template text">2</option>
      <option value="more sample template texts">3</option>
      <option value="anything text template">4</option>
</select>

Commented:
So if I have this right, you want to check to see if anything is in the textarea M and if not, make sure the user selects a template from the dropdown M. Do you want to force the user to physically make a selection in the dropdown if the textarea M is blank?

Author

Commented:
no

i need the value m to be either text or select option

Commented:
multiple fields having same name applies only to radio buttons. if you will use that kind of setup, i'm sure you will encounter browser problems as it will become confusing which of which 'M' are you referring to. any reason why you would like to maintain that name to both?

Commented:
In that case, I would do the following…

1) Add an id to the textarea: <textarea name="M" id="txtM">
2) Add an id to the select box: <select name="M" id="selM">
3) Add an initial option to the select box: <option value="0">Select a template
3) Change the form's onsubmit like this: onsubmit="Javascript:return check(this.N,this.txtM,this.selM);")
4) Change the function to disable the one you don't need:

function check(nTxt,mTxt,mSel)
{
   var nStr = nTxt.value;
   var mStr = mTxt.value;
   var mVal = mSel.value;
   
   if (nStr.length==0){
      alert("The Mobile Number is empty.");
      return false;
   }
   if (mStr.length==0){
      if (mVal == 0) {
         alert("Please enter a message or select a message template.");
         return false;
      } else {
         mTxt.disabled = true;
      }

   } else {
      mSel.disabled = true;
   }
   return true;
}

Commented:
I have a feeling that since you're submitting this form straight to a DLL, you either don't have access to change the DLL code or it's much harder to change it than to make the webpage work around it, right?

Author

Commented:
thats coorect

Author

Commented:
is there a way to add the 2 messages together m1 & m2

Commented:
You mean the message content and the message template? I don't know what it'll buy you, but here goes...


You can do that by adding a hidden field like this:  <input type=hidden name=M id=hdnM>

...and then removing the names from the other 2.

Then in the javascript function do this:  form1.hdnM.value = form1.txtM.value + form1.selM.value;

...or since you already have vars in the function:  form1.hdnM.value = mTxt.value + mSel.value;


Author

Commented:
its not working as you described above

below script so far

<SCRIPT language=Javascript>
function check(nTxt,mTxt,mSel)
{
   var nStr = nTxt.value;
   var mStr = mTxt.value;
   var mVal = mSel.value;
   
   if (nStr.length==0){
      alert("The Mobile Number is empty.");
      return false;
   }
   if (mStr.length==0){
      if (mVal == 0) {
         alert("Please enter a message or select a message template.");
         return false;
      } else {
         mTxt.disabled = true;
      }

   } else {
      mSel.disabled = true;
   }
   return true;
}



</SCRIPT>
<body bgcolor="#FFFFFF" text="#666666">
<p><b><font size="+1">Send:</font></b></p>

<form name="form1" method="get" onsubmit=onsubmit="Javascript:return check(this.N,this.txtM,this.selM);" action="http://csend.dll">
<table border=0>
<td> Sent From </td>
<td>
      <select name=sendfrom>
     <option value=test> test</option>
     
</td>
<td> Gateway </td>
<td>
           <select name=commmethod>
     <option value=com1> com10</option>
    </td>

  </table>
 <table width="91%" border="2">
  <!--
   <tr>
      <td>Sleep Amount:</td>
      <td>
        <input type="text" name="S" value=4000>
        (Optional, default is 4000) </td>
    </tr>
  -->
 
    <tr>
      <td>The Mobile Number:</td>
      <td>
        <input type="text" name="N">
        </td>
    </tr>
    <tr>
      <td height="70">The Message Content (max. 160 characters per message):</td>
      <td height="70">
        <textarea name="M" id="txtM rows=5 cols=50></textarea>
      </td>
    </tr>
     <!--
    <tr>
      <td height="19">The Recipient Number/s:</td>
      <td height="19">
        <input type="text" name="O">
       </td>
    </tr>
     -->
    <tr>
      <td>&nbsp;</td>
      <td>
        <input type="submit" name="Submit" value="Submit">
        <input type="reset" name="Submit2" value="Reset">
      </td>
    </tr>
  </table>

<td> Message templates </td>
<td>
           <select name="M" id="selM">
                <option value="0">Select a template</option>
                    <option>1 error</option>
                    <option>2 error</option>
                    <option>3 error</option>
                    <option>4 error</option>

                   
    </td>

</form>
<p>&nbsp;</p>
<p>
</body>
</html>

Commented:
On this line: <textarea name="M" id="txtM rows=5 cols=50></textarea>

You need another " after txtM.

Commented:
Change this in the form tag: onsubmit=onsubmit="Javascript....

to this: onsubmit="Javascript....

Author

Commented:
when i select a message from template and submit
it keeps alerting with Please enter a message or select a message template.

Commented:
Try putting values in the other options...

                    <option value="1 error">>1 error</option>
                    <option value="2 error">>2 error</option>
                    <option value="3 error">>3 error</option>
                    <option value="4 error">>4 error</option>
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
top guy works like a treat thanks

Commented:
No problem.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.