java script

  • Hey there, so i’m not sure if this is where i need to be posting – sorry if this is the wrong location/etiquette. Also i am a pretty big newbie!

    So, I have a page where my clients put in their payment details into a form. When the form is submitted, the details are then submitted into the payment gateway. My issue is this: I need to automatically add a 1.5% surcharge to what ever figure is added by the user, to cover the credit card costs before it goes to the payment gateway. I have worked out how to do this using javascript, but cant get this to work on the wordpress site.

    The form code and the js is below. I have used the plugin ‘code embed’ but unfortunately it is still not working for me. Any help/suggestions would be much appreciated. Alternatively, if there is a much better way of going about it I am all ears.

    <form action="" method="post">
    <table>
        <tbody>
            <tr>
                <td>Your Name:</td>
                <td>
                    <input maxlength="64" name="TxnData1" id="name" type="text" value="" />
                </td>
            </tr>
            <tr>
                <td>Your Email:</td>
                <td>
                    <input name="EmailAddress" id="email" type="text" value="" />
                </td>
            </tr>
            <tr>
                <td>Quote/Invoice Reference No:</td>
                <td>
                    <input name="MerchantReference" id="quote" type="text" value="" />
                </td>
            </tr>
            <tr>
                <td>Amount:</td>
                <td>
                    <input name="Amount" id="Amount" type="text" value="00.00" />
                </td>
            </tr>
            <td>Amount with surcharge:</td>
            <td><span id="AmountInput"></span>

            </td>
            </tr>
            <!-- Indicate what currency the transaction will be in -->
            <tr>
                <td>Currency:</td>
                <td>Australian Dollar(AUD)</td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input name="mypaymentform" type="submit" value="Next" />
                </td>
            </tr>
        </tbody>
    </table>
</form>

    js

    <script type="text/javascript"> $(document).ready(function () {
    $('#Amount').keyup(function () {
        $('#AmountInput').text($('#Amount').val() * 1.15);
    });
});</script>

    thank you in advance, and et me know if you need any more info!

    Thanks

Viewing 12 replies - 1 through 12 (of 12 total)
  • J M

    (@hiphopinenglish)

    A cursory glance tells me you need to reference jQuery using jQuery (rather than $) since in WP it runs in no-conflict mode.

    Instead of using inline javascript in your template, you might consider using wp_enqueue_script.

    Thread Starter BassDogg

    (@bassdogg)

    yep – that is getting beyond me, I am getting confused! (unsurprising).

    Is there somewhere i could get walked through this? sorry to be annoying!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The best thing you can do is link us to the page with the issue – otherwise the best we can do is respond like J M has.

    Thread Starter BassDogg

    (@bassdogg)

    Awesome:

    the page link is https://www.greenefficientliving.com.au/payments/

    Once you submit i am trying to automatically add the 1.5%

    Cheers,Matt

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    On that page, where is the JavaScript code being loaded?

    Thread Starter BassDogg

    (@bassdogg)

    Sorry, thats the live page.

    https://www.greenefficientliving.com.au/payments-test/

    This is one I am testing with where I have removed the form action.

    Cheers

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    On that test page, I still can’t see where your JavaScript is being loaded in. How are you adding it to the page?

    Thread Starter BassDogg

    (@bassdogg)

    I’m using the CODE EMBED plugin. It seemed to work there for one sec.

    I have got the code straight underneath the form action.

    Cheers,
    Matt

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Okay so I see this code on the page:

    jQuery(document).ready(function($) {
    $('#Amount').keyup(function () {
        $('#AmountInput').text($('#Amount').val() * 1.15);
    });
});

    But what’s this about:

    <td><id="amountinput"><p></p>
</id="amountinput"></td>

    ?
    Also don’t add capital letters in your IDs (in the JavaScript).

    Thread Starter BassDogg

    (@bassdogg)

    Thanks, I dropped the capitals

    Where I had

    <td><id=”amountinput”><p></p>
    </id=”amountinput”></td>

    was just meant to be

    <td><span id=”AmountInput”></span>

    so the figure would appear. If that makes sense?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It doesn’t make sense still, what is this “<id>” element?

    I want to raise the bigger issue with you and that is you should not rely on JavaScript to add this quantity. You should handle this at the server side in PHP. JavaScript can be manipulated so very easily at the browser side.

    Thread Starter BassDogg

    (@bassdogg)

    Ok, so you would recommend not doing this in javascript?

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘java script’ is closed to new replies.