'JavaScript / HTML'에 해당되는 글 14건
- 2011/07/28 HTML a link에 javascript 연동
- 2011/07/13 JavaScript에서 폼 submit 처리하기 (1)
- 2011/07/12 JavaScript 다중 폼(form)이 있는 페이지에서 특정 폼의 요소에 접근하기
- 2010/09/28 Javascript Textbox, Label 값 설정
- 2010/09/04 Javascript 인터넷 브라우저 창 크기 조정
- 2010/08/19 HTML Text의 영문을 대문자로 변경
- 2010/08/19 IFrame에서 상위 페이지의 필드 값 가져오기
JavaScript 부분
A Link 부분
[참고] Using Link Tags with JavaScript
<head>
<script type="text/javascript">
function someFunction() {
....
}
</script>
</head>
<script type="text/javascript">
function someFunction() {
....
}
</script>
</head>
A Link 부분
<a href="javascript:someFunction();">클릭</a>
[참고] Using Link Tags with JavaScript
자바스크립트 부분
호출하는 부분
만약 클릭에 따라서 폼의 action이 달라져야 한다면 각 action 별로 폼을 작성하고 해당 폼의 submit을 호출
예)
자바스크립트
호출하는 부분
[참고] using JavaScript for form submit
<script type="text/javascript">
function submitForm(action){
document.record.innerHTML = "<input type=hidden name=submit value='" + action +"'>";
document.change_record.submit();
}
</script>
function submitForm(action){
document.record.innerHTML = "<input type=hidden name=submit value='" + action +"'>";
document.change_record.submit();
}
</script>
호출하는 부분
<form name="change_record" action="record_update.php" method="post" autocomplete="off">
<a name="edit" href="javascript:void(1);" onClick="submitForm('Edit');">Edit</a>
<a name="delete" href="javascript:void(1);" onClick="submitForm('Delete');">Delete</a>
<a name="edit" href="javascript:void(1);" onClick="submitForm('Edit');">Edit</a>
<a name="delete" href="javascript:void(1);" onClick="submitForm('Delete');">Delete</a>
만약 클릭에 따라서 폼의 action이 달라져야 한다면 각 action 별로 폼을 작성하고 해당 폼의 submit을 호출
예)
자바스크립트
<script type="text/javascript">
function submitForm(action) {
if(action == 'Edit') {
document.form1.innerHTML = "<input type=hidden name=submit value='" + action +"'>";
document.form1.submit();
}
else if(action == 'Delete') {
document.form2.innerHTML = "<input type=hidden name=submit value='" + action +"'>";
document.form2.submit();
}
}
</script>
function submitForm(action) {
if(action == 'Edit') {
document.form1.innerHTML = "<input type=hidden name=submit value='" + action +"'>";
document.form1.submit();
}
else if(action == 'Delete') {
document.form2.innerHTML = "<input type=hidden name=submit value='" + action +"'>";
document.form2.submit();
}
}
</script>
호출하는 부분
<body>
<input type="button" name="edit" onclick="submitForm('Edit')" value="수정">
<input type="button" name="delete" onclick="submitForm('Delete')" value="삭제">
<input type="button" name="edit" onclick="submitForm('Edit')" value="수정">
<input type="button" name="delete" onclick="submitForm('Delete')" value="삭제">
<div>
<form name="form1" method="post" action="edit.html">
</form>
</div>
<div>
<form name="form2" method="post" action="delete.html">
</form>
</div>
</body>
<form name="form1" method="post" action="edit.html">
</form>
</div>
<div>
<form name="form2" method="post" action="delete.html">
</form>
</div>
</body>
[참고] using JavaScript for form submit
2011/07/12 17:11
JavaScript 다중 폼(form)이 있는 페이지에서 특정 폼의 요소에 접근하기
2011/07/12 17:11 in JavaScript / HTML
접근방법
예를 들어
위와 같이 페이지가 구성되어 있을 때 form2의 writer에 값을 지정할 때는
[참고] Using JavaScript to access form objects when there are multiple forms
documents.forms["폼 이름"].elements["엘레먼트 이름"];
예를 들어
<div id="dialog" style="display: none">
<form name="form1" method="post" action="save.do">
<table>
<tr>
<td>이름</td>
<td><input type="text" name="writer"></td>
</tr>
<tr>
<td>내용</td>
<td><input type="text" name="contents"></td>
</tr>
</table>
</form>
</div>
<div id="modify" style="display: none">
<form name="form2" method="post" action="save.do">
<table>
<tr>
<td colspan="2"><input type="hidden" name="id"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="writer"></td>
</tr>
<tr>
<td>내용</td>
<td><input type="text" name="contents"></td>
</tr>
</table>
</form>
</div>
<form name="form1" method="post" action="save.do">
<table>
<tr>
<td>이름</td>
<td><input type="text" name="writer"></td>
</tr>
<tr>
<td>내용</td>
<td><input type="text" name="contents"></td>
</tr>
</table>
</form>
</div>
<div id="modify" style="display: none">
<form name="form2" method="post" action="save.do">
<table>
<tr>
<td colspan="2"><input type="hidden" name="id"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="writer"></td>
</tr>
<tr>
<td>내용</td>
<td><input type="text" name="contents"></td>
</tr>
</table>
</form>
</div>
위와 같이 페이지가 구성되어 있을 때 form2의 writer에 값을 지정할 때는
document.forms["form2"].elements["writer"].value = "내 이름"
[참고] Using JavaScript to access form objects when there are multiple forms
자바스크립트에서 본문 요소의 값을 설정하는 방법은 getElementById라는 메소드를 이용해서 가능하다.
텍스트박스
document.getElementById('span_id').value = 'new_value';
레이블
document.getElementById('span_id').innerText = 'new_value';
또는
document.getElementById('span_id').innerHTML = 'new_value';
인터넷 브라우저의 크기는 window.resizeTo(newWidth, newHeight)로 가능하다.
HTML에서 Textbox의 영문을 대문자로 변경하는 방법으로 스타일시트의 text-transform을 사용하면 된다.
스타일시트
.uppercase
{
text-transform: uppercase;
}
{
text-transform: uppercase;
}
사용법
<input type="textbox" .... class="uppercase" />
여기서 주의할 점은 보여지기만 대문자로 보여질뿐 실제 내용은 소문자로 유지된다. 따라서 실제 데이터를 처리시 대문자로 바꿔줘야 한다.
웹 프로그래밍을 하면서 IFrame에서 상위 페이지의 값을 가져와야 되는 경우가 발생한다. 이는 자바 스크립트를 이용해 해결할 수 있다.
상위페이지
<html>
<head>
<title>제목 없음</title>
</head>
<body>
<form name="TheForm" action="ParentPage.aspx">
<input type="text"name="name"/>
<input type="text" name="email"/>
</form>
<p>
<iframe style="width: 500px; height: 300px;" src="Junki.aspx"></iframe>
</p>
</body>
</html>
IFrame 내부 페이지
<html>
<head>
<title>제목없음</title>
<script type="text/javascript">
function getParentValue( )
{
var ffrom = parent.document.TheForm;
var fto = document.TheForm;
for ( var e = 0; e < ffrom.elements.length; ++e )
{
var fld = ffrom.elements[e]; // won't work for checkboxes/radio/selects
fto.elements[fld.name].value = fld.value;
}
}
</script>
</head>
<body>
<form name="TheForm" action="Junki.aspx">
Name: <input name="name"/><br/>
EMail: <input name="email"/><br/>
<input type="button" name="submit" value="값 가져오기" onclick="getParentValue()"/>
</form>
</body>
</html>
만약 페이지 로드시 가져오고 싶다면 body의 onload에 자바스크립스 메소드를 지정해주면 된다.
Prev
Rss Feed