Twitter Bootstrap Question posted in

Twitter bootstrap – Page refreshes whenever I click on the text area, doesn't allow me to fill in any text

I’m trying to create a page that will automatically update inputted text in a database. However, whenever I click on the textarea the page seems to automatically refresh. If I type quick enough, some text will go through and be updated. Not sure what the error could be, am also using twitter bootstrap if that is enlightening at all, will give the rest of the code if needed. Here’s what seems to be the relevant part of my code: 

    <div class="container contentContainer" id="topContainer">

  <div class="row">

    <div class="col-md-6 col-md-offset-3" id="topRow">

      <textarea class="form-control mytext" name="thought" placeholder="Where can we help your business go?"></textarea>

    </div>

  </div>

</div>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(".contentContainer").css("min-height",$(window).height());
    $("textarea").css("height",$(window).height()-0.64*$(window).height());

</script>

edit: removed keyup function.

Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    Sorry everyone, turns out I failed to close an href in an earlier part of my code and that caused it to think the entire page was a link. All of the function suggestions were very helpful and informative though, thanks!


  2. 0

    @bpr Do you realize you re using a keyup event here:

     $("textarea").keyup(function() {
      $.post("updatethought.php", {thought:$("textarea").val()});
    });

    You are saying:
    If I hit any key than post it!!

    You need to do this in an other way, an option will be using ‘blur’ instead.

    Login or Signup to reply.
  3. 0

    Instead of keyup event you should use blur event to post data to server. 

    $("textarea").blur(function() {
  $.post("updatethought.php", {thought:$("textarea").val()});
});
    Login or Signup to reply.
  4. 0

    I used get because is faster than post if you need it just to get a list of element for suggestions.

    <script type="text/javascript">
        $('.contentContainer').css('min-height',$(window).height());
        $('textarea').css('height',$(window).height()-0.64*$(window).height());
        $('textarea[name="thought"]').unbind(); //to be sure that aren't other triggers
        $('textarea[name="thought"]').on('keyup',function(e) {
          e.preventDefault();
          $.get('updatethought.php', {thought:$('textarea').val()});
        });
</script>
    Login or Signup to reply.
  5. 0

    You should use blur event to update data into db;
    On blur of any input field of your form do data validation of each input field, on validation success do ajax call to update your data in db. In this way your page will not refresh while entering data into form.

    $("textarea").blur(function() {
   updateDB();
});

$("input").blur(function() {
   updateDB();
});


function updateDB(){
   // do data validation
   // on data validation success do ajax

}

    http://api.jquery.com/jquery.ajax/

    http://www.w3schools.com/jquery/jquery_ajax_get_post.asp

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search