LAPM 개발자 정보공유

igniter.egloos.com

포토로그



form object 접근과 제어 javaScript

제목에서 처럼 초급용 입니다. 

이미 아는 내용이라고 태클 거신다면 할말 없지만 그래도 초급용입니다 -_-; 



통상 form의 element에 접근하는 방식은 

js를 사용하는 사람들 마다 다소 약간의 차이가 있습니다. 

선호하는 코딩 스타일이 다르다는 소리죠 

그렇지만 한가지 공통점은 어디서든 돌아가게 만들자~ 는게 목적 아닐까요? 

javascript 에서 form 뿐만 아니라  document단의  element에 접근하는 방법은 

계층적 접근에 대해서 약간 이해를 해야할 부분이 있습니다. 

그럼 아래에 기본적인 형식을 이용해서 설명을 곁들여 보겠습니다. 

-------------------------------------- 예제 코드1 -------------------------------------- 
<html> 
  <head> 
    <title>문서제목</title> 
  </head> 
  <body> 
    <form name="wfm"> 
        <input type="text" name="lg"  /><br /> 
        <input type="password" name="lp" /><br /> 
        <input type="checkbox" name="auto" /><br /> 
        <input type="submit" value="전송"  /> 
    </form> 
  </body> 
</html> 
------------------------------------------------------------------------------------------------ 
위와 같은 form이 있다고 가정 하겠습니다. 

스크립트를 통해서 문서내의 특정 tag에 접근하는 규칙은 . 을 기준으로 

계층적 구조로 접근하는 형식을 쓰는 것입니다. 

쉬운예로 
document.forms["wfm"].elements["lg"]; 
      문서  .        폼      .      객체 

이해가 되시나요? 

물론 폼을 거치지 않고 바로 접근하는 방법도 있습니다. 

document.getElementById("id"); 
document.getElementsByName("name"); 
    문서  .      아이디 | 네임 객체지정; 

이런 형식이 대표적인 예라고 보시면 됩니다. 

get은 가져오다 라는 의미로 해석을 하시면 이해가 빠를것이라 생각됩니다. 
엘리먼트의 아이디나 네임을 지정해서 해당객체를 지정하는 것입니다. 

그럼 이런 형식의 접근을 이용한 실질적인 방법을 만들어 보겠습니다. 

-------------------------------------- 예제 코드2 -------------------------------------- 
<html> 
  <head> 
    <title>문서제목</title> 
  </head> 
  <script language="javascript"> 
      function fm(){ 
          var obj = document.getElementById("sp");//span tag의 id를 이용한 접근 
          var frm = document.forms["wfm"];//폼까지의 접근자를 지정 
          for ( i=0; i < frm.length; i++){ 
          // form elements는 form의 배열형식으로도 접근 가능합니다. 
              tc = "=\n\n" 
              tc += "element type : " + frm[i].type + "\n\n"; //tc 변수에 문자열지정 
              tc += "element name : " + frm[i].name + "\n\n"; 
              tc += "element value : " + frm[i].value + "\n\n"; 
              obj.innerText += tc;//지정된 id의 연결정보를 담고있는 obj변수에 
              //innerText 를 이용하여 span tag영역안에 문자를 넣어라는 표현입니다. 
          } 
        return false; 
      } 
  </script> 
  <body> 
    <form name="wfm" omsubmit="return fm();"> 
        <input type="text" name="lg"  /><br /> 
        <input type="password" name="lp" /><br /> 
        <input type="checkbox" name="auto" value="1" /><br /> 
        <input type="submit" value="전송"  /> 
    </form> 
    <span id="sp"></span> 
  </body> 
</html> 
------------------------------------------------------------------------------------------------ 


실행된 결과물을 보시면 

element type : text 

element name : lg 

element value : 

element type : password 

element name : lp 

element value : 

element type : checkbox 

element name : auto 

element value : 1 

element type : submit 

element name : 

element value : 전송 

이런 값이 출력됩니다. 

단편적인 예를 들어 설명을 하였지만 javascript를 이용하여 

window, document 등에 접근하는 형식 대동소이합니다. 

