Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

PHP

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

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

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

Thank you for helping me with this issue.