0

basically I have a form and it has 2 different expansions depending on whether a single or multi day trip is selected (not coded yet, once I get this working I can sort that out properly). I have looked at a lot of similar questions but unfortunately, many of them use jQuery.

I've been working on it for 2 days now, Googled, looked here and got this far on my tutor's suggestion but it isn't quite there yet and I don't understand enough to fix it. I'm hoping it's something simple and I'm just a bit too inexperienced at this point to recognize it.

Right now, I'm just trying to make a div with 2 different classes show depending on which is clicked. The classes being hard coded into the function doesn't matter at the moment. Eventually I will want the div's to appear (still depending on the check box selected) when the submit button is clicked, but that can be a future endeavor (would assume it's just some if/else statements.

If anyone can help, or even just point me in the right direction (keeping in mind I started learning this around 3 weeks ago and haven't even used it in the last 2) I would greatly appreciate your help.

I have attached a JSFiddle of current code, and a picture of the final result from photoshop. (everything below the horizontal white line will initially be hidden until a checkbox is selected).

https://i.stack.imgur.com/zJXxG.jpg

Toria
  • 13
  • 6
  • Sorry, forgot the JSFiddle link [link](http://jsfiddle.net/hematite07/6UVFR/) – Toria Oct 10 '13 at 04:41
  • 1
    you should add the code to your question, and also the jsfiddle. just edit your question and add it. – Rafael Herscovici Oct 10 '13 at 04:45
  • I've tried a few times, but it doesn't show up, not really familiar with how it works, I will change the onload issue now though [JSFiddle] http://jsfiddle.net/hematite07/6UVFR/7/ – Toria Oct 10 '13 at 07:22

2 Answers2

1

First of all under Frameworks & Extensions, set the select box to No Wrap - in body instead of onLoad. (In the top left).

Second, you have multiple syntax errors.

Multi day<input type="checkbox" name="multi-day"         value="multi-day" onclick=""ShowExtraForm1('multiBooking')"">

Remove one set of "" around the ShowExtraForm1.

document.getElementById('singleBooking')style.display="none";
document.getElementById('multiBooking')style.display="none";

Add a . before the 'style' attribute, it's currently a syntax error.

And also, where are the actual forms you are trying to hide?

jbarnett
  • 984
  • 5
  • 7
  • Thank @jbarnett I had no idea what all that area was about, also never noticed the extra "". I haven't made the additional form areas yet, only the top section. I just have the 2 coloured DIV's to get on with the general concept of the JavaScript part first. – Toria Oct 10 '13 at 07:37
0
I have edited your jsfiddle link

think its not working there but this is the function you want

function ShowExtraForm1() 
    {
        var singlechecksts;
        var multichecksts;
        singlechecksts= document.getElementById('singlecheck');
        multichecksts= document.getElementById('multicheck');

        if(singlechecksts.checked)
        {
        document.getElementById('singleBooking').style.display="block";
        document.getElementById('multiBooking').style.display="none";
        }

        if(multichecksts.checked)
        {
        document.getElementById('singleBooking').style.display="block";
        document.getElementById('multiBooking').style.display="block";
        }
    }

where singlecheck and multicheck are id's of your checkboxs
Amar Kate
  • 71
  • 3