forms[""], elements[""] 이런 내용은 하나의 형식입니다. 

elements["string"] 이런 표현식은 form의 객체에 접근하는 경우에만 

사용가능 합니다. 

예제코드2에 사용된 onsubmit 이벤트핸들러에 대해서 말씀드리면 

많은 초보자들이 <input type="button" value="전송" omclick="함수명()" /> 

이런식으로 사용하여 폼유효성 체크를 하고 js에서 form.submit();를 이용하여 

form을 전송하는 것을 많이 보았습니다. 

하지만 스쿨 팁텍에도 언젠가 올라온 내용이 있는데요 

이런경우 form의 input field에서 enter를 입력하면 form이 submit 되는 현상을 
보게 됩니다. 

위 input field 예는 버튼을 클릭을 해야만 함수를 호출하게 되어 있습니다. 

반면 onsubmit 이벤트 핸들러는 form이 submit 되는것을 인식합니다. 

onsubmit = "return 함수명();" 

이런식으로 사용하여 함수내에서 form의 입력된 정보에 유효성 검사를 하여 

맞지 않을 경우 false를 return 하는 형식을 취해주면 form이 전송되는 것도 

막을 수 있습니다. = "return  <- 이문장은 함수로 부터 되돌아 오는 

값이 false가 아니면 submit을 시키겠다는 뜻입니다. 

다소 귀찮고 힘들지 몰라도 개발자가 생각을 많이 하면 사용자는 더욱 편해진다는 

간단한 이치 잊어버리지 맙시다 ^^ 

위 예제를 통해 도움이 되었다면 좋겠습니다. 

[PHPschool.com 눈팅님의 글]

null

