하나의 폼에서 다중(Multi) Submit 구현
프로그래밍2010. 11. 3. 14:30
일단 하나의 폼 안에 2개 이상의 버튼이 있을 경우, 그리고 이 버튼의 type이 submit일 경우,
각기 다른 action을 가진 버튼이 있다손 치더라도 모조리 submit 되어버린다.
방법은 간단하다. 버튼의 type을 button으로 정의하고, 해당 버튼에 onClick 이벤트를 걸어준다.
그리고 스크립트를 작성하여 스크립트 내에서 폼의 유효성 검사를 하고 form.submit()을 마지막에 수행하도록 한다.
위 처럼 코드를 작성하면 page1, page2로 각각 submit이 가능하다.
약간 응용(?)을 하면 아래와 같은 코드도 가능하다.
예제#2 (호출)
위와 같이 코드를 작성하면, 호출 측에서 submit 버튼을 클릭할 경우, 폼의 기본 전송파일인, next.html로 폼이 submit 된다.
그러나 type이 button으로 설정된 버튼을 선택할 경우에는, text1 값을 post방식으로 팝업창(popup.html, 50x50)을 띄워 개별적으로 submit 할 수 있다.
팔자에도 없는 웹 개발을 시작하게 되니, 별 것들이 다 막힌다.
혹시라도 모르시는 분들을 위해,
그리고 나의 기억력을 위해,
포스팅.
각기 다른 action을 가진 버튼이 있다손 치더라도 모조리 submit 되어버린다.
방법은 간단하다. 버튼의 type을 button으로 정의하고, 해당 버튼에 onClick 이벤트를 걸어준다.
그리고 스크립트를 작성하여 스크립트 내에서 폼의 유효성 검사를 하고 form.submit()을 마지막에 수행하도록 한다.
예제#1(스크립트)
예제#1(호출)
<script>
function mySubmit(index) {
if (index == 1) {
document.myForm.action='page1.html';
}
if (index == 2) {
if (index == 2) {
document.myForm.action='page2.html';
}
document.myForm.submit();
document.myForm.submit();
}
</script>
예제#1(호출)
<form name='myForm' method='post'>
<input type='button' onClick='mySubmit(1)'>
<input type='button' onClick='mySubmit(2)'>
</form>
위 처럼 코드를 작성하면 page1, page2로 각각 submit이 가능하다.
약간 응용(?)을 하면 아래와 같은 코드도 가능하다.
예제#2 (스크립트)
<script>
function mySubmit() {
var element = document.myForm.text1.value;
window.open('popup.html?txtval='+element,'','width=50,height=50');
window.open('popup.html?txtval='+element,'','width=50,height=50');
}
</script>
예제#2 (호출)
<form name='myForm' method='post' action='next.html'>
<input type='text' name='text1'>
<input type='button' onClick='mySubmit()'>
<input type='submit'>
<input type='button' onClick='mySubmit()'>
<input type='submit'>
</form>
위와 같이 코드를 작성하면, 호출 측에서 submit 버튼을 클릭할 경우, 폼의 기본 전송파일인, next.html로 폼이 submit 된다.
그러나 type이 button으로 설정된 버튼을 선택할 경우에는, text1 값을 post방식으로 팝업창(popup.html, 50x50)을 띄워 개별적으로 submit 할 수 있다.
팔자에도 없는 웹 개발을 시작하게 되니, 별 것들이 다 막힌다.
혹시라도 모르시는 분들을 위해,
그리고 나의 기억력을 위해,
포스팅.
'프로그래밍' 카테고리의 다른 글
| 페이지 내, Component의 상태 체크 (getElementsBy????) (0) | 2010.11.01 |
|---|---|
| Open Flash Chart2 사용, 막대그래프 그리는 방법 (0) | 2010.09.27 |
| php 변수를 Javascript 변수로 전달하는 방법 (0) | 2010.07.06 |
| FTP 업/다운로드시, Binary/Text 방식의 차이 (0) | 2010.05.18 |
| 아이폰 개발에서 C++ 사용하기. (2) | 2009.12.20 |
페이지 내, Component의 상태 체크 (getElementsBy????)
프로그래밍2010. 11. 1. 14:49
코드를 짜다 보면, 종종 현재 페이지의 각 컴포넌트들을 제어해야 할 경우가 빈번하게 발생한다.
아래 코드는 현재 페이지에 "radio1" 으로 명명된 컴포넌트를 찾고,
그 중에서, checked 옵션이 true인 컴포넌트를 찾아 그 값을 출력한다.
getElementsByName을 사용했지만, 근래 getElementsByClassName도 추가되었다. (단 IE6은 지원되지 않음)
그 외에도 다양한 document class내 함수가 존재하니 찾아보면 많은 도움이 될 듯.
<script>
function getSelected(){
var element1 = document.getElementsByName("radio1");
for(var i=0; i<element1.length; i++) {
if(element1[i].checked){
alert(element1[i].value);
}//if
}//for
}//function
</script>
호출측
onclick=getSelected()
아래 코드는 현재 페이지에 "radio1" 으로 명명된 컴포넌트를 찾고,
그 중에서, checked 옵션이 true인 컴포넌트를 찾아 그 값을 출력한다.
getElementsByName을 사용했지만, 근래 getElementsByClassName도 추가되었다. (단 IE6은 지원되지 않음)
그 외에도 다양한 document class내 함수가 존재하니 찾아보면 많은 도움이 될 듯.
<script>
function getSelected(){
var element1 = document.getElementsByName("radio1");
for(var i=0; i<element1.length; i++) {
if(element1[i].checked){
alert(element1[i].value);
}//if
}//for
}//function
</script>
호출측
onclick=getSelected()
'프로그래밍' 카테고리의 다른 글
| 하나의 폼에서 다중(Multi) Submit 구현 (0) | 2010.11.03 |
|---|---|
| Open Flash Chart2 사용, 막대그래프 그리는 방법 (0) | 2010.09.27 |
| php 변수를 Javascript 변수로 전달하는 방법 (0) | 2010.07.06 |
| FTP 업/다운로드시, Binary/Text 방식의 차이 (0) | 2010.05.18 |
| 아이폰 개발에서 C++ 사용하기. (2) | 2009.12.20 |
php 변수를 Javascript 변수로 전달하는 방법
프로그래밍2010. 7. 6. 10:08
간만에 웹기반 코딩을 하니, 생각보다 잘 안됩니다.
늘 그렇지만, 간단한 것 하나 때문에 고생하다가 노트 해 둡니다.
그 전에 중요한 것 한가지. 물론 잘 알고 계시겠지만...
Javascript는 클라이언트 사용자의 컴퓨터에서 실행되며, PHP는 서버에서 해석되고 실행됩니다.
1. 변수를 그냥 쓰는 방법
2. 파라미터로 전달하는 방법
※ call
늘 그렇지만, 간단한 것 하나 때문에 고생하다가 노트 해 둡니다.
그 전에 중요한 것 한가지. 물론 잘 알고 계시겠지만...
Javascript는 클라이언트 사용자의 컴퓨터에서 실행되며, PHP는 서버에서 해석되고 실행됩니다.
1. 변수를 그냥 쓰는 방법
<script>
※ string 따위의 경우, 앞뒤에 \" 처리 필요.function fx()
{
excution += "<?=$variable?>";
}
{
excution += "<?=$variable?>";
}
</script>
2. 파라미터로 전달하는 방법
<script>
function fx(variable)
{
excution += variable;
}
{
excution += variable;
}
</script>
※ call
echo("<script>fx(\"$phpvar\");</script>");
'프로그래밍' 카테고리의 다른 글
| 페이지 내, Component의 상태 체크 (getElementsBy????) (0) | 2010.11.01 |
|---|---|
| Open Flash Chart2 사용, 막대그래프 그리는 방법 (0) | 2010.09.27 |
| FTP 업/다운로드시, Binary/Text 방식의 차이 (0) | 2010.05.18 |
| 아이폰 개발에서 C++ 사용하기. (2) | 2009.12.20 |
| 맥북없이 아이폰 어플 개발하기 (0) | 2009.12.20 |
