Question

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('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();
            }
    });
});

————————–html below ——————–

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

Thanks for your time!

Answer 1

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();
});