HTML Form 은 client의 정보를 입력받는 문서라고 보면 된다.
<form> 태그를 이용하여 각종 입력양식을 통해 입력받아 서버로 전달하는 기능을 담당한다.
form객체는 document.forms 배열로 표현한다.
파일을 직접 실행해볼 수 있게 만든 예제 파일
formChk.php
form_javascript.php
form_jquery.php
jQuery 를 사용한 함수는 없지만 jQuery 스크립트를 한줄 추가했다.
첨부한 예제 파일을 다운로드 받아서 실행해보면 금방 이해된다.
forms[0] 는 한 파일안에 form 태그가 2개 존재할 경우 첫번째 form 을 의미한다.
두번째 form 은 forms[1]
var name = document.myform.name.value;
var telNO = document.myform.telNO.value;
var address = document.myform.address.value;
에서 공통적인 변수를 별도로 지정하여 처리하는 편이 더 좋다.
var f = document.myform;
function validateForm(){
var f = document.myform;
if(f.name.value ==""){
alert('이름을 입력하세요');
f.name.focus();
return false;
}
if(f.telNO.value ==""){
alert('전화번호를 입력하세요');
f.telNO.focus();
return false;
}
if(f.address.value ==""){
alert('주소를 입력하세요');
f.address.focus();
return false;
}
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function info_form(){
str = " name : " + document.myform.name + "<br>" ;
str += " action : " + document.myform.action+ "<br>" ;
str += " target : " + document.myform.target + "<br>" ;
str += " method : " + document.myform.method + "<br>" ;
str += " encoding : " + document.myform.encoding + "<br>" ;
str += " length : " + document.myform.length + "<br>" ;
str += " 첫번째 요소 value : " + document.myform.elements[0].value + "<br>" ;
str += " 첫번째 요소 name : " + document.myform.elements[0].name + "<br>" ;
str += " 첫번째 form의 첫번째 요소 name : " + document.forms[0].elements[0].name + "<br>" ;
str += " 첫번째 form의 첫번째 요소 value : " + document.forms[0].elements[0].value + "<br>" ;
str += " 첫번째 form의 두번째 요소 name : " + document.forms[0].elements[1].name + "<br>" ;
str += " 첫번째 form의 두번째 요소 value : " + document.forms[0].elements[1].value + "<br>" ;
str += " 첫번째 form의 세번째 요소 name : " + document.forms[0].elements[2].name + "<br>" ;
str += " 첫번째 form의 세번째 요소 value : " + document.forms[0].elements[2].value + "<br>" ;
document.write(str);
}
function validateForm(){
var name = document.myform.name.value;
var telNO = document.myform.telNO.value;
var address = document.myform.address.value;
if(name ==""){
alert('이름을 입력하세요');
document.myform.name.focus();
return false;
}
if(telNO ==""){
alert('전화번호를 입력하세요');
document.myform.telNO.focus();
return false;
}
if(address ==""){
alert('주소를 입력하세요');
document.myform.address.focus();
return false;
}
}
</SCRIPT>
</head>
<body>
<form name="myform" action="formChk.php" method="post" onsubmit="return validateForm()">
이름:<input type="text" name="name" id="myname" value="홍길동" size="20" />
전화:<input type="text" name="telNO" value="010-1234-9999" size="20" />
주소:<input type="text" name="address" value="" size="50" required />
<input type="button" value="폼정보보기" onclick="info_form()" />
<input type="submit" value="확인" />
<input type="reset" value="취소" />
</form>
<p id="demo"></p>
</body>
</html>
|
=== formChk.php === <?php
extract($_POST);
print_r($_POST);
echo '<br />';
var_dump($_POST);
exit; // 이 명령어 다음에 적힌 코드는 실행하지 말고 빠져나가라.
?>
|
위 코드를 jQuery 로 변경한 것을 살펴보자.
$("[attribute]") : [attribute(속성)] selector는 각 selector의 특정 속성을 선택한다.
- [attribute=value] : 특정 속성과 값을 가진 각 element를 선택한다.
- $(selector).attr(attribute) : attribute의 값을 Return
- $(selector).attr(attribute,value) : attribute의 값을 설정
- $(selector).attr(attribute,function(index,currentvalue)) : function을 사용하여 값을 설정
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> function info_form(){
str = " name : " + $("form").attr('name') + "<br>" ;
str += " action : " + $("form").attr('action') + "<br>" ;
str += " target : " + $("form").attr('target') + "<br>" ;
str += " method : " + $("form").attr('method') + "<br>" ;
str += " encoding : " + $("form").attr('encoding') + "<br>" ;
str += " length : " + $("form").val().length + "<br>" ;
str += " 첫번째 요소 value : " + $("form input[name=name]").val() + "<br>" ;
str += " 첫번째 요소 name : " + $("form input[name=name]") + "<br>" ;
str += " 첫번째 form의 첫번째 요소 name : " + document.forms[0].elements[0].name + "<br>" ;
str += " 첫번째 form의 첫번째 요소 value : " + document.forms[0].elements[0].value + "<br>" ;
str += " 첫번째 form의 두번째 요소 name : " + $("form input[name=telNO]") + "<br>" ;
str += " 첫번째 form의 두번째 요소 value : " + $("form input[name=telNO]").val() + "<br>" ;
str += " 첫번째 form의 세번째 요소 name : " + $("form input[name=address]") + "<br>" ;
str += " 첫번째 form의 세번째 요소 value : " + $("form input[name=address]").val() + "<br>" ;
document.write(str);
}
$(document).ready(function(){
$("#info_form").click(function(){
info_form();
// $("form :input").each(function(){
// alert($(this).val());
// });
});
$("form").submit(function(){
var name = $("input[name=name]").val();
var telNO = $("input[name=telNO]").val();
var address = $("input[name=address]").val();
if(name ==""){
alert('이름을 입력하세요');
$("input[name=name]").focus();
return false;
}
if(telNO ==""){
alert('전화번호를 입력하세요');
$("input[name=telNO]").focus();
return false;
}
if(address==""){
alert('주소를 입력하세요');
$("input[name=address]").focus();
return false;
}
});
});
</script>
</head>
<body>
<form name="myform" action="formChk.php" method="post">
이름:<input type="text" name="name" id="myname" value="홍길동" size="20" />
전화:<input type="text" name="telNO" value="010-1234-9999" size="20" />
주소:<input type="text" name="address" value="" size="50" />
<input type="button" id="info_form" value="폼정보보기" />
<input type="submit" value="확인" />
<input type="reset" value="취소" />
</form>
<p id="demo"></p>
</body>
</html> |
<button id="button1">button1</button>
<button id="button2">button2</button>
<button id="button3">button3</button>
<button id="button4">button4</button>
<div></div>
<script>
$(function(){
$("button").each(function(){
$(this).click(function(){
var name_var=$(this).attr("id");
$("div").text("jQuery Object : "+name_var);
});
});
})
</script>
참조 : 제대로 배우는 자바스크립트 Form 전송 기초 https://link2me.tistory.com/954
