'JavaScript / HTML/Javascript'에 해당되는 글 10건

  1. 2016.02.17 html form을 json으로 변환 (1)
  2. 2013.07.24 자바스크립트에서 replace를 replaceAll 처럼 사용하기
  3. 2012.11.15 Javascript 동적으로 객체에 프로퍼티 추가하기
  4. 2011.07.13 JavaScript에서 폼 submit 처리하기 (1)
  5. 2011.07.12 JavaScript 다중 폼(form)이 있는 페이지에서 특정 폼의 요소에 접근하기
  6. 2010.09.28 Javascript Textbox, Label 값 설정
  7. 2010.09.04 Javascript 인터넷 브라우저 창 크기 조정
2016.02.17 15:42

html form을 json으로 변환

serializeObject function 추가
$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};


호출

$.ajax({
	url : 'url',
	contentType: 'application/json',
	data : JSON.stringify($("form").serializeObject()),
	type : 'POST',
	dataType : 'json',
	success : function(result) {
		.....
	}
});


[참고] Send JSON Data on HTML form submit

Trackback 0 Comment 1
2013.07.24 17:20

자바스크립트에서 replace를 replaceAll 처럼 사용하기

자바스크립트에서 replaceAll 은 없다.
 
정규식을 이용하여 대상 스트링에서 모든 부분을 수정해줄 수 있다.
ex) str.replace("#","");   ->  #를 공백으로 변경한다.
 
하지만 첫번째 # 만 공백으로 변경하고 나머지는 변경이 되지 않는다.
str.replace(/#/gi, "");    -> #를 감싼 따옴표를 슬래시로 대체하고 뒤에 gi 를 붙이면
 
replaceAll 과 같은 결과를 볼 수 있다.



[출처] 자바스크립트에서 replace를 replaceAll 처럼 사용하기

Trackback 0 Comment 0
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.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 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.04 14:02

Javascript 인터넷 브라우저 창 크기 조정

인터넷 브라우저의 크기는 window.resizeTo(newWidth, newHeight)로 가능하다.



[참조]
Resizing a window

Trackback 0 Comment 0