'javascript'에 해당되는 글 9건

  1. 2012.11.15 Javascript 동적으로 객체에 프로퍼티 추가하기
  2. 2011.07.28 HTML a link에 javascript 연동
  3. 2011.07.13 JavaScript에서 폼 submit 처리하기 (1)
  4. 2011.07.12 JavaScript 다중 폼(form)이 있는 페이지에서 특정 폼의 요소에 접근하기
  5. 2010.09.28 ASP.NET Ok, Cancel 메시지 박스 처리
  6. 2010.09.28 Javascript Textbox, Label 값 설정
  7. 2010.09.14 ASP.NET 자바스크립트를 이용한 FileUpload 확장자 검사
2012.11.15 15:45

Javascript 동적으로 객체에 프로퍼티 추가하기

원래 객체

var data = {

    "Property1" : 1,

    "Property2" : 2,

    "Property3" : 3

}

프로퍼티 추가

data["Property4"] = 4


[출처] Is it possible to add dynamically named properties to JavaScript object?

Trackback 0 Comment 0
2011.07.28 18:37

HTML a link에 javascript 연동

JavaScript 부분
<head>
<script type="text/javascript">
function someFunction() {
....
}
</script>
</head>

A Link 부분
<a href="javascript:someFunction();">클릭</a>


[참고] Using Link Tags with JavaScript
Trackback 0 Comment 0
2011.07.13 17:48

JavaScript에서 폼 submit 처리하기

자바스크립트 부분
<script type="text/javascript">
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>

만약 클릭에 따라서 폼의 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>

호출하는 부분
<body>
<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>


[참고] using JavaScript for form submit
Trackback 0 Comment 1
2011.07.12 17:11

JavaScript 다중 폼(form)이 있는 페이지에서 특정 폼의 요소에 접근하기

접근방법
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>

위와 같이 페이지가 구성되어 있을 때 form2의 writer에 값을 지정할 때는
document.forms["form2"].elements["writer"].value = "내 이름"


[참고] Using JavaScript to access form objects when there are multiple forms
Trackback 0 Comment 0
2010.09.28 19:15

ASP.NET Ok, Cancel 메시지 박스 처리

1. 우선 이벤트를 등록할 버튼을 생성한다.
<asp:Button ID="btnDelete" runat="server" Text="삭제" />


2. 버튼에 OnClientClick 속성에 confirm 자바스크립트를 등록한다.
<asp:Button ID="btnDelete" runat="server" Text="삭제"
  OnClientClick="return confirm('정말 삭제하시겠습니까?');" />


3. 버튼에 onclick 이벤트를 등록한다. (VS 디자인 모드에서 더블클릭)
<asp:Button ID="btnDelete" runat="server" Text="삭제"
  OnClientClick="return confirm('정말 삭제하시겠습니까?');"
  onclick="btnDelete_Click" />


4. onclick 이벤트에 원하는 동작을 작성한다. (.aspx.cs 파일)
string script = "<script>alert('확인을 클릭하셨네요!!');</script>";
Page.ClientScript.RegisterClientScriptBlock(typeof(string), "confirm", script);


[참조] ASP.Net JavaScript 2-button (OK/Cancel) "msgbox"
Trackback 0 Comment 0
2010.09.28 14:29

Javascript Textbox, Label 값 설정

자바스크립트에서 본문 요소의 값을 설정하는 방법은 getElementById라는 메소드를 이용해서 가능하다.

텍스트박스

document.getElementById('span_id').value = 'new_value';



레이블

document.getElementById('span_id').innerText = 'new_value';
또는
document.getElementById('span_id').innerHTML = 'new_value';
Trackback 0 Comment 0
2010.09.14 11:31

ASP.NET 자바스크립트를 이용한 FileUpload 확장자 검사

자바스크립트
function checkFileExtension(elem) {
    var filePath = elem.value;

    if(filePath.indexOf('.') == -1)
        return false;
        
    var validExtensions = new Array();
    var ext = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();
    
    validExtensions[0] = 'jpg';
    validExtensions[1] = 'jpeg';
    validExtensions[2] = 'bmp';
    validExtensions[3] = 'png';
    validExtensions[4] = 'gif';  
    validExtensions[5] = 'tif';  
    validExtensions[6] = 'tiff';
    validExtensions[7] = 'txt';
    validExtensions[8] = 'doc';
    validExtensions[9] = 'xls';
    validExtensions[10] = 'pdf';
    
    for(var i = 0; i < validExtensions.length; i++) {
        if(ext == validExtensions[i])
            return true;
    }

    alert('The file extension ' + ext.toUpperCase() + ' is not allowed!');
    return false;
}

 

ASP.NET의 Page_Load에 다음 코드 추가

FileUpload1.Attributes.Add("onchange", "return checkFileExtension(this);");


[참조]
How to filter files in file upload HTML control
 
Trackback 0 Comment 0