Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript & PHP Form/Decision Tree

    I'm creating a decision tree/ "personality test" like webform. Basically the customer answers questions and depending on their answers (points) they get redirected to a different page and we get an email.

    So far I got everything working except the part where it calculates the total and passes to the php. If I manually enter a number for total it will work perfectly, but obviously I don't want to enter in a number manually I want it to calculate the number and then send that.

    So. This is what I have in my code (it has been clipped for readability )

    Code:
    <script LANGUAGE="JavaScript">
    <!--Hide JavaScript from Java-Impaired Browsers
    function test_it(entry) {
    if (entry.id!=null && entry.id.length!=0) {
    entry.id=""+ eval(entry.id);
    }
    computeForm(entry.form);
    }
    function computeForm(form) {
    var total=0
    
    for (var count=0; count<5; count++)
    {
    if (form.a[count].checked){
    var total=total+parseInt(form.a[count].id);
    }
    }
    
    for (var count=0; count<2; count++)
    {
    if (form.b[count].checked){
    var total=total+parseInt(form.b[count].id);
    }
    
    ......
    
    var form = document.forms['myForm'];
    	form.elements['total'].value = total;
    	alert(form.value); //nothing is popping up...but I can see the query string says total has nothing
    </SCRIPT>
    
    
    </head>
    
    <body>
    <form name="myForm"  onSubmit= "test_it();">
    <!--<form name="myForm" METHOD="POST" action="contactQuestionnaire.php" onSubmit= "test_it(); return false;"> -->
    <fieldset>
      <table border="0">
        <tr>
          <td width="300">Name:</td>
          <td>
            <label for="name"></label>
            <input name="name" type="text" id="name" tabindex="1" size="40" />
          </td>
        </tr>
        <tr>
          <td width="300">Address:</td>
          <td><label for="address"></label>
          <input name="address" type="text" id="address" tabindex="2" size="100" /></td>
        </tr>
        <tr>
          <td width="300">Email:</td>
          <td>
          <label for="email"></label>
          <input name="email" type="text" id="email" tabindex="3" size="40" />
          </td>
        </tr>
        <tr>
          <td width="300">Phone:</td>
          <td>
          <label for="phone"></label>
          <input type="text" name="phone" id="phone" tabindex="4" />
    </td>
        </tr>
        <tr>
          <td width="300">Would you like us to contact you to assist and provide product recommendations?</td>
          <td>
            <table width="200">
              <tr>
                <td><label>
                  <input name="contact" type="radio" id="contact_0" value="yes" checked="checked" />
                  Yes</label><label>
                  <input type="radio" name="contact" value="no" id="contact_1" />
                  No</label></td>
              </tr>
              <tr>
                <td></td>
              </tr>
            </table>
         </td>
        </tr>
      </table></fieldset>
     <fieldset><b>My experience level is:<br>
        </b>
      <input TYPE="radio" id="5" NAME="a" VALUE="brandNew">
      Brand New<br>
      <input TYPE="radio" id="10" NAME="a" VALUE="under2Years">
      Less than 2 years<br>
      <input TYPE="radio" id="15" NAME="a" VALUE="2to5Years">
      2 - 5 years<br>
      <input TYPE="radio" id="20" NAME="a" VALUE="5to10Years">
      5 - 10 years<br>
      <input TYPE="radio" id="30" NAME="a" VALUE="over10Years">
      10+ years<br><br>
      
     ....  
        <br />
        <input type="hidden" name="total" value="" />
          <input name="submit" TYPE="submit" VALUE="View Results"><br><br>
    
      
    </form>
    
    </body>
    </html>
    Thank you so much in advance!

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    1. Stay away from eval(). eval() is evil.
    2. Every time you call computeForm(), you reset the total to zero. Are you sure you want to do that?
    3. If you are using numbers for id, or if the id begins with a number, that's illegal. ids need to begin with either a letter or underscore.
    4. The code just before your closing script tag runs on every page load, before any HTML is loaded. It's not part of a function, as you have it pasted.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    1. Okay, what should I use instead?

    2. I don't see why this would be a problem since ideally I want the submit button to calculate the total and then send it to my php form, which then redirects them to the proper page.

    3. Hmm. I thought this might be a problem. However I need the form values to be sent to PHP so I need them to stay on values. Unless you have another suggestion?

    4. I'm not sure what to do about this :/

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,318
    Thanks
    203
    Thanked 2,566 Times in 2,544 Posts
    Quote Originally Posted by webtechstress View Post
    for readability )

    Code:
    <script LANGUAGE="JavaScript">
    <!--Hide JavaScript from Java-Impaired Browsers
    Javascript != Java!! They are two completely different languages.

    <script language=javascript> is long deprecated. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9).
    The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.

    Form validation of the pattern if (document.formname.formfield.value == "") - that is blank - is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. A proper name may only contain letters, hyphen, space and apostrophe.
    Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.


    It is your responsibility to die() if necessary….. - PHP Manual

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    1. If entry is an object and you're looking for the id, just use entry.id - you don't need to run it through the JS runtime to get it.
    2. I was reading quickly. Didn't think about it. Sorry.
    3. Can you replace the value (not the text of the checkbox, the value) with the ID and give the checkboxes a legal ID?
    4. Integrate it into one of your functions so that it's called only when needed.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,659 Times in 4,621 Posts
    This makes no sense:
    Code:
    function test_it(entry) { ...  }
    
    but then invoked via:
    
    <form name="myForm"  onSubmit= "test_it();">
    So the functiion is expecting an argument and will not work if not given one.

    But then, when you call it, you don't pass any argument!

    Then you have this nonsense line:
    Code:
    entry.id=""+ eval(entry.id);
    *IF* you had passed an argument to the function and *IF* that argument was an element with an id, then that line would manage to do the wonderful task of setting the id of the argument to the id of the argument. In other words, it does nothing at all.

    And then, finally, you do
    Code:
    computeForm(entry.form);
    Except, since entry is null, that line will get an error and so you will *NEVER* call computeForm( ) and that, of course, is why you don't see anything happen when you do the submit.

    You are never even managing to call computeForm!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,659 Times in 4,621 Posts
    This code is total hash:
    Code:
            var form = document.forms['myForm'];
    	form.elements['total'].value = total;
    	alert(form.value);
    First of all, as WolfShade said, since it is not INSIDE of any function, it simply runs when the page first starts up.

    But because it runs before the HTML for the <form> is even created, the first line there will *NOT* be able to find the form named "myForm". IT DOES NOT YET EXIST.

    By the same token at that point in the code, your computeForm function has not yet been invoked, so the total variable will be null. So you would be assigning null to the form field, if indeed the form field existed and the form containing it existed, neither of which is true.

    Finally, you try to alert the form.value but a form doesn't *HAVE* any value. Form *fields* have values.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,659 Times in 4,621 Posts
    I want the submit button to calculate the total and then send it to my php form,
    No, you do *NOT* want that.

    If the user disables JavaScript, then the total will *NOT* be calculated but the PHP page will still be invoked.

    Yes, you can calculate the total in JavaScript if you want to do so to display the value to the user.

    But you should *NEVER* rely upon JavaScript form validation or calculations. You should *ALWAYS* do validation and calculations in the PHP code. Yes, again, even if you did it in the JS code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Okay I'm trying to process all of these posts.

    Firstly, I know JavaScript and Java are different things....I took the personality test code from another source (which is quite possibly outdated, I'm not sure) and never noticed their comment calling it Java until you brought it up.

    And please bear with me, I'm a designer and programming is NOT my forte so what may seem obvious to you is not to me :/

    Believe me, coding this myself was my last resort as I was trying to find some sort of pre-made plugin that could do this for me to no avail. I'm always willing to learn, but I don't know what is valid/is not valid code just from looking at it.


    So basically what I'm getting from this is I should take out the counting code and do this all in php?

    The problem I am anticipating is the email-sending issue. $_GET is taking the VALUE of the form field (which is why I did something illegal and put the numbers/points in the ID initially). Getting the value works great for emails as it is sending me an email with the results from the test. But the automatic redirect is causing my problems as I can't calculate the points using ID. We want people to be able to see their results instantaneously instead of waiting for us to call them.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,659 Times in 4,621 Posts
    There's an easy fix for the points thing.

    Try something like this in your <form>:
    Code:
    <label><input type="radio" name="Experience" value="5: brandNew">Brand New</label><br/>
    <label><input type="radio" name="Experience" value="10: under 2 Years">Less than 2 years</label></br>
    <label><input type="radio" name="Experience" value="15: 2 to 5 Years">2 - 5 years</label></br>
    ... etc ...
    First, replace the meaningless name="a" with a name that relates to the purpose of the field. Secondly, put the number of points assigned right in the value= (note that I follow it with a colon to separate it from the descriptive part of the value).

    Now, in your PHP code, you can easily do this:
    Code:
    $totalPoints = 0
    
    $temp = explode( ": ", $_POST["Experience"]);  // and you SHOULD use POST,  not GET
    $experience = $temp[1];
    $points = $temp[0];
    $totalPoints += $points;
    
    $emailBody += "Your experience is $experience, which is worth $points points<br/>\n";
    
    ... and then do the next thing that is worth points ...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    webtechstress (11-01-2012)

  • #11
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    AWESOME!

    Thank you so much! This worked brilliantly.
    Last edited by webtechstress; 11-01-2012 at 04:07 PM. Reason: Figured out my issue


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •