CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapinput
Millhorn
Millhorn

Reputation: 3166

Why does bootstrap input that displays elsewhere disappear immediately?

I have a fiddle here.

When I run the code, it starts up fine. I input the date and click to insert, and it appears for half a second, and then disappears completely.

The fiddle says **{"error": "Please use POST request"}**, but it's doing the same thing on my browser.

Any thoughts on this?

HTML

<h4>Insert Date Here</h4>
<form role="form">  
  <div class="row">
    <div class="col-xs-12">
      <div class="input-group input-group-md">
        <input type="text" class="form-control" placeholder="MM/DD/YYYY"/>
        <div class="input-group-btn">
          <button id="get" class="btn">Insert Date</button>
        </div>
      </div>
    </div>
  </div>
</form> 

<p>
  Nisi odio purus mattis. Habitasse nunc enim cursus cum est aenean nisi, enim odio, ultricies, sit arcu platea, pid, turpis. Parturient, arcu sed tristique? Placerat, <span id='msg'></span> parturient, non ridiculus aenean porttitor mauris amet! Elementum in ridiculus, scelerisque proin, risus, turpis magna dignissim habitasse, dis sed, eros. Ut rhoncus sed, lectus tincidunt.
</p>

JavaScript

$("#get").click(function () {
    $('#msg').html($('input:text').val());

});

Upvotes: 0

Views: 79

Answers (2)

Keammoort
Keammoort

Reputation: 3075

It dissapears, because you submit form. Add this, it will prevent form submition:

$('form').submit(function(event) {
    event.preventDefault();
});

jsfiddle

Upvotes: 2

gaetanoM
gaetanoM

Reputation: 42054

Because your button is inside the form you need to prevent default:

$("#get").click(function (e) {
    e.preventDefault();
    $('#msg').html( $('input:text').val());           
});

Upvotes: 2

Related Questions