Should this form work?

Discussion in 'HTML and CSS' started by ataloss, Jul 25, 2020.

  1. ataloss

    ataloss

    Joined:
    Jul 25, 2020
    Messages:
    2
    Likes Received:
    0
    Code (Text):
    <form action="" method="post" id="myform" target="_top">
    <input type="hidden" id="skip_WhereToSend" name="skip_WhereToSend"
    value="[email protected]" />
    <input type="hidden" id="skip_Subject" name="skip_Subject"
    value="order form" />
    <input type="hidden" id="skip_WhereToReturn" name="skip_WhereToReturn"
    value="https://guitarzRus.com/ord-thanks.html" />
     
     
    Last edited by a moderator: Jul 27, 2020
    ataloss, Jul 25, 2020
    #1
    1. Advertisements

  2. ataloss

    ataloss

    Joined:
    Jul 25, 2020
    Messages:
    2
    Likes Received:
    0
    hi, I'm trying to add credit card payments to my website.Is there example code available to use?
    I have code supplied by paypal but cannot get it to work. I've tried several other's but NOT.
    Any help? My code follows:

    Code (Text):

    ------------------------------------------------------------<!-- ---------------------------------------------------------------->
    <form id="fcf-form-id" class="fcf-form-class" method="post" action="contact-form-process.php">
    <!-- -------------------------------------------------------------- -->
    <b><input type="text" STYLE="color: #000000; font-weight: bold; background-color: cyan;" size=45
    name=intent value="I wish to order a guitarzRus singleneck guitar" onFocus="this.value=''">
    <br>
    <!-- --------------------------------------------------------------------------- -->
    <input type="text" size=35 name="unit-price" value="model - Unit Price" STYLE="color: #000000; font-weight: bold; background-color: #ccffff;">
    <!-- ---------------------------------------------------------------------------------------- -->
        <select name="unitprice">  
    <OPTION value="">Select</OPTION>
    <OPTION value="224.95" style="background-color: Pink;"> Violina_conversion - 224.95</OPTION>
    <OPTION value="235.95" style="background-color: violet;">Pipsqueek_conversion - 235.95</OPTION>
    <OPTION value="247.95" style="background-color: Pink;">Supra_conversion - 247.95</OPTION>
    <OPTION value="259.95" style="background-color: white;">Futura_conversion - 259.95</OPTION>
    <OPTION value="328.95" style="background-color: cyan;">New Violina - 328.95</OPTION>
    <OPTION value="359.95" style="background-color: violet;">New Pipsqueek - 359.95</OPTION>
    <OPTION value="377.95" style="background-color: cyan;">New Supra - 377.95</OPTION>
    <OPTION value="399.95" style="background-color: violet;">New Futura - 399.95</OPTION>
    </select><br>
    <!-- --------------------------------------------------------------------------------------------  -->
    <b><input type="text" size=55 name="name" value=" &#x2714; Full name " STYLE="color: #000000; font-weight: bold; background-color: #ffccff;" onFocus="this.value=''"></b>&nbsp;&nbsp;
    <b><input type="text" size=35 name="email" value=" &#x2714; Email Address " STYLE="color: #000000; font-weight: bold; background-color: #ffccff;" onFocus="this.value=''"></b>&nbsp;&nbsp;
    <br>
    <b><input type="text" size=95 name="address" value=" &#x2714; Address " STYLE="color: #000000; font-weight: bold; background-color: #ffccff;" onFocus="this.value=''"></b>&nbsp;&nbsp;
    <br>
    <b><input type="text" size=60 name="city" value=" &#x2714; City " STYLE="color: #000000; font-weight: bold; background-color: #ffccff;" onFocus="this.value=''"></b>&nbsp;&nbsp;
    <b><input type="text" size=10 name="state" value=" &#x2714; State " STYLE="color: #000000; font-weight: bold; background-color: #ffccff;" onFocus="this.value=''"></b>&nbsp;&nbsp;
    <b><input type="text" size=15 name="zip" value=" &#x2714; Zip code " STYLE="color: #000000; font-weight: bold; background-color: #ffccff;" onFocus="this.value=''"></b>&nbsp;&nbsp;
    <br><br>
    <!-- ------------------------------------------------------------------- -->

    <script src="https://www.paypal.com/sdk/js?client-id=YOUR_SB_CLIENT_ID">
    // Replace YOUR_SB_CLIENT_ID with your sandbox client ID
        </script>

        <div id="paypal-button-container"></div>

        <!-- Add the checkout buttons, set up the order and approve the order -->    <script>
          paypal.Buttons({
            createOrder: function(data, actions) {
              return actions.order.create({
                purchase_units: [{
                  amount: {
                    value: '0.01'
                  }
                }]
              });
            },
            onApprove: function(data, actions) {
              return actions.order.capture().then(function(details) {
                alert('Transaction completed by ' + details.payer.name.given_name);
              });
            }
          }).render('#paypal-button-container'); // Display payment options on your web page
    </script>
    <!-- ------------------------------------------------------------------- -->

    </script>
    <!-- Set up a container element for the button -->
     
    <div id="paypal-button-container"></div>

     
    <!-- Include the PayPal JavaScript SDK -->
     

    <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script>

     

    <script>
         
    // Render the PayPal button into #paypal-button-container
         
    paypal.Buttons({

             
    // Set up the transaction
             
    createOrder: function(data, actions) {
                 
    return actions.order.create({
                     
     purchase_units: [{
                         
    amount: {
                             
    value: '0.01'
                         
     }
                     
    }]
                 
    });
             
    },

             
    // Finalize the transaction
             
    onApprove: function(data, actions) {
                 
    return actions.order.capture().then(function(details) {
                     
    // Show a success message to the buyer
                     
    alert('Transaction completed by ' + details.payer.name.given_name + '!');
                 
    });
             
    }


         
    }).render('#paypal-button-container');
     
    </script>

    <!-- Set up a container element for the button -->
     
    <div id="paypal-button-container"></div>

     
    <!-- Include the PayPal JavaScript SDK -->

     
    <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script>

     

    <script>
         
    // Render the PayPal button into #paypal-button-container
         
    paypal.Buttons({
             
    style: {
                 
    layout: 'horizontal'
             
    }
         
    }).render('#paypal-button-container');
     
    </script>

    <!-- Set up a container element for the button -->
     
    <div id="paypal-button-container"></div>

     
    <!-- Include the PayPal JavaScript SDK --

    <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script>

     

    <script>
         
    // Render the PayPal button into #paypal-button-container
         
    paypal.Buttons().render('#paypal-button-container');
     
    </script>
    <BR>

    <!-- Render the radio fields and button containers -->

     
    <label>
         
    <input type="radio" name="payment-option" value="paypal" checked>
         
    <img src="/demo/checkout/static/img/paypal-mark.jpg" alt="Pay with Paypal">
     
    </label>

     
    <label>
         
    <input type="radio" name="payment-option"
    <img src="/demo/checkout/static/img/card-mark.png" alt="Accepting Visa,
    Mastercard, Discover and American Express">
     
    </label>

     
    <div id="paypal-button-container"></div>
     
    <div id="card-button-container" class="hidden">
    <button>Continue</button>
    </div>

     
    <!-- Include the PayPal JavaScript SDK -->

     
    <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script>

     

    <script>
         
    // Listen for changes to the radio fields
         
    document.querySelectorAll('input[name=payment-option]').forEach(function(el)
     {
             
    el.addEventListener('change', function(event)
     {

                 
    // If PayPal is selected, show the PayPal button
                 
    if (event.target.value === 'paypal')
     {
                     
    document.querySelector('#card-button-container').style.display = 'none';
                     
    document.querySelector('#paypal-button-container').style.display = 'inline-block';
                 
    }

                    // If Card is selected, show the standard continue button
                 
    if (event.target.value ===
    {
                     
     document.querySelector('#card-button-container').style.display = 'inline-block';
                     
    document.querySelector('#paypal-button-container').style.display = 'none';
                 
    }
             
    });
         
    });

         
    // Hide Non-PayPal button by default
         
    document.querySelector('#card-button-container').style.display = 'none';

         
    // Render the PayPal button into #paypal-button-container
         
    paypal.Buttons({
             
    style: {
                 
    layout: 'horizontal'
             
    }
         
    }).render('#paypal-button-container');
     
    </script>
    <!-- ------------------------------------------------------------------- -->
    </script>
    <!-- Set up a container element for the button -->
     
    <div id="paypal-button-container"></div>

     
    <!-- Include the PayPal JavaScript SDK -->
     

    <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script>

     

    <script>
         
    // Render the PayPal button into #paypal-button-container
         
    paypal.Buttons({

             
    // Set up the transaction
             
    createOrder: function(data, actions) {
                 
    return actions.order.create({
                     
     purchase_units: [{
                         
    amount: {
                             
    value: '0.01'
                         
     }
                     
    }]
                 
    });
             
    },

             
    // Finalize the transaction
             
    onApprove: function(data, actions) {
                 
    return actions.order.capture().then(function(details) {
                     
    // Show a success message to the buyer
                     
    alert('Transaction completed by ' + details.payer.name.given_name + '!');
                 
    });
             
    }


         
    }).render('#paypal-button-container');
     
    </script>

    <!-- Set up a container element for the button -->
     
    <div id="paypal-button-container"></div>

     
    <!-- Include the PayPal JavaScript SDK -->

     
    <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script>

     

    <script>
         
    // Render the PayPal button into #paypal-button-container
         
    paypal.Buttons({
             
    style: {
                 
    layout: 'horizontal'
             
    }
         
    }).render('#paypal-button-container');
     
    </script>

    <!-- Set up a container element for the button -->
     
    <div id="paypal-button-container"></div>

     
    <!-- Include the PayPal JavaScript SDK --

    <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script>

     

    <script>
         
    // Render the PayPal button into #paypal-button-container
         
    paypal.Buttons().render('#paypal-button-container');
     
    </script>
    <BR>
    <div class="fcf-form-group">
                <button type="submit" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block">Send Message</button>
            </div>    
    <!-- ------------------------------------------------------------------------------------------  -->
    <a href="index.html"><img src="house.jpg" height=75 width=75 alt="image of home"></a><br>
    <A href="webmain.html">webmaster</A>&nbsp;&nbsp;<a href="privacy.html">[privacy]</a><br>
    <input type="text" readonly size="22" maxlength="30" readonly value="copyright &copy 2000-2020" STYLE="color: #000000; font-weight: bold; background-color: #ccffff;" onFocus="this.value=''"><BR>
    </b></center>

    <script type=”text/javascript”>
    var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
    document.write(unescape(“%3Cscript src='” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));
    </script>

    <script type=”text/javascript”>
    try {
    var pageTracker = _gat._getTracker(“UA-10101010-19?);
    pageTracker._trackPageview();
    } catch(err) {}</script>

    </font></form></body></html>
    ==================================================
    <?php
    if (isset($_POST['Email'])) {

        // EDIT THE 2 LINES BELOW AS REQUIRED
        $email_to = "[email protected]";
        $email_subject = "guitarzRus order form";

     

        // create email headers
        $headers = 'From: ' . $email . "\r\n" .
            'Reply-To: ' . $email . "\r\n" .
            'X-Mailer: PHP/' . phpversion();
        @mail($email_to, $email_subject, $email_message, $headers);
    ?>

        <!-- include your success message below -->

        Thank you for your order. We will be in touch with you very soon.

    <?php
    }
    ?>

     
     
    Last edited by a moderator: Jul 27, 2020
    ataloss, Jul 27, 2020
    #2
    1. Advertisements

  3. ataloss

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    118
    Likes Received:
    17
    If your asking two questions it's better to use two topics. That way the treads are not inter-spaced and answers become confused.

    Answer to first question -> NO
    1 The </form> tag is missing - Maybe bad copy/paste and editing.
    I added that.
    2 No address for destination. Maybe you don't want to say where this will be sent, but using a false url would help us in answering your question.
    3 all input fields are hidden. All that the user sees is the <label>. There is not submit anywhere.

    Big question for you. Why send three things to a\server that are per-ordained. Using a yes/no radio button would work great in this case and the hidden inputs could be added to the receiving code instead of sending them.
     
    sunfighter, Jul 27, 2020
    #3
  4. ataloss

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    118
    Likes Received:
    17
    sunfighter, Jul 27, 2020
    #4
  5. ataloss

    c1lonewolf

    Joined:
    Jul 12, 2020
    Messages:
    7
    Likes Received:
    0
    Location:
    Defuniak Springs, Fl.
    Note: All this is according to the code you posted above, or what I could make out of it. I copied and pasted it in order to attempt to help you out.

    1. You have six(6) containers using the 'paypal-button-container' id. Id's must be unique to each object. My guess is they mean create one container, giving it the 'paypal-button-container' id. So their script has a location to load the items.

    2. You link to the SDK file seven(7) times, you only need to link to it once.

    I think you need to go back and actually look at the demo code again.

    3. In the browsers I'm aware of, images cannot change the value of a radio group so placing inside a label element is only for the web designers benefit. While visitors will see the pretty image, they will still have to click directly on the radio button to change it.

    4. Your form doesn't seem to make any since, to me anyway.
    a) For instance, type="text" name=intent value="I wish to order a guitarzRus singleneck guitar".
    Are there other options that can be added here, like what?

    b) Are you letting them enter their own unit price? and unit price for what? And if so WHY?
    type="text" name="unit-price" value="model - Unit Price"
    And if so, whats the 'unitprice' select menu for?

    c) You have website footer links inside the form object. Is there a reason for this?
     
    c1lonewolf, Aug 6, 2020
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.