1. 이메일주소의 도메인을 고를 때, 직접입력 가능하고 나머지를 선택했을 때는 수정 불가능
2. 정보를 전송할 때, 아이디와 도메인을 합쳐서 전송할 수 있도록 하기
<title>이메일 주소 예제</title>
<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
$('select[name=email_select]').change(function(){
var email_suffix= $(this).val();
$('input[name=email_suffix]').val(email_suffix);
var readonly= email_suffix == ''? false: true;
$('input[name=email_suffix]').prop('readonly',readonly); //prop('속성명', '값');
});
$('form').submit(function(){
var email_prefix= $('input[name=email_prefix]').val();
var email_sufix= $('input[name=email_sufix]').val();
var email= email_prefix+'@'+email_sufix;
$('input[name=email]').val(email);
return false;
})
})
</script>
</head>
<body>
<form>
<input type="text" name="email_prefix" >@
<input type="text" name="email_suffix">
<select name="email_select">
<option value="">직접입력</option>
<option value="gmail.com" id="gmail">gmail.com</option>
<option value="naver.com" id="naver">naver.com</option>
<option value="hanmail.com" id="hanmail">hanmail.com</option>
</select>
<input type="hidden" name="email">
<button type="submit">전송</button>
</form>
</body>
'괴발개발 > Javascript+JQuery' 카테고리의 다른 글
| JQ_메뉴기능(네이버 오늘읽을만한글 ) (0) | 2021.06.23 |
|---|---|
| JQ_요소의 속성정보 가져오기(attr), 설정하기(prop) (0) | 2021.06.23 |
| JQ_회원가입창 만들기 (0) | 2021.06.23 |
| JQ_요소의 정보를 가져오고(get) 설정하는(set) (0) | 2021.06.22 |
| JQ_chaining(체이닝기법) (0) | 2021.06.22 |