ajax 제출 양식을 입력 할 때 문제가 발생했습니다.

Question

입력 필드에 텍스트를 입력하고 페이지를 새로 고치지 않고 같은 페이지에 출력하려고합니다. 그러나, 그것은 내가하고 싶은 일을하지 않습니다. 자리 표시 자 요소가있어서 실수로 필드에 아무 것도 입력하지 않으면 내 자리 표시 자 텍스트가 내 데이터베이스 (mysql)에 삽입되지 않습니다. 내가 가지고있는 문제는 내가 Enter 키를 누를 때 페이지가 새로 고쳐지며 성공했을 때 경고를받을 때 경고하지 않는다는 것입니다.

-------------------- ------------------ 아래 JQuery와

$('[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 아래 --------------------

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

감사합니다.

Answer 1

방지 기본 이벤트 동작 :

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

Answer 2

return false을 함수의 맨 아래에 추가하면 페이지가 기본 제출 조치를 실행하지 않습니다. 이처럼

:

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