www.webdeveloper.com
Results 1 to 12 of 12

Thread: Trying to get to fields to add together

  1. #1
    Join Date
    Jan 2018
    Posts
    10

    Trying to get to fields to add together

    Hi

    Would appreciate some advice as an amateur!

    I'm trying to get the code below to add up 2 rows/fields to give the total in the last field <input type="sum" input name="amount" value="" id="result" placeholder="Amount to pay..."> but it doesn't add the 2 together!


    <div class="form-row">
    <label>Property or Property Ref:</label>
    <div class="input-container">
    <input type="text" name="property" placeholder="Please tell us which property this payment relates to...">
    </div>
    </div>

    <script type="text/javascript">
    function calc(A,B,SUM) {
    var one = Number(A);
    if (isNaN(one)) { alert('Invalid entry: '+A); one=0; }
    var two = Number(document.getElementById(B).value);
    if (isNaN(two)) { alert('Invalid entry: '+B); two=0; }
    document.getElementById(SUM).value = one + two;
    }
    </script>

    <div class="form-row">
    <label>Amount to Pay (&pound</label>
    <div class="input-container">
    <input type="text" name="sum1" placeholder="Amount to pay...">
    <id="op1" value="" onChange="calc(this.value,'op2','result')" />
    </div>
    </div>


    <div class="form-row">
    <label>Non-internet/bank transfer handling fee:</label>
    <div class="input-container">
    <input name="sum2" value="5.00" id="op2" onChange="calc(this.value,'op1','result')" />


    <div class="form-row">
    <label>Total to Pay (&pound</label>
    <div class="input-container">
    <input type="sum" input name="amount" value="" id="result" placeholder="Amount to pay...">
    </div>
    </div>

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    22,335
    Moved to the JavaScript forum, as I don't see any PHP involved here.

    __
    "Well done....Consciousness to sarcasm in five seconds!" ~ Terry Pratchett, Night Watch

    How to Ask Questions the Smart Way (not affiliated with this site, but well worth reading)

    My Blog
    cwrBlog: simple, no-database PHP blogging framework

  3. #3
    Join Date
    Jan 2018
    Posts
    10
    Thanks

  4. #4
    Join Date
    Jul 2013
    Location
    Voorheesville NY USA
    Posts
    1,904
    Horrible looking piece of coding. Come on - you can't separate your JS from your html?

    You don't have a field named SUM. That's your problem (besides the coding style!).

    Plus - when posting code on these forums it is requested that you use the proper 'tags' to block out the code from the text of your post. In this case you should wrap your (re-written code?) in 'code' & '/code' each encased in []. As in:

    Code:
    This is my code
    JG
    PS - If you're posting here you should be using:

    error_reporting(E_ALL);
    ini_set('display_errors', '1');


    at the top of ALL php code while you develop it!

  5. #5
    Join Date
    Jan 2018
    Posts
    10
    Hi

    Thanks for the reply. I don't really know much code. Someone did it for us and then left some time ago and couldn't find anyone to do such a small job!

    So I'm desperately trying to find an answer in the meantime.

    Could you help and advise where I'd put the Sum field

  6. #6
    Join Date
    Jul 2013
    Location
    Voorheesville NY USA
    Posts
    1,904
    Upon further review - my bad. SUM is not the name, but merely an arg. So - what value are you passing to SUM? Is the id of an element?
    JG
    PS - If you're posting here you should be using:

    error_reporting(E_ALL);
    ini_set('display_errors', '1');


    at the top of ALL php code while you develop it!

  7. #7
    Join Date
    Jan 2018
    Posts
    10
    I had taken this sample code online and tried to change to suit

    <html>
    <head>
    <title>Text Summation</title>

    <script type="text/javascript">
    function calc(A,B,SUM) {
    var one = Number(A);
    if (isNaN(one)) { alert('Invalid entry: '+A); one=0; }
    var two = Number(document.getElementById(B).value);
    if (isNaN(two)) { alert('Invalid entry: '+B); two=0; }
    document.getElementById(SUM).value = one + two;
    }
    </script>

    <body>
    <form name="form" >
    Enter a number:
    <input name="sum1" id="op1" value="" onChange="calc(this.value,'op2','result')" />
    and another number:
    <input name="sum2" value="" id="op2" onChange="calc(this.value,'op1','result')" />
    Their sum is:
    <input name="sum" value="" id="result" readonly style="border:0px;">
    </form>

    </body>
    </html>

  8. #8
    Join Date
    Jul 2013
    Location
    Voorheesville NY USA
    Posts
    1,904
    Where are the CODE TAGS I TOLD YOU TO PLACE IN YOUR NEXT POST?

    Here is what I did to make you code easier to read. Note the addition of some elements that you left out which might have affected the operation. It works just fine for me using IE
    (note the use of CODE TAGS!!!)

    Code:
    <html>
    <head>
    <head>
    <title>Text Summation</title>
    <script type="text/javascript">
    function calc(A,B,SUM)
    {
    	var one = Number(A);
    	if (isNaN(one))
    	{
    		alert('Invalid entry: '+A);
    		one=0;
    	}
    	var two = Number(document.getElementById(B).value);
    	if (isNaN(two))
    	{
    		alert('Invalid entry: '+B);
    		two=0;
    	}
    	document.getElementById(SUM).value = one + two;
    }
    </script>
    </head>
    <body onload="document.getElementById('op1').focus();">
    <form name="form" >
    <label>
    Enter a number:
    <input name="sum1" id="op1" value="" onChange="calc(this.value,'op2','result')" tabindex=1/>
    </label>
    <br><br>
    <label>
     and another number:
    <input name="sum2" value="" id="op2" onChange="calc(this.value,'op1','result')" tabindex=2/>
    </label>
    <br><br>
    <label>
    Their sum is:
    <input name="sum" value="" id="result" readonly style="border:0px;">
    </label>
    </form>
    </body>
    </html>
    Last edited by ginerjm; 01-26-2018 at 02:10 PM.
    JG
    PS - If you're posting here you should be using:

    error_reporting(E_ALL);
    ini_set('display_errors', '1');


    at the top of ALL php code while you develop it!

  9. #9
    Join Date
    Jan 2018
    Posts
    10
    sorry not sure what that means as I'm trying to do my best with code that I don't particularly understand and looking for help

  10. #10
    Join Date
    Jan 2018
    Posts
    10
    All fixed. THANK YOU

  11. #11
    Join Date
    Jul 2013
    Location
    Voorheesville NY USA
    Posts
    1,904
    People usually post what "fixed" their problem for possible help to others having similar problems.
    JG
    PS - If you're posting here you should be using:

    error_reporting(E_ALL);
    ini_set('display_errors', '1');


    at the top of ALL php code while you develop it!

  12. #12
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,877
    There's trying and then theres using web forms and HTML5 ... and please take this as a constructive criticism, when you are asked to use forum BBCode tags, please use them, it helps people help you.

    HTML Code:
    <!DOCTYPE html>
    <html> 
    <head> 
    <title>Text Sum</title> 
    
    <script> 
    function calc( fm ){ 
    	var total = Number(fm.input1.value) + Number(fm.input2.value);
    	fm.sum.value = total;
    } 
    </script> 
    
    <body> 
    <form name="sumForm" action="javascript:;" onsubmit="calc(this)"> 
    	<label for="input1">Enter a number: 
    	<input name="input1" type="number" min="0" value="" /></label> 
    	<label for="input2">and another number: 
    	<input name="input2" type="number" min="0" value="" /></label> 
    	<input name="submit" type="submit" value="Calculate">
    	<label for="sum">Their sum is: </label>
    	<input name="sum" type="text" size="60" value="" readonly style="border:0px;"> 
    </form> 
    </body> 
    </html>
    And if you use a web form, learn to use it properly rather than using sloppy methods that use get element by ID which is really meant for tags that do not support the name= attribute.

    Sometimes the simplest answer is the correct answer...
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.14699 seconds
  • Memory Usage 2,985KB
  • Queries Executed 15 (?)
More Information
Template Usage (34):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_code
  • (1)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (12)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (12)postbit
  • (12)postbit_onlinestatus
  • (12)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (73):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates