Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

Nicholas Chetto
Nicholas Chetto
4,221 Points
Posted by Nicholas Chetto
Nicholas Chetto
4,221 Points

How to get another moral box to appear after clicking a button in the first moral box?

This is a project that im working on outside of tree house. if I can even ask this here. Sorry ahead of time if I cant. But I'm currently trying to make a moral box appear after a button is clicked in the previous moral box. I cant seem to figure is out. if anyone can help that would be fantastic. Thank you very much.

<!-- Start popup box here --> <div id="modal" class="modal open"><!--Put Options HERE!!--> <h3>Select what category</h3> <button id="mradio">Music</button> <button id="cradio">Comedy</button>

            <form action="{{ URL::to('upload') }}" id="upload" enctype="multipart/form-data" method="post">
                <label>Select Cover Photo to upload:</label>
                <input type="file" name="imagefile" id="file">
                <br />
                <input type="submit" value="Upload Image" name="save_image">
                <input type="hidden" value="{{csrf_token()}}" name="_token">
            </form>

            <form action="{{ URL::to('upload') }}" id="upload" enctype="multipart/form-data" method="post">
                <label>Select Audio to upload:</label>
                <input type="file" name="audiofile" id="file">
                <br />
                <input type="submit" value="Upload Audios" name="save_audio">
                <input type="hidden" value="{{csrf_token()}}" name="_token">
            </form>

            <a href="javascript:void(0);" onclick="open_modal('modal');">Submit</a>
            <!-- after they click Submit, another popup box should open confirming the save otherwise showing an error-->
        </div>

     <!-- New popup box to confirm upload -->
        <div id="confirm_modal" class="confirm modal open">
            <!--Set confirmation or ERROR(S) HERE-->
            <a href="javascript:void(0);" onclick="open_modal('modal');">Close</a>

            <div class="confirm modal open">
                <a href="javascript:void(0);" onclick="open_modal('modal');">Submit</a>
            </div>
        </div>
     <!-- End of New box -->

        <div class="open">
            <a href="javascript:void(0);" onclick="open_modal('modal');">Upload Audio</a>
        </div><!-- END -->
Nicholas Chetto
Nicholas Chetto
4,221 Points
Nicholas Chetto
Nicholas Chetto
4,221 Points

didn't realize there was a limit of space however the top code is apart of it.

Ben Payne
Ben Payne
1,464 Points

Im not sure what javascript library / framework you are using but it looks like the open_modal function accepts an DOM element id. The id on the confirmation modal is confirmation_modal so in the onclick handler in the first modal you might try passing in 'confirm_modal' as the parameter.

Nicholas Chetto
Nicholas Chetto
4,221 Points
Nicholas Chetto
Nicholas Chetto
4,221 Points

Thank you for helping me with this issue.