덧글

  • cheap_cialis 2019/01/11 08:12 # 삭제 답글

    I truly prize your function, Wonderful post.
  • cialis 2019/01/14 09:38 # 삭제 답글

    Hello, Neat post. There's a problem with your web site in web explorer, may test thisK IE still is the market leader and a large component to people will leave out your magnificent writing due to this problem.
  • cialis_online 2019/01/17 16:15 # 삭제 답글

    Its actually a nice and helpful piece of information. Im glad that you shared this useful information with us. Please keep us up to date like this. Thanks for sharing.
  • generic_viagra 2019/01/18 14:57 # 삭제 답글

    Heya i am for the first time here. I found this board and I find It really useful &amp it helped me out much. I hope to give something back and aid others like you helped me.
  • cialis_online 2019/01/19 05:00 # 삭제 답글

    Normally I do not read post on blogs, but I wish to say that this writeup very compelled me to try and do it! Your writing style has been surprised me. Thanks, quite great article.
  • viagra 2019/01/19 13:01 # 삭제 답글

    Thanks so much for sharing this excellent info! I'm seeking forward to see much more posts!
  • cheap_viagra 2019/01/20 06:33 # 삭제 답글

    hello!,I like your writing very a lot! proportion we keep in touch more approximately your article on AOL? I require a specialist on this area to unravel my problem. May be that's you! Looking forward to look you.
  • cialis 2019/01/22 14:59 # 삭제 답글

    Mudbox is a software for 3D sculpting and painting which is developed
  • viagra 2019/01/23 15:29 # 삭제 답글

    Excellent post. I was checking continuously this blog and I'm impressed! Very useful info particularly the last part
  • cheap_cialis 2019/01/25 04:41 # 삭제 답글

    It is really a nice and helpful piece of info. Im glad that you shared this helpful information with us. Please keep us up to date like this. Thanks for sharing.
  • cheap_viagra 2019/01/27 04:57 # 삭제 답글

    Really wonderful information can be found on web blog.
  • generic_cialis 2019/01/27 11:00 # 삭제 답글

    Hello, Neat post. There is a problem with your website in web explorer, may check this IE still is the market leader and a large component of folks will leave out your magnificent writing because of this problem.
  • online_cialis 2019/01/27 19:49 # 삭제 답글

    I appreciate, cause I discovered just what I used to be looking for. You have ended my four day long hunt! God Bless you man. Have a nice day. Bye
  • cheap_cialis 2019/01/28 22:10 # 삭제 답글

    Immigration ...the time to read or check out the content or sites we have linked to below the...
  • viagra_cheap 2019/01/29 01:57 # 삭제 답글

    It's a mammoth playground built of mountains, hills, lakes, rivers, valleys, woodlands,and beaches.
  • cialis 2019/01/29 20:22 # 삭제 답글

    I think this is among the most significant info for me. And i am glad reading your article. But want to remark on some general things, The website style is wonderful, the articles is really great D. Good job, cheers
  • viagra_professional 2019/01/31 06:24 # 삭제 답글

    Thanks so much for sharing all with the awesome info! I am looking forward to checking out far more posts!
  • buy_viagra 2019/02/01 02:37 # 삭제 답글

    Very informative post.Really thank you! Awesome.
  • cialis_online 2019/02/02 05:38 # 삭제 답글

    Hi there, just became aware of your blog through Google, and found that it's truly informative. Im gonna watch out for brussels. I will appreciate if you continue this in future. Many people will be benefited from your writing. Cheers!
  • canadian_cialis 2019/02/03 18:58 # 삭제 답글

    I truly prize your function, Wonderful post.
  • viagra_cheap 2019/02/04 03:24 # 삭제 답글

    Actually its referred to as Search engine optimization that when i search for this post I found this web page at the top of all web pages in search engine.
  • cheap_viagra 2019/02/04 09:24 # 삭제 답글

    Only wanna tell that this is very useful , Thanks for taking your time to write this.
  • buy_viagra 2019/02/04 20:00 # 삭제 답글

    I truly appreciate this post. I've been looking all over for this! Thank goodness I found it on Bing. You've made my day! Thanks again!
  • cialis 2019/02/05 15:18 # 삭제 답글

    Link exchange is nothing else but it is just placing the other persons weblog link on your page at proper place and other person will also do similar in support of you.
  • generic_viagra 2019/02/07 01:01 # 삭제 답글

    hi and thanks for the actual blog post ive recently been searching regarding this specific advice online for sum hours these days as a result thanks
  • cialis_canada 2019/02/09 08:26 # 삭제 답글

    You have an incredibly nice layout for your blog, i want it to utilize on my site also .
  • generic_cialis 2019/02/10 17:51 # 삭제 답글

    plus offering extras which can announce this kind of the main benefit of the skepticism.
  • viagra 2019/02/12 10:41 # 삭제 답글

    I'm not sure exactly why but this weblog is loading very slow for me. Is anyone else having this problem or is it a problem on my end? I'll check back later and see if the problem still exists.
  • cialis_online 2019/02/13 03:59 # 삭제 답글

    Howdy! Would you mind if I share your blog with my twitter group? Theres lots of people that I believe would really enjoy your content. Please let me know. Thanks
  • buy_viagra 2019/02/16 00:50 # 삭제 답글

    I usually do not drop a comment, but I read a few
  • buy_viagra 2019/02/17 08:28 # 삭제 답글

    Hi. Only wanted to ask a quick issue. Now i am
  • buy_cialis 2019/02/18 15:24 # 삭제 답글

    Hello to every one, its truly a fastidious for me to visit this site, it contains helpful Information.
  • tadalafil 2019/02/19 18:50 # 삭제 답글

    I like this weblog so considerably, saved to my bookmarks.
  • cialis 2019/02/22 16:20 # 삭제 답글

    Heya im for the first time here. I discovered this board and I to uncover It truly helpful &amp it helped me out a whole lot. I hope to supply something back and aid other people such as you helped me.
  • cheap_cialis 2019/02/22 21:37 # 삭제 답글

    Hi, Neat post. There's a problem with your website in internet explorer, would test this IE still is the market leader and a good portion of people will miss your great writing due to this problem.
  • generic 2019/02/23 00:51 # 삭제 답글

    Someone essentially help to make significantly posts I might state. This is the first time I frequented your web page and so far? I surprised with the research you made to create this actual submit amazing. Magnificent activity!
  • buy_cialis 2019/02/25 12:03 # 삭제 답글

    griseofulvin psoriasis
  • viagra 2019/02/26 13:27 # 삭제 답글

    Very well written article. It will be helpful to anyone who usess it, as well as yours truly
  • cialis 2019/03/01 11:23 # 삭제 답글

    Very informative blog post.Really thank you! Keep writing.
  • canadian_cialis 2019/03/01 21:28 # 삭제 답글

    I really appreciate this post. I've been looking all over for this! Thank goodness I found it on Bing. You've made my day! Thanks again!
  • cialis_online 2019/03/01 21:28 # 삭제 답글

    But a smiling visitor here to share the love , btw outstanding layout.
  • canadian_cialis 2019/03/01 21:30 # 삭제 답글

    Hello, always i used to check blog posts here in the early hours in the daylight,
  • buy_viagra 2019/03/01 21:33 # 삭제 답글

    Hi there! This is my first visit to your blog! We are a group of volunteers and starting a new initiative in a community in the same niche. Your blog provided us beneficial information to work on. You have done a marvellous job!
  • viagra 2019/03/02 04:07 # 삭제 답글

    How To Buy Cheap Generic Ceclor 500mg
  • online_viagra 2019/03/02 04:48 # 삭제 답글

    Wonderful beat ! I would like to apprentice while you amend your website, how could i subscribe for a weblog site? The account aided me a appropriate deal. I were tiny bit familiar of this your broadcast provided shiny transparent concept
  • buy_viagra 2019/03/02 08:27 # 삭제 답글

    I do consider all the ideas you've presented on your post. They're really convincing and can certainly work. Still, the posts are very brief for novices. May just you please extend them a little from next time? Thanks for the post.
  • viagra_online 2019/03/05 10:23 # 삭제 답글

    I will immediately grab your rss feed as I can not find your email subscription link or enewsletter service. Do you have any? Kindly let me know so that I could subscribe. Thanks.
  • cheap_cialis 2019/03/08 12:15 # 삭제 답글

    Hello there, I discovered your website by the use of Google while looking for a related subject, your web site came up, it seems good. I have bookmarked it in my google bookmarks.
  • cheap_viagra 2019/03/10 16:16 # 삭제 답글

    I do consider all the ideas you've presented on your post. They're really convincing and can certainly work. Still, the posts are very brief for novices. May just you please extend them a little from next time? Thanks for the post.
  • viagra_online 2019/03/12 14:40 # 삭제 답글

    I'm hunting for web sites that contain fantastic recommendations on what's in fashion and just what top rated makeup products is..
  • viagra 2019/03/15 03:42 # 삭제 답글

    Well I really enjoyed reading it. This information procured by you is very practical for correct planning.
  • viagra_cheap 2019/03/17 14:55 # 삭제 답글

    Over the course of the initial period, they began to flrm group identities.
  • viagra 2019/03/19 02:35 # 삭제 답글

    I went over this site and I conceive you have a lot of wonderful information, bookmarked .
  • viagra_buy 2019/03/19 12:42 # 삭제 답글

    As I web site possessor I believe the content material here is rattling great , appreciate it for your hard work. You should keep it up forever! Good Luck.
  • viagra 2019/03/19 15:42 # 삭제 답글

    Because here is a list of multiplayer games is that the leave was asked
  • comment 2019/03/20 20:43 # 삭제 답글

    I'm truly enjoying the design and layout of your blog. It's a very easy on the eyes which makes it much more pleasant for me to come here and visit more often. Did you hire out a developer to create your theme? Outstanding work!
  • cialis 2019/03/21 16:52 # 삭제 답글

    Say, you got a nice blog post. Really Cool.
  • canadian_cialis 2019/03/21 20:04 # 삭제 답글

    In my friend's web blogs they already have provided me on the website rolls, but mine usually is located at the bottom on the listing and does not selection when I place as it does for some individuals. Is this a placing that I have to difference or is this a choice they may have considered? .
  • viagra 2019/03/21 20:04 # 삭제 답글

    insecticide permethrin side effects in cats
  • canadian_cialis 2019/03/24 01:00 # 삭제 답글

    I just ought to tell you which you have written an exceptional and distinctive post that I really enjoyed reading. Im fascinated by how nicely you laid out your material and presented your views. Thank you.
  • buy_cialis 2019/03/26 06:04 # 삭제 답글

    I loved your post.Much thanks again.
  • super 2019/04/01 22:35 # 삭제 답글

    What's Happening i'm new to this, I stumbled upon this I have discovered It positively helpful and it has aided me out loads. I hope to contribute &amp help other users like its helped me. Good job.
  • viagra_cheap 2019/04/03 03:35 # 삭제 답글

    Thank you, I have just been searching for information approximately this subject for ages and yours is the best I have came upon till now. But, what concerning the conclusion? Are you certain in regards to the supply?
  • canadian_cialis 2019/04/04 04:17 # 삭제 답글

    Really wonderful information can be found on web blog.
  • cheap_cialis 2019/04/04 06:25 # 삭제 답글

    Whats Taking place i am new to this, I stumbled upon this I have found It positively helpful and it has aided me out loads. I hope to contribute &amp assist other users like its helped me. Great job.
  • viagra_online 2019/04/08 04:05 # 삭제 답글

    If you are going for best contents like myself, simply go to see this site all
  • choice 2019/04/08 12:13 # 삭제 답글

    Wonderful beat ! I would like to apprentice while you amend your website, how could i subscribe for a weblog site? The account aided me a appropriate deal. I were tiny bit familiar of this your broadcast provided shiny transparent concept
  • viagra 2019/04/11 02:59 # 삭제 답글

    Hey, thanks for the post.Really thank you! Really Cool.
  • cialis 2019/04/12 06:51 # 삭제 답글

    It's a mammoth playground built of mountains, hills, lakes, rivers, valleys, woodlands,and beaches.
  • generic_cialis 2019/04/15 04:30 # 삭제 답글

    Heya i am for the first time here. I found this board and I find It really useful &amp it helped me out much. I hope to give something back and aid others like you helped me.
  • for 2019/04/17 15:28 # 삭제 답글

    There is clearly a bundle to realize about this. I suppose you made some good points in features also.
  • super 2019/04/18 04:59 # 삭제 답글

    Hi to all, how is everything, I think every one is getting more from this site, and your views
  • online_viagra 2019/04/19 08:42 # 삭제 답글

    Hi! Someone in my Myspace group shared this website with us so I came to look it over. I'm definitely loving the information. I'm bookmarking and will be tweeting this to my followers! Great blog and terrific design and style.
  • cialis 2019/04/22 02:03 # 삭제 답글

    Would you be taken with exchanging links?
  • cheap_cialis 2019/04/23 09:47 # 삭제 답글

    This is really interesting, You're a very skilled blogger. I have joined your feed and look forward to seeking more of your magnificent post. Also, I have shared your web site in my social networks!
  • generic_viagra 2019/04/23 16:52 # 삭제 답글

    Very informative article post.Really looking forward to read more. Fantastic.
  • cialis 2019/04/26 02:46 # 삭제 답글

    I feel like Im regularly seeking interesting features you just read about a number of subjects, but I handle to add in the blog among our translates every day when you
  • viagra_online 2019/04/27 13:06 # 삭제 답글

    Wonderful blog! I found it while surfing around on Yahoo News. Do you have any tips on how to get listed in Yahoo News? I've been trying for a while but I never seem to get there! Appreciate it
  • cialis_canada 2019/04/28 22:48 # 삭제 답글

    I've been absent for a while, but now I remember why I used to love this site. Thank you, I'll try and check back more frequently. How frequently you update your site?
  • buy_viagra 2019/04/30 03:45 # 삭제 답글

    Hey are using WordPress for your blog platform? I'm new to the blog world but I'm trying to get started and set up my own. Do you require any coding knowledge to make your own blog? Any help would be really appreciated!
  • viagra_cheap 2019/04/30 13:13 # 삭제 답글

    It'll also save a lot of cash and time for those on a restricted budget who
  • viagra 2019/04/30 15:21 # 삭제 답글

    I'm searching for websites that may have excellent tips about what's popular and what the most effective makeup products is..
  • cheap_cialis 2019/05/01 09:20 # 삭제 답글

    I just couldnt depart your site prior to suggesting that I incredibly enjoyed the standard information an individual supply for your visitors? Is gonna be back often so that you can inspect new posts
  • buy_viagra 2019/05/03 05:28 # 삭제 답글

    Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You obviously know what youre talking about, why throw away your intelligence on just posting videos to your site when you could be giving us something enlightening to read?
  • buy_cialis 2019/05/03 20:42 # 삭제 답글

    Wow, superb blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is wonderful, let alone the content!
  • buy_viagra 2019/05/04 22:03 # 삭제 답글

    butenafine solubility
  • viagra_professional 2019/05/04 23:40 # 삭제 답글

    Pretty great post. I just stumbled upon your blog and wanted
  • buy_cialis 2019/05/05 13:02 # 삭제 답글

    An attentiongrabbing dialogue is worth comment. I believe that you must write extra on this subject, it won't be a taboo topic but typically persons are not enough to speak on such topics. To the next. Cheers
  • cialis_online 2019/05/07 22:16 # 삭제 답글

    I simply couldn't depart your site prior to suggesting that I actually loved the standard info an individual supply for your guests? Is going to be back regularly in order to inspect new posts.
  • cialis_cheap 2019/05/09 03:53 # 삭제 답글

    Thank you, I have just been searching for info about this subject for a long time and yours is the greatest I've found out so far. However, what about the bottom line? Are you positive concerning the supply?
  • viagra_generic 2019/05/09 09:00 # 삭제 답글

    Hi there, just became aware of your blog through Google, and found that it is really informative. Im going to watch out for brussels. Ill be grateful if you continue this in future. Lots of people will be benefited from your writing. Cheers!
  • buy_viagra 2019/05/13 14:53 # 삭제 답글

    you're truly a just right webmaster. The site loading speed is incredible. It kind of feels that you are doing any distinctive trick. In addition, The contents are masterpiece. you've performed a magnificent task in this subject!
  • cialis 2019/05/16 02:08 # 삭제 답글

    Hello, I desire to subscribe for this blog to obtain most recent updates, thus where can i do it please help.
  • cialis_online 2019/05/16 06:42 # 삭제 답글

    It is also possible that Zynga's chosen advertising network is to blame if we consider the case of the New York Times' website
  • cialis_generic 2019/05/16 18:01 # 삭제 답글

    I will immediately grab your rss feed as I can not find your email subscription link or enewsletter service. Do you have any? Kindly let me know so that I could subscribe. Thanks.
  • buy_viagra 2019/05/16 19:04 # 삭제 답글

    In my friend's web blogs they already have provided me on the website rolls, but mine usually is located at the bottom on the listing and does not selection when I place as it does for some individuals. Is this a placing that I have to difference or is this a choice they may have considered? .
  • cialis_online 2019/05/19 06:39 # 삭제 답글

    Hello! Someone in my Facebook group shared this website with us so I came to check it out. I'm definitely enjoying the information. I'm bookmarking and will be tweeting this to my followers! Outstanding blog and superb design and style.
  • viagra_professional 2019/05/20 00:27 # 삭제 답글

    When I originally commented I clicked the Notify me when new comments are added checkbox and now every time a comment is added I get 4 emails using the same comment. Is there any way you may take away me from that service? Thanks!
  • viagra_cheap 2019/05/21 06:14 # 삭제 답글

    Hey. Cool post. There's a dilemma together with your website in chrome, and you may want to check this The browser will be the market leader and a huge component of other people will omit your great writing because of this issue.
  • viagra 2019/05/21 15:04 # 삭제 답글

    Hi there! I know this is kind of off topic but I was wondering if you knew where I could locate a captcha plugin for my comment form? I'm using the same blog platform as yours and I'm having difficulty finding one? Thanks a lot!
댓글 입력 영역
◀ 다음덧글    이전덧글 ▶