How can I make a button that extends the modal and give me an additional form? (HTML)

Question

I have a modal that looks like this

And the html part looks pretty simple

                        <input type="hidden" name="InterviewId" data-bind="value: selectedInterview().id" />
                        <div class="form-group">
                            <label>Cover Page Notes</label>
                            <textarea name="CoverPageNotes" class="form-control" maxlength="415"></textarea>
                        </div>
                        <div>
                            <!-- ??? create the interviewScheduleJson, use knockout data-binding -->
                            <input type="hidden" name="InterviewScheduleJson" />
                        </div>
                        <div>
                            <label>
                                <input type="checkbox" name="IncludeCoverPage" value="true" checked />
                                <input type="hidden" name="IncludeCoverPage" value="false" />
                                Include Cover Page
                            </label>
                        </div>
                        <div>
                            <label>
                                <input type="checkbox" name="IncludeCandidateSummary" value="true" checked />
                                <input type="hidden" name="IncludeCandidateSummary" value="false" />
                                Include Candidate Summary
                            </label>
                        </div>
                        ...

What I would like to do is, I want to make another button in between the "Cover Page Notes" and "Include Cover Page" that extends the modal and gives me a new input form. So maybe something like:

How can I make a button that extends the modal and give me an additional form?

Possible duplicate of [JQuery show and hide div on mouse click (animate)](https://stackoverflow.com/questions/17638990/jquery-show-and-hide-div-on-mouse-click-animate) — Sagar, Aug 07 '17 at 05:25

Aydin4ik · Accepted Answer · 2017-08-07T05:44:12.893

The UI would be something like this. The xtended div would include fields complimentary to the original <form> (you have not provided details of such form so I cannot elaborate).

var xtend = function() {
  document.getElementById('xtended').style.display = 'block';
}

<style>
    #xtended {
        display:none;
    }
    .button {
      display: inline-block;
      margin-bottom: 0;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      border: 1px solid black;
      white-space: nowrap;
      padding: 0.3em;
      background-color:#eee;
      border-radius:3px;
    }
</style>
<input type="hidden" name="InterviewId" data-bind="value: selectedInterview().id" />
                        <div class="form-group">
                            <label>Cover Page Notes</label>
                            <textarea name="CoverPageNotes" class="form-control" maxlength="415"></textarea>
                        </div>
                        <div class="form-group">
                            <div id="xtended"> This is the extended part with other stuff in it</div>
                            <div class="button"><span onclick="xtend();">Extend</span></div>
                        </div>
                        <div>
                            <!-- ??? create the interviewScheduleJson, use knockout data-binding -->
                            <input type="hidden" name="InterviewScheduleJson" />
                        </div>
                        <div>
                            <label>
                                <input type="checkbox" name="IncludeCoverPage" value="true" checked />
                                <input type="hidden" name="IncludeCoverPage" value="false" />
                                Include Cover Page
                            </label>
                        </div>
                        <div>
                            <label>
                                <input type="checkbox" name="IncludeCandidateSummary" value="true" checked />
                                <input type="hidden" name="IncludeCandidateSummary" value="false" />
                                Include Candidate Summary
                            </label>
                        </div>

Thanks but this does not work because it has a button on the bottom that already submits something. I think they overlap. Any way to fix it? — Dukakus17, Aug 07 '17 at 05:22

How can I make a button that extends the modal and give me an additional form? (HTML)

1 Answers1