problem with ajax submission form when pressing enter

I'm trying to submit some text within an input field and output it on the same page without refreshing the page. However, it's not doing what I want to. I have a placeholder element too so if I accidentally enters nothing in the field, it won't insert my placeholder text into my database (mysql). The problem I'm having is that when I press enter, it just refreshes the page and its not alerting me when I'm trying to get an alert when success.

--------------------jquery below ------------------

$('[placeholder]').parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placehold开发者_如何学运维er')) {
      input.val('');
    }

  });

  var input = $('input.to_do').val();

  dataList = 'list=' + input;
    $.ajax({
        type: "POST",
        url: "ajax_table_edit.php",
        data: dataList,
        cache: false,
        success: function(html)
            {
                alert(input);
                //$('.to_do_list_').html(data);
                //$('.n').hide();
            }
    });
});

--------------------------html below --------------------

<form action='#' method='post' >
<input type="text" class="to_do shadow" placeholder="enter text"/>
</form>

Thanks for your time!

---

Prevent the default event behavior:

$('[placeholder]').parents('form').submit(function(event) {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }

  });

  var input = $('input.to_do').val();

  dataList = 'list=' + input;
    $.ajax({
        type: "POST",
        url: "ajax_table_edit.php",
        data: dataList,
        cache: false,
        success: function(html)
            {
                alert(input);
                //$('.to_do_list_').html(data);
                //$('.n').hide();
            }
    });

    event.preventDefault();
});

---

Add return false to the bottom of your function, so that the page doesn't execute the default submit action.

Like this:

$('[placeholder]').parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }

  });

  var input = $('input.to_do').val();

  dataList = 'list=' + input;
    $.ajax({
        type: "POST",
        url: "ajax_table_edit.php",
        data: dataList,
        cache: false,
        success: function(html)
            {
                alert(input);
                //$('.to_do_list_').html(data);
                //$('.n').hide();
            }
    });

  return false;
});