JQuery 폼 submit

1 개요

jQuery form submit

jQuery 폼 submit

jQuery 폼 제출

2 Non-AJAX 방식

<form id="form-destroy" method="post" action="delete.php">
<input type="hidden" name="postid" value="3">
</form>

<button id="btn-destroy">삭제하기</button>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$("#btn-destroy").click(function(e) {
	e.preventDefault();
	if(!confirm('정말로 삭제하시겠습니까?')) return;
	$('#form-destroy')[0].submit();
});
</script>

3 AJAX 방식

3.1 예시 1

<form id="myForm" action="//jsonplaceholder.typicode.com/posts">
  <input type="hidden" name="userId" value="1">
  <input type="text" name="title" value="hello"><br>
  <textarea name="body">world</textarea><br>
  <button>Send</button>
</form>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$( "#myForm" ).submit(function( event ) {
  event.preventDefault();
  var url = $(this).attr( "action" );
  var data = $(this).serialize();
  
  $.post( url, data )
  .done(function( data ) {
    console.log('--->', data.userId, data.title, data.body);
  });
});
</script>

→ Send 버튼을 누르면 콘솔창에 내용이 출력된다.

3.2 예시 2

• 예시 1의 변형판
• HTML로 작성하는 부분을 최소화하고 jQuery에서 처리하도록 하였다.

<form id="myForm">
  <input type="text" name="title" value="hello"><br>
  <textarea name="body">world</textarea><br>
  <button>Send</button>
</form>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$( "#myForm" ).submit(function( event ) {
  event.preventDefault();
  
  var data = $(this).serializeArray();
  data = data.concat([{name:"userId",value:1}]);
  
  $.post( "//jsonplaceholder.typicode.com/posts", data )
  .done(function( data ) {
    console.log( data.title, data.body );
  });
});
</script>

4 같이 보기

• jQuery 폼 유효성검사 후 제출하기
• jQuery $.post()
• HTML form 태그
• Vue.js 폼 submit

5 참고

• https://api.jquery.com/jquery.post/