Skip navigation
Currently Being Moderated

How to reverse checkbox function?

Aug 27, 2013 2:19 AM

So i've got a checkbox at the bottom of this page http://www.milesmemorials.com/product-GH54.html that once ticked another form appears but how do i get the form to disappear again if the checkbox is unchecked?

 

Also why isn't the java script validation not working for this form?

 
Replies
  • Currently Being Moderated
    Aug 27, 2013 4:29 AM   in reply to Ness_quick

    Hello Ness,

     

    I remember that it's possible to use a "reset button" to delete the entries in a form, like this:

     

    <input type="reset" name="name of your button">

     

    Hans-Günter

     

    P.S.

    OT: Thanks for your condolence message.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 27, 2013 5:00 AM   in reply to hans-g.

    <script type="text/javascript">

    function showHide () {

    var show = document.getElementById('whatever'); {

    if (show.checked)

    document.getElementById('accepted').style.display = 'block';

    else

    document.getElementById('accepted').style.display = 'none'; 

    }

    }

    </script>

        <input name="whatever" id="whatever" type="checkbox" onclick="showHide()">

        <form action="" method="post" name="accepted" id="accepted" class="nopay">

       

      

          <p class="productDis">Name:<input name="name" type="text" id="name"></p>

              <p class="productDis">Tel:<input name="tel" type="text" id="tel"></p>

            <p class="productDis">Email:<input name="email" type="text" id="email"></p>

             <input name="submit" type="submit" class="place_order" id="submit" value="Submit"></p>

             </form>

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 27, 2013 5:32 AM   in reply to Ness_quick

    You dont have the onsubmit trigger attached to the form (see below)

     

    <form action="" method="post" name="accepted" id="accepted" class="nopay" onsubmit="return RequiredFormFields()">

     

    Remove the onsubmit trigger from the main form on the page and relocate it to the above form with the name - "accepted"

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 27, 2013 7:35 AM   in reply to Ness_quick

    What intigues me is how are you going to distinguish what product the customer is ordering?

     

    It looks to me at the moment as though the information that you will be able to collect from the main form won't be complete. The below means that only  the 2442.00 is available to be collected, not Galaxy black granite.......so how will client know that's what has been selected?

     

    <option value="2442">Galaxy black granite (&pound;2442)</option>

     

    So as I read it the only information that will be useful to the client and can be harvested is:

     

    1) The font style

    2) Verse inscription

    3) Grand Total

     

    These will mean nothing:

     

    1) Colour as the option is just an amount (unless they are going to guess what product it is)?

    2) Engraving is just an amount (how is the client going to know what style of engraving the customer has ordered)?

    3) Engraved Design is just an amount (how is the client going to know what amount this is associated with)

    4) Sand Blasted Designs (same as above)

     

    Get my point unless you can feedback to the client

     

    Colour: Galaxy Black Granite

    Engraving: Sandblast and enamel painted

    Font: Silver painted roman

    Verse Inscription: IS3 (the code)

    Engraving Designs: P1.3 (the code)

    Sandblasted Designs: P4.3 (the code)

     

     

    This info is not going to be mean much:

     

    Colour: 2442.00

    Engraving: 2.30

    Font: Silver painted roman

    Verse Inscription: AT REST (unless only one verse starts with this)

    Engraving Designs: 75

    Sandblasted Designs: 75

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 27, 2013 7:43 AM   in reply to Ness_quick

    Hello Ness,

     

    my interjection might be not so important for a proper functioning of your website. But:

     

    Looking to your source code I found a js-directory, but the most of your *.js files point to your (or must be situated) in your main directory. This particularly concerns to your *.css files, whereby I could not find a directory for them.

     

    If you want to change that - because there are so many different files - you could use "find and replace" for this job.

     

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 27, 2013 9:15 AM   in reply to Ness_quick

    Ness_quick wrote:

     

    @ Osgood,

    I totally understand where you are coming from but let me explain, when this information comes through in an email like you have pointed out above, all that the staff will need to do is to look for the product number and with the use of the website or the catalog they can see by the prices which choices the customer has made.

     

    I dont think thats going to work every efficiently. You have quite a lot of products. I can't really imagine the client wants to cross reference the pricing with the products on the website just to find out what was purchased.

     

     

     

    I didn't know how else to calculate a choice (price) into the cost at the same time as giving a code/name, as my client wanted a running total to appear as they made there choices. I thought this way all the staff need to do is check choices against website, then they can put together the proof.

     

    There must be a more streamline way to do this, have some tangable 'form option values' as well as being able to update a running total box.I can't think off the top of my head but to me it seems unsatifactory at the moment.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 27, 2013 9:40 AM   in reply to Ness_quick

    Getting back to your question about how to send the information in the second form on the page you could collect the information from the first form and display it in 'hidden' form fields in form 2 like below:

     

    You just have to extend the showHide function a bit: ( I produced the first 4 form fields of form 1):

     

    <script type="text/javascript">

    function showHide () {

    var show = document.getElementById('whatever'); {

    if (show.checked)

    document.getElementById('accepted').style.display = 'block';

    else

    document.getElementById('accepted').style.display = 'none';

    }

    var colour2 = Number(document.forms.product.colour.value);

    $("#colour2").val(colour2.toFixed(2));

    var engraving2 = Number(document.forms.product.engraving.value);

    $("#engraving2").val(engraving2.toFixed(2));

    var font2 = document.forms.product.font.value;

    $("#font2").val(font2);

    var verse_inscriptions2 = document.forms.product.verse_inscriptions.value;

    $("#verse_inscriptions2").val(verse_inscriptions2);

    }

    </script>

     

     

    I have not hidden the form fields as yet so you can see the results:

     

    <input name="whatever" id="whatever" type="checkbox" onclick="showHide()">

        <form action="" method="post" name="accepted" id="accepted" class="nopay" onsubmit="return RequiredFormFields()">

     

          <p class="productDis">Name:<input name="name" type="text" id="name"></p>

              <p class="productDis">Tel:<input name="tel" type="text" id="tel"></p>

            <p class="productDis">Email:<input name="email" type="text" id="email"></p>

            <p><input name="colour2" id="colour2" type="text" />

            <input name="engraving2" id="engraving2" type="text" />

            <input name="font2" id="font2" type="text" />

            <input name="verse_inscriptions2" id="verse_inscriptions2" type="text" />

            </p>

             <input name="submit" type="submit" class="place_order" id="submit" value="Submit"></p>

     

             </form>

     

     

    Once you have all the information you can hide the form input fields and then collect the information from them in the normal manner you would using php and send back to client.

     

    I can't help thinking this whole thing needs refining somewhat though!

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 27, 2013 1:28 PM   in reply to Ness_quick

    <script type="text/javascript">

    <!--

    function showHide() {

    var showHide = document.getElementById('accepted');

    if(showHide.style.display == 'block')

    showHide.style.display = 'none';

    else

    showHide.style.display = 'block';

    }

    //-->

    </script>

     

     

        <input name="proof" type="submit" class="place_order" id="proof" onclick="showHide()" value="Proof Only">

          <p class="paymeny_warning"><em>Please note that we will not begin works until you are happy with our designs and have paid a 50% deposit..</em></p>

        <form action="" method="post" name="accepted" id="accepted" class="nopay" onsubmit="return RequiredFormFields()">

        <p class="product_page_info">Please note that we will not begin works until you are happy with our designs and have paid a 50% deposit..</p>

      

          <p class="productDis">Name:<input name="name" type="text" id="name"></p>

              <p class="productDis">Tel:<input name="tel" type="text" id="tel"></p>

            <p class="productDis">Email:<input name="email" type="text" id="email"></p>

             <input name="submit" type="submit" class="place_order" id="submit" value="Submit"></p>

        </form>

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 29, 2013 1:34 AM   in reply to Ness_quick

    Try the below:

     

    <script type="text/javascript">

    function showHide() {

    var showHide = document.getElementById('accepted');

    if(showHide.style.display == 'block')

    showHide.style.display = 'none';

    else

    showHide.style.display = 'block';

    var colour2 = Number(document.forms.product.colour.value);

    $("#colour2").val(colour2.toFixed(2));

    var engraving2 = Number(document.forms.product.engraving.value);

    $("#engraving2").val(engraving2.toFixed(2));

    var font2 = document.forms.product.font.value;

    $("#font2").val(font2);

    var verse_inscriptions2 = document.forms.product.verse_inscriptions.value;

    $("#verse_inscriptions2").val(verse_inscriptions2);

    var textarea2 = document.forms.product.textarea.value;

    $("#textarea2").val(textarea2);

    var engraved_designs2 = Number(document.forms.product.engraved_designs.value);

    $("#engraved_designs2").val(engraved_designs2.toFixed(2));

    var sandblasted_designs2 = Number(document.forms.product.sandblasted_designs.value);

    $("#sandblasted_designs2").val(sandblasted_designs2.toFixed(2));

     

    var grand_total2 = Number(document.forms.product.grand_total.value);

    $("#grand_total2").val(grand_total2.toFixed(2));

    var cemetery_name2 = document.forms.product.cemetery_name.value;

    $("#cemetery_name2").val(cemetery_name2);

    var cemetery_address2 = document.forms.product.cemetery_address.value;

    $("#cemetery_address2").val(cemetery_address2);

    var grave_number2 = document.forms.product.grave_number.value;

    $("#grave_number2").val(grave_number2);

    }

    </script>

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 29, 2013 2:02 AM   in reply to Ness_quick

    Thats because your form is not set up correctly. Try the below:

     

    <input name="proof" type="submit" class="place_order" id="proof" onclick="showHide()" value="Proof Only">

          <p class="paymeny_warning">Please note that we will not begin works until you are happy with our designs and have paid a 50% deposit..</p>

        <form action="" method="post" name="accepted" id="accepted" class="nopay" onsubmit="return RequiredFormFields()"> 

          <p class="productDis">Name:<input name="name" type="text" id="name"></p>

              <p class="productDis">Tel:<input name="tel" type="text" id="tel"></p>

            <p class="productDis">Email:<input name="email" type="text" id="email"></p>

             <p><input name="colour2" id="colour2" type="text" />

            <input name="engraving2" id="engraving2" type="text" />

            <input name="font2" id="font2" type="text" />

            <textarea name="textarea2"id="textarea2"></textarea></textarea>

            <input name="engraved_designs2" id="engraved_designs2" type="text" />

             <input name="sandblasted_designs2" id="sandblasted_designs2" type="text" />

             <input name="grand_total2" id="grand_total2" type="text" />

             <input name="cemetery_name2" id="cemetery_name2" type="text" />

             <textarea name="cemetery_address2" id="cemetery_address2"></textarea>

            <input name="grave_number2" id="grave_number2" type="text" />

           

              <p><input name="submit" type="submit" class="place_order" id="submit" value="Submit"></p>

        </form>

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 29, 2013 2:09 AM   in reply to Ness_quick

    Ness_quick wrote:

     

    I've found why everything is going to the one form field but still seems that the cemetery name, address and number dont show?

    The function collects the information by ID and you have no ID's associated with the form fields you mention above (see my previous response where I have added the ID's to the fields)

     

    OK now here is the big problem with this.

     

    IF the user decides to alter the information in form1 the information in form 2 doesnt NOT update unless you close the 'proof' button and open it again so this is a big big issue and you wil most likely get incorrect information through.

     

    What you really need is for the information in form 1 to populate the form fields in form 2 when they change in form 1 NOT when a javascript event is evoked in from 2. The showHide() function works well to show the form but I think something else (a different approach) is needed to populated the fields.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 29, 2013 3:01 AM   in reply to Ness_quick

    Ness_quick wrote:

     

    I see, i will correct that now thank you. Yes i did notice that when i tried it,  perhaps a way round this could be to open another page for this second form when the proof button is submitted, that way if they wish to change their selection they can use a back button. Only thing is, to me having to leave the page to open another feels kind of messy and longwinded. What do you think?

    You don't want to leave the page and go back nor do you want to keep opening and closing the 'proof' button. Not that that would happen as the form fields in form 2 would be hidden from view anyway.

     

    I'd try and find a solution which updates the fields in form 2 as they are changed in form 1.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 29, 2013 3:29 AM   in reply to Ness_quick

    Ness_quick wrote:

     

    Ok perhaps i should start a new thread on this. I have uploaded my php file and added it to the form action element of the form. It all goes through and works well, so its getting there slowly!

    Sure it works fine. Maybe there is a javascript solution or jQuery solution to keep the form information in both forms the same without an event being triggered, I don't know. Most issues can be solved with enough Googling and experimenting.

     

    Try the way 'shocker' suggested. The only problem with that is if the basket info needs to go to a dedicted php script housed outside of your site. But there is still a away around that by sending each button to dedicated url to be processed if that were to be the case.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points