20 {{ upvoteCount | shortNum }}
20 {{ upvoteCount | shortNum }}

JavaScript From Question.

by a7521
17 replies
Hi Warriors!

I am trying to validate a JS form without getting the alert to show up as a pop up on the page. I want the alert to be displayed inline with the webpage. I believe we need to use 'innerHtml' syntax but I am not sure how.

Also this is there anyway to make the form accept the coupon code in lower case?

Here's my code:

<html>
<head>
<title>Coupon code</title>
<script type="text/javascript">
function isValid(){ var coupon = document.getElementById('coupon').value;
if (coupon == "25OFF")
{alert('Coupon code has been applied.')}
else {alert('Invalid coupon code')} }
</script>
</head>
<body>
<form name="couponField" action="">
Coupon code: <input type="coupon" id="coupon" name="coupon"> <input type="button" value="Apply Coupon Code" onclick="isValid();"> </form> </body> </html>

Below is the code for the effect (the sliding button) that I am trying to achieve:

<html>
<head>
<title>Coupon code</title>
<script type='text/javascript'>
function notEmpty(elem, helperMsg){
var valid = false; if(elem.value.length == 0){ document.getElementById('errorMessage').innerHTML = helperMsg; elem.focus(); }
else{
valid = true; }
return valid; }
</script>
</head>
<body>
<form action='something.php' method='POST' onsubmit="return notEmpty(document.getElementById('coup'), 'Please Enter a Valid Coupon Number')">
Coupon Code:&nbsp;<input TYPE = "text" NAME = "coupon field" id='coup' SIZE = "20" VALUE = ""/>
<span id='errorMessage'></span>
<input type="submit" value="Apply coupon code"/> </form>
</body>
</html>

