CODEWITHSUNDEEP
javascriptjqueryhtmlformstextarea
Jatin Verma
Jatin Verma

Reputation: 383

Code below the textarea getting inside the textarea as its value?

I am implementing this Bootstrap Modal on click of a button. But on clicking the button, the modal appears on screen, every field is correctly displayed except the textarea field, the button code and file upload code below it, is getting inside of the textarea, why is it so ? Please check the following code for the Modal:

<div class="modal fade" id="myModalContactt" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content tuningModal">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body tuningModalTwo">
                <form action="/tuningModal/"  style="padding: 0% 7%;">
                    <h3>GET IN TOUCH WITH US</h3>
                    <div class="row form-group">
                        <label>Your Name(required)</label>
                        <input type="text" class="form-control" id="name" name="name"/>
                    </div>
                    <div class="row form-group">
                        <label>Email(required)</label>
                        <input type="email" class="form-control" id="email" name="email"/>
                    </div>
                    <div class="row form-group">
                        <label>Phone Number</label>
                        <input type="text" class="form-control" id="phone" name="phone"/>
                    </div>
                    <div class="row form-group">
                        <label>Car Brand</label>
                        <input type="text" class="form-control" id="carBrand" name="carBrand"/>
                    </div>
                    <div class="row form-group">
                        <label>Model</label>
                        <input type="text" class="form-control" id="model" name="model"/>
                    </div>
                    <div class="row form-group">
                        <label>Your Message</label>
                       <textarea rows="10"  class="form-control" id="message" name="message"/>
                    </div>
                    <div class="row form-group">
                        <label>Upload your software(Note:please upload in zip filetype)</label>
                        <input type="file" class="form-control-file" name="softUploadFile"/>
                    </div>
                    <div class="row form-group" style="margin-top:20px;margin-bottom:20px">
                        <button type="submit" class="btn btn-primary btn-block">Submit</button>
                    </div>
                </form>
            </div>

        </div>

    </div>
</div>

And below is the code for the Button on which I've set the data-target and data-toggle to this Modal:

<div id="red_div2" class="row ">
    <h2 id="redtext2" class="wow bounceInRight">QUESTIONS OR INTEREST IN ANY OF OUR PRODUCTS? </h2>
    <button type="button" class="btn btn-info" id="AskYourQuestion" data-toggle="modal" data-target="#myModalContactt">
        ASK YOUR QUESTION
        <i class="fa fa-angle-double-right"></i>
    </button>

</div>

And it is appearing like this in the browser:

Example Image

Upvotes: 2

Views: 411

Answers (2)

Basel Issmail
Basel Issmail

Reputation: 4015

Close textarea tag

 <textarea rows="10"  class="form-control" id="message" name="message"></texarea>

Upvotes: 3

fdomn-m
fdomn-m

Reputation: 28611

<textarea rows="10"  class="form-control" id="message" name="message"/>

textarea is not a self-closing tag (also called a void element).

Self-closing tags allow the the close part on the tag itself, eg <input/> while non-self-closing tags must have an explicitly matching close tag, eg:

<textarea></textarea>

these are typically where there may be content inside the tag, eg

<textarea>appears inside the textarea</textarea>

More info from the spec: https://www.w3.org/TR/html5/syntax.html#writing-html-documents-elements

and https://stackoverflow.com/a/3558200/2181514

Upvotes: 2

Related Questions