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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    New Coder
    Join Date
    Jul 2004
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    javascript challenged

    Hi All,

    Have a challenge in a set of code the I am in dev with now. I am attempting to develope a javascript for price calculation in shopping cart but having a major brain f*rt.

    I am tying to take a combination of 3 radio groups and a series of check boxes that makes up the 4th group and onclick or onchange etc, to calculate the form and write to a text box. Easy huh. well here is the kicker. the radio and check box groups are populated with data from a database and the value structure is 'text_text_number' on 3 and 'text_number' on the other.

    I need to be able to catch, split and calulate this and then post to the text box for the post.

    I know I can take the var and split it but having fog on the structure.

    Any clue, Boy do I need one.
    THanks
    dellis777

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,047
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You need to post the related html codes.

  • #3
    New Coder
    Join Date
    Jul 2004
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks guess that would help. here is a psuedo code that will represent what I am trying to do. The real code is php dynamic and is a bit long.

    <html>
    <head>
    <title>test calc</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body>
    <form name="form1" method="post" action="">
    <p>
    <label>Group 1<br>
    <input type="radio" name="group1" value="test_test_1">
    <!-- need to get the number only onclick or in the function -->
    test1
    <br>
    <input type="radio" name="group1" value="test_test_2">
    test2</label>
    </p>
    <p>
    <label>Group 2<br>
    <input type="radio" name="group2" value="test_test_3">
    test3<br>
    <input type="radio" name="group2" value="test_test_4">
    test4</label>
    </p>

    <p>
    <label>Group 3<br>
    <input type="radio" name="group2" value="test_test_5">
    test5<br>
    <input type="radio" name="group2" value="test_test_6">
    test6</label>
    </p>
    <p>Group 4<br>
    <input name="group4" type="checkbox" id="group4" value="test_7">
    </p>
    <p>
    <input type="text" name="textfield">
    Data calculates here</p>
    <p>
    <input type="submit" name="Submit" value="Submit">
    <br>
    </p>
    </form>
    </body>
    </html>
    Last edited by dellis777; 07-05-2004 at 03:41 AM.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,047
    Thanks
    0
    Thanked 251 Times in 247 Posts
    What do you want to do? Extract and add the numbers in the value attribute of the selected radio buttons and checkbox and then put the sum in the textfield?

  • #5
    New Coder
    Join Date
    Jul 2004
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that sums it up. Being that with is served up from the server the groups will appear for different product.
    Last edited by dellis777; 07-05-2004 at 05:36 AM.

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this line just gets the number, on a string.

    number=string.split("_")[string.split("_").length-1];

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,047
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by Garadon
    this line just gets the number, on a string.

    number=string.split("_")[string.split("_").length-1];
    For efficiency, you need to split only once. And you need to convert it to number in order to use it for mathematical operation.

    var arr = string.split("_");
    var num = parseInt(arr[arr.length-1], 10);
    alert(num);

  • #8
    New Coder
    Join Date
    Jul 2004
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This what I was starting with as far as the script;

    var obj = document.form1;
    var ffield = group1;
    for (i=0;i<obj.ffield.length;i++) {
    if (obj.ffield[i].checked) {
    fabs = obj.ffield[i].value.split("_");
    return fabs[2];
    }
    }

    or at least this was the 1st attempt. but was having issues with it as I would have to do once of these for every group. so where would I add the code idea that was posted and then after the parse the calculation for the text box.

  • #9
    New Coder
    Join Date
    Jul 2004
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok once I got out of the pattern I was working in I applied this version and was able to get the number from the string. Now the issue is to calculate the number and drop it in the box.

    base html
    <html>
    <head>
    <title>test calc</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript">

    function doStuff(s){
    var arr = s.split("_");
    var num = parseInt(arr[arr.length-1], 10);
    return num;
    }
    </script>
    </head>

    <body>
    <form name="form1" method="post" action="">
    <p>
    <label>Group 1<br>
    <input type="radio" name="group1a" id="group1a" value="test_test_1" onClick="doStuff('test_test_1');">
    <!-- need to get the number only onclick or in the function -->
    test1
    <br>
    <input type="radio" name="group1a" id="group1a" value="test_test_2" onClick="doStuff('test_test_2');">
    test2</label>
    </p>
    <p>
    <label>Group 2<br>
    <input type="radio" name="group2" value="test_test_3" onClick="doStuff('test_test_3');">
    test3<br>
    <input type="radio" name="group2" value="test_test_4" onClick="doStuff('test_test_4');">
    test4</label>
    </p>
    <p>
    <label>Group 3<br>
    <input type="radio" name="group2" value="test_test_5" onClick="doStuff('test_test_5');">
    test5<br>
    <input type="radio" name="group2" value="test_test_6" onClick="doStuff('test_test_6');">
    test6</label>
    </p>
    <p>Group 4<br>
    <input name="group4" type="checkbox" id="group4" value="test_7" onClick="doStuff('test_7');">
    </p>
    <p>
    <input type="text" name="textfield">
    Data calculates here</p>
    <p>
    <input type="submit" name="Submit" value="Submit">
    <br>
    </p>
    </form>
    </body>
    </html>

  • #10
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What is the goal of that script? I copied it just to see what it would do, and it doesnt seem to do anything.
    LovesWar

  • #11
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well it all does seem alittle goofy, but that is what happens when working with psuedo code. We do not have the Big Picture.

    Anyways, get rid of all the onclick events you are using. Unless of course there is a compelling reason to use them to calculate on the fly, in which case add the calculate function call to each radio button and checkbox as you desire. [onclick="calculate(this.form)"].

    Elsewise, remove all that and replace with this.
    Adding the onsubmit handler highlighted in red.

    Code:
    <script type="text/javascript">
      function calculate(form){
       var total = '';
        for(var i=0; i<form.elements.length; i++){
          if(form.elements[i].type.match(/radio|checkbox/i) && form.elements[i].checked){
             total = (total*1+form.elements[i].value.match(/\d+/)*1);
          }
        }    form.textfield.value = total;
      }
    </script>
    </head>
    
    <body>
    <form name="form1" method="post" action="" onsubmit="calculate(this)">
    .....Willy

  • #12
    New Coder
    Join Date
    Jul 2004
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this is for a shopping cart that must change the text field on click and change the figure as each the fields change. and has to be seen when changed.

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,047
    Thanks
    0
    Thanked 251 Times in 247 Posts
    The code that Willy posted can still be used for that.
    Quote Originally Posted by Willy Duitt
    Anyways, get rid of all the onclick events you are using. Unless of course there is a compelling reason to use them to calculate on the fly, in which case add the calculate function call to each radio button and checkbox as you desire. [onclick="calculate(this.form)"].

  • #14
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dellis777
    this is for a shopping cart that must change the text field on click and change the figure as each the fields change. and has to be seen when changed.
    Well gheesh;

    We are not mind readers. perhaps, next time you post you will actually give us something to work with. Regardless, as I said, if you have a compelling reason you could add the onclick event handler to each radio button/checkbox. Myself, I'm too lazy for all that and besides, if these fields are generated serverside, why bother trying to add more code than necassary.

    As a parting gift, below you will find a function where I added a few more lines of code and once placed in the head will automagically calculate your radio buttons and checkboxes. All without an event handler.

    Code:
    <script type="text/javascript">
     <!--//
      function calculate(){ 
       var form = document.forms['form1'], total = 0; 
        for(i=0; i<form.elements.length; i++){
         var input = form.elements[i]; 
          if(input.type.match(/radio|checkbox/i) && input.checked){
             total = (total+input.value.match(/\d+/)*1);
          }  input.onclick = new Function("calculate()");
        }    form.textfield.value = total;
      }      window.onload = calculate;
     //-->    
    </script>
    ......Willy

    BTW: I'm attaching a working text file using the psuedo codes you previously posted so that you don't get lost.
    Attached Files Attached Files

  • #15
    New Coder
    Join Date
    Jul 2004
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thats ok my crystal ball is broke too. The code works great except had a issue with an instance if the first two section of the value have a number in it it grabs that number instead of the last set in the array which is the price.
    Also if there is a comma in the price it returns only the digit before the comma.

    This is the actual project and the dev addy I thank you all the input so far.

    http://foleyfurniture.com/dev/index....id=3&dtlzpg=15


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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