Thanks in advance for your help!
#javascript #question
  • Profile picture of the author dutrowllc
    I suggest using Stackoverflow.com for this kind of question, its the bomb.
    {{ DiscussionBoard.errors[7194264].message }}
    • Profile picture of the author viescripts
      try this, make sure you use it on server side

      <html>
      <head>
      <title>Coupon code</title>
      <style>
      #error{
      color: red;
      font-weight: bold;
      }
      </style>
      </head>

      <body>
      <form name="couponField" action="">
      <span id="error"></span>
      Coupon code:
      <input type="coupon" id="coupon" name="coupon">
      <input type="button" id="submit" value="Apply Coupon Code">
      </form>

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <script>
      $('#submit').click(function(){
      if($('#coupon').val() == '25OFF'){
      $('#error').text('correct code!');
      }else{
      $('#error').text('wrong code!');
      }

      });
      </script>

      </body>
      </html>
      {{ DiscussionBoard.errors[7196270].message }}
      • Profile picture of the author a7521
        @dutrowllc thanks. I will check Stackoverflow out.
        @viescripts the script doesn't seem to run. I also tried copying and pasting the script section of the code between the <head> </head> tags but no luck. I am using Firefox.
        {{ DiscussionBoard.errors[7198105].message }}
        • Profile picture of the author viescripts
          copy it to your webhosting, see the same uploaded here:
          http : / / jpesafelists dot com/victor/19/
          {{ DiscussionBoard.errors[7202114].message }}
          • Profile picture of the author Sitesupplier
            Don't use innerHTML, use textContent. Manipulating innerHTML is for manipulating the HTML, not just text. However, if you want an HTML-formatted message, go right ahead.

            I've made a little sample for you on JSFiddle, feel free to play with it.

            Edit this Fiddle - jsFiddle
            {{ DiscussionBoard.errors[7205017].message }}
            • Profile picture of the author a7521
              @viescripts ....thanks for the code! It is exactly what we were looking for. We appreciate it much.
              {{ DiscussionBoard.errors[7206876].message }}
              • Profile picture of the author viescripts
                Originally Posted by a7521 View Post

                @viescripts ....thanks for the code! It is exactly what we were looking for. We appreciate it much.
                btw I found the problem why it was not working locally, google gave a wrong link to jquery library:
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>


                they forgot the http://.


                Find the piece of code above and swap it with this one:
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>


                on your local machine should work too as JavaScript is interpreted by browser.
                {{ DiscussionBoard.errors[7207397].message }}
                • Profile picture of the author a7521
                  Thanks for the code snippet viescripts. Is it possible to remove validation if the user leaves the field empty? This is a field for a coupon code input. So some users may have the code and some won't. The ones that won't will leave the field empty. We still want them to go ahead and submit their order. On the other hand the ones that do will enter the promo code - 25OFF to get a 25% discount on their order. When they do the code 25OFF will be validated for an exact match. Can this be done? Thanks again for your help!
                  {{ DiscussionBoard.errors[7207491].message }}
                  • Profile picture of the author viescripts
                    Originally Posted by a7521 View Post

                    Thanks for the code snippet viescripts. Is it possible to remove validation if the user leaves the field empty? This is a field for a coupon code input. So some users may have the code and some won't. The ones that won't will leave the field empty. We still want them to go ahead and submit their order. On the other hand the ones that do will enter the promo code - 25OFF to get a 25% discount on their order. When they do the code 25OFF will be validated for an exact match. Can this be done? Thanks again for your help!
                    This is just a example of how it would work.
                    The button doesn't submit the form, it's just a button.

                    If you need to check the coupon coe, you might want to do that on the result page (e.g. after form submission). This is usually checked by php or any other language.

                    JavaScript is not ok for such a thing.
                    {{ DiscussionBoard.errors[7213096].message }}
                    • Profile picture of the author a7521
                      Viescripts,
                      Thanks for the reply. We do have a php script in place that does the actual submitting and applying of the discount code. I was referring to your code (@ 10-19-2012, 05:59 AM). It validates the discount code '25OFF', so if the user enters anything other than 25OFF it gives an error message. However it also gives an error message if the field is left blank. Is there any way to remove the validation for the empty field but still keep the validation for the '25OFF' discount code? So the field will return an error message if the user types anything other than '25OFF' but will not give an error if the field is left blank. Thanks again.
                      {{ DiscussionBoard.errors[7219051].message }}
                      • Profile picture of the author viescripts
                        modified java script version:

                        $('#submit').click(function(){
                        if($('#coupon').val() == '25OFF'){
                        $('#error').text('correct code!');
                        }else if($('#coupon').val() == ''){
                        $('#error').text('form submitted, with no coupon discount code!');
                        }else{
                        $('#error').text('wrong code!');
                        }
                        {{ DiscussionBoard.errors[7220055].message }}
                        • Profile picture of the author Sitesupplier
                          Are you still looking for help with this problem? It doesn't sound too complex, but I concur that JavaScript is not really the most appropriate language for this. Granted, it would seem to be, but you're just doubling up on your code and error checking since you have to write it in two languages.

                          The discount coupon should be checked and validated in PHP, primarily. Since JavaScript can be disabled, your code can be rendered useless and there's nothing you can do about it. It should be used as a secondary check or simply for the sake of completeness and user-friendliness, not for anything else.

                          Once your POST has been made, you can just call the necessary PHP script with the "action" property on the form element, for example:

                          Code:
                          <form method="post" action="path_to_php_file.php">
    <!-- form elements -->
</form>
                          {{ DiscussionBoard.errors[7226735].message }}
                          • Profile picture of the author a7521
                            Thanks for the suggestion Sitesupplier. PHP will certainly be a better way to go. Also with JS there's a chance that the user may see our coupon code which can be avoided if we use PHP.
                            {{ DiscussionBoard.errors[7238234].message }}
                        • Profile picture of the author a7521
                          Thanks for the modified code Viescripts. Appreciate it!
                          {{ DiscussionBoard.errors[7238224].message }}
            • Profile picture of the author a7521
              @sitesupplier...thanks for taking the time to write the code. Also thanks for the helpful tip about the textcontent syntax. The code runs perfectly fine on JSfiddle. However if we copy and save it to a notepad as an HTML file it does not execute the error message. I have copied the JS and the CSS part of the code in the <head> section. I also tried - jsFiddle demo and then copied and pasted the code exactly like it is by doing 'View Source'. However in both cases no error message is displayed. Is there any other way for me to test the code? Thanks again for taking the time and helping us out.
              {{ DiscussionBoard.errors[7206900].message }}
  • Profile picture of the author seowonder56
    Instead of using javascript you should use server side script validation according to me its the best way to do it
    {{ DiscussionBoard.errors[7233624].message }}
    • Profile picture of the author a7521
      Thanks for the suggestion seowonder56.
      {{ DiscussionBoard.errors[7238238].message }}

Trending Topics