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

덧글

  • cialis 2017/12/26 13:16 # 삭제 답글

    Well I really enjoyed reading it. This information procured by you is very practical for correct planning.
  • buy_cialis 2017/12/31 00:45 # 삭제 답글

    I will immediately grab your rss feed as I can not find your email subscription link or enewsletter service. Do you've any? Please let me know in order that I could subscribe. Thanks.
  • generic_cialis 2018/01/03 04:39 # 삭제 답글

    Usually I do not read writeup on blogs, nevertheless I wish to say that this writeup extremely forced me to take a look at and do so! Your writing taste has been amazed me. Thanks, really wonderful post.
  • cialis 2018/01/05 15:28 # 삭제 답글

    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_cheap 2018/01/06 21:20 # 삭제 답글

    Today, while I was at work, my sister stole my apple ipad and tested to see if it can survive a 30 foot drop, just so she can be a youtube sensation. My apple ipad is now destroyed and she has 83 views. I know this is entirely off topic but I had to share it with someone!
  • cialis_online 2018/01/12 04:43 # 삭제 답글

    is elocon a steroid cream
  • buy_viagra 2018/01/12 18:13 # 삭제 답글

    Article Source a viral game app is not
  • cialis_canada 2018/01/16 20:31 # 삭제 답글

    Admiring the hard work you put into your site and detailed information you offer. It's good to come across a blog every once in a while that isn't the same unwanted rehashed material. Wonderful read! I've bookmarked your site and I'm adding your RSS feeds to my Google account.
  • viagra_cheap 2018/02/02 00:44 # 삭제 답글

    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.
  • viagra 2018/02/23 13:52 # 삭제 답글

    Mudbox is a software for 3D sculpting and painting which
  • viagra 2018/02/25 16:07 # 삭제 답글

    Hey very nice web site!! Man.. Beautiful.. Wonderful.. I'll bookmark your web site and take the feeds alsoKI am satisfied to seek out a lot of helpful information here in the publish, we want work out extra techniques in this regard, thank you for sharing
  • cheap 2018/03/05 21:49 # 삭제 답글

    Howdy! Do you know if they make any plugins to protect against hackers? I'm kinda paranoid about losing everything I've worked hard on. Any recommendations?
  • viagra 2018/03/08 00:22 # 삭제 답글

    Hi there! Would you mind if I share your blog with my myspace group? There's a lot of people that I think would really appreciate your content. Please let me know. Many thanks
  • viagra_price 2018/03/08 17:56 # 삭제 답글

    This kind of game gives a real experience of building a farm and planting
  • viagra 2018/03/08 17:56 # 삭제 답글

    It's a mammoth playground built of mountains, hills, lakes,
  • cialis 2018/03/29 10:21 # 삭제 답글

    You could certainly see your skills within the work you write. The world hopes for more passionate writers like you who arent afraid to say how they believe. Always follow your heart.
  • generic 2018/03/31 14:28 # 삭제 답글

    This website was how do you say it? Relevant!!
  • viagra 2018/04/04 23:13 # 삭제 답글

    Article Source a viral game app is not that much
  • viagra 2018/04/10 17:12 # 삭제 답글

    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 2018/04/12 08:04 # 삭제 답글

    griseofulvin psoriasis
  • buy_cialis 2018/04/24 16:14 # 삭제 답글

    Howdy! Do you know if they make any plugins to protect against hackers? I'm kinda paranoid about losing everything I've worked hard on. Any recommendations?
  • buy_cialis 2018/04/26 20:29 # 삭제 답글

    I like this weblog very much so much good info. It's a poor sort of memory that only works backward. by Lewis Carroll.
  • viagra_online 2018/05/04 17:41 # 삭제 답글

    Some genuinely prize content on this internet site, bookmarked.
  • online_viagra 2018/05/16 12:28 # 삭제 답글

    You are a really persuasive writer. I can see this in your writeup. You've a way of writing compelling info that sparks significantly interest.
  • cheap_viagra 2018/06/02 19:56 # 삭제 답글

    Good blog! I really love how it is easy on my eyes and the data are well written. I am wondering how I could be notified whenever a new post has been made. I have subscribed to your feed which must do the trick! Have a nice day!
  • cialis_online 2018/06/04 23:44 # 삭제 답글

    I just like the valuable info you provide in your articles. I will bookmark your weblog and check once more here frequently. I am moderately sure I will be told lots of new stuff right right here! Best of luck for the following!
  • buy_cialis 2018/06/13 04:04 # 삭제 답글

    I really enjoy the article post. Cool.
  • generic_cialis 2018/06/13 20:10 # 삭제 답글

    I got what you mean, regards for putting up.Woh I am delighted to find this website through google. You must pray that the way be long, full of adventures and experiences. by Constantine Peter Cavafy.
  • buy_viagra 2018/06/16 02:47 # 삭제 답글

    weblog. Loads of gratitude sharing.
  • canadian_viagra 2018/06/28 20:21 # 삭제 답글

    Thanks for any other informative web site. Where else may just I get that kind of information written in such an ideal way? I have a mission that I am just now operating on, and I have been on the look out for such information.
  • generic_viagra 2018/06/30 04:01 # 삭제 답글

    Thanks for this article. I'd also like to convey that it can always be hard if you find yourself in school and starting out to initiate a long history of credit. There are many college students who are only trying to live and have long or good credit history can often be a difficult thing to have.
  • generic_cialis 2018/07/02 18:09 # 삭제 답글

    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
  • cheap_viagra 2018/07/17 17:09 # 삭제 답글

    Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You clearly know what youre talking about, why throw away your intelligence on just posting videos to your weblog when you could be giving us something enlightening to read?
  • viagra_online 2018/07/24 06:04 # 삭제 답글

    Hey there! Do you know if they make any plugins to help with Search Engine Optimization? I'm trying to get my blog to rank for some targeted keywords but I'm not seeing very good results. If you know of any please share. Thank you!
  • purchase_cialis 2018/07/31 01:37 # 삭제 답글

    Because here is a list of multiplayer games is that the leave was asked
  • online_viagra 2018/08/05 15:02 # 삭제 답글

    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.
  • cialis_cheap 2018/08/10 15:10 # 삭제 답글

    what are some superior and in demand websites for blogs? ?? .
  • online_viagra 2018/08/23 09:49 # 삭제 답글

    It's a mammoth playground built of mountains, hills, lakes, rivers, valleys, woodlands,and beaches.
  • viagra 2018/08/24 11:16 # 삭제 답글

    Specifically where web can a certified psyciatrist submit content or sites for them to become fashionable?
  • generic_cialis 2018/08/29 18:14 # 삭제 답글

    Magnificent beat ! I wish to apprentice even as you amend your site, how could i subscribe for a blog web site? The account helped me a acceptable deal. I were a little bit acquainted of this your broadcast offered bright transparent concept
  • cialis 2018/09/01 18:53 # 삭제 답글

    I know this if off topic but I'm looking into starting my own blog and was curious what all is required to get set up? I'm assuming having a blog like yours would cost a pretty penny? I'm not very web savvy so I'm not 100 positive. Any recommendations or advice would be greatly appreciated. Thanks
  • viagra_online 2018/09/03 08:45 # 삭제 답글

    Very well written article. It will be helpful to anyone who usess it, as well as yours truly
  • payday_advance 2018/09/13 19:56 # 삭제 답글

    I loved your post.Much thanks again.
  • online_viagra 2018/09/17 19:27 # 삭제 답글

    I dugg some of you post as I cogitated they were very useful extremely helpful
  • super 2018/09/22 11:50 # 삭제 답글

    I'm curious to uncover out what blog system youre employing? Im experiencing some small security troubles with my latest weblog and Id like to locate something more safeguarded. Do you've any recommendations?
  • viagra_cheap 2018/09/24 04:17 # 삭제 답글

    A big thank you for your article.Really thank you! Cool.
  • buy_cialis 2018/09/24 21:12 # 삭제 답글

    It is rare for me to uncover something on the web thats as entertaining and intriguing as what you have got here. Your page is sweet, your graphics are great, and whats much more, you use source that are relevant to what youre saying. That you are undoubtedly one in a million, well done!
  • generic_cialis 2018/09/26 00:13 # 삭제 답글

    Neat blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple tweeks would really make my blog jump out. Please let me know where you got your design. Thanks
  • viagra_price 2018/09/27 10:04 # 삭제 답글

    Hey very nice site!! Man .. Beautiful .. Amazing .. I will bookmark your blog and take the feeds alsoI am happy to find a lot of useful info here in the post, we need work out more techniques in this regard, thanks for sharing. . . . . .
  • generic_cialis 2018/09/29 03:30 # 삭제 답글

    I really enjoy the article post. Cool.
  • viagra 2018/09/30 00:33 # 삭제 답글

    You actually make it seem really easy together with your presentation but I in finding this matter to be really something that I feel I would by no means understand. It sort of feels too complex and extremely broad for me. I'm looking forward for your next publish, Ill try to get the cling of it!
  • viagra 2018/09/30 14:26 # 삭제 답글

    My spouse and I stumbled over here by a different internet address and thought I might check items out. I like what I see so i am just following you. Appear forward to checking out your web page again.
  • payday 2018/10/01 06:43 # 삭제 답글

    Informative Site Hello guys here are some links that contains information which you might find useful yourselves. It is Worth Checking out.
  • online_viagra 2018/10/03 18:58 # 삭제 답글

    Fantastic website. A lot of useful information here. I'm sending it to a few pals ans also sharing in delicious. And naturally, thank you in your sweat!
  • buy_viagra 2018/10/05 16:45 # 삭제 답글

    Once I initially commented I clicked the Notify me when new feedback are added checkbox and now each time a remark is added I get four emails with the same comment. Is there any way you possibly can remove me from that service? Thanks!
  • order_cialis 2018/10/06 01:02 # 삭제 답글

    This is why Facebook games are becoming more popular. The ease of use and dissemination of content, tagging
  • buy_viagra 2018/10/07 05:58 # 삭제 답글

    I'm extremely impressed with your writing skills and also with the layout on your weblog. Is this a paid theme or did you modify it yourself? Either way keep up the excellent quality writing, it is rare to see a great blog like this one nowadays..
  • buy_viagra 2018/10/08 12:48 # 삭제 답글

    Inspiring story, where did you quote it from?
  • buy_cialis 2018/10/09 22:36 # 삭제 답글

    Very energetic blog, I enjoyed that a lot. Perhaps there is a part 2?
  • generic_cialis 2018/10/10 21:58 # 삭제 답글

    I am just seeming both for blog sites which give independent, nutritious commentary on all difficulties or blogging sites which have a liberal or droppedwing slant. Thank you..
  • buy_cialis 2018/10/12 04:33 # 삭제 답글

    Wow that was odd. I just wrote an extremely long comment but after I clicked submit my comment didn't show up. Grrrr well I'm not writing all that over again. Anyway, just wanted to say superb blog!
  • cialis 2018/10/12 10:44 # 삭제 답글

    nasa, , harold hill
  • buy_viagra 2018/10/13 00:37 # 삭제 답글

    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.
  • viagra 2018/10/14 02:15 # 삭제 답글

    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.
  • generic_cialis 2018/10/15 01:26 # 삭제 답글

    very nice submit, i definitely love this website, keep on it
  • viagra 2018/10/16 12:01 # 삭제 답글

    Hello.This post was extremely motivating, especially because I was browsing for thoughts on this subject last Thursday.
  • viagra_prostate 2018/10/18 00:51 # 삭제 답글

    Hi, Neat post. There is an issue together with your site in internet explorer, may test this IE nonetheless is the marketplace leader and a huge part of folks will leave out your magnificent writing because of this problem.
  • buy_cialis 2018/10/19 04:53 # 삭제 답글

    Wonderful beat ! I wish to apprentice while you amend your web site, how can i subscribe for a blog site? The account aided me a acceptable deal. I had been tiny bit acquainted of this your broadcast offered bright clear idea
  • online_viagra 2018/10/19 12:38 # 삭제 답글

    Hiya, I am really glad I have found this information. Nowadays bloggers publish just about gossips and web and this is really annoying. A good blog with interesting content, that is what I need. Thanks for keeping this website, I'll be visiting it. Do you do newsletters? Can not find it.
  • viagra_canada 2018/10/21 17:54 # 삭제 답글

    I like the helpful information you provide for your articles. Ill bookmark your blog and check again right here frequently. I am quite certain Ill be informed many new stuff proper right here! Best of luck for the next!
  • cialis_online 2018/10/26 01:17 # 삭제 답글

    I am sure this post has touched all the internet people, its really really nice post on building up new web site.
  • buy_viagra 2018/10/26 08:25 # 삭제 답글

    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
  • canadian_cialis 2018/10/26 13:00 # 삭제 답글

    Hey very nice blog!! Man .. Beautiful .. Amazing .. I'll bookmark your website and take the feeds alsoI am happy to find a lot of useful info here in the post, we need work out more techniques in this regard, thanks for sharing. . . . . .
  • canadian_cialis 2018/10/27 04:28 # 삭제 답글

    Wow, this article is fastidious, my younger sister is analyzing these kinds of things, thus I am going to convey her.
  • cialis 2018/10/29 15:13 # 삭제 답글

    Appreciate you sharing, great blog post.Thanks Again. Really Cool.
  • viagra_professional 2018/10/30 05:08 # 삭제 답글

    Spot lets start off perform on this writeup, I seriously consider this astounding internet site needs much more consideration. Ill apt to become once again to find out to read considerably a lot more, thank you that information.
  • cheap_viagra 2018/10/30 12:51 # 삭제 답글

    I have to agree with your statement with this issue and
  • cialis_cheap 2018/11/02 19:40 # 삭제 답글

    Wonderful beat ! I wish to apprentice while you amend your web site, how can i subscribe for a blog site? The account aided me a acceptable deal. I had been tiny bit acquainted of this your broadcast offered bright clear idea
  • cialis 2018/11/04 07:35 # 삭제 답글

    Excellent blog here! Also your web site loads up very fast! What web host are you using? Can I get your affiliate link to your host? I wish my website loaded up as quickly as yours lol
  • fast 2018/11/05 14:30 # 삭제 답글

    I got what you intend, appreciate it for posting .Woh I am lucky to find this website through google. I was walking down the street wearing glasses when the prescription ran out. by Steven Wright.
  • cheap_cialis 2018/11/06 12:42 # 삭제 답글

    You completed a number of fine points there. I did a search on the theme and found the majority of folks will agree with your blog.
  • viagra 2018/11/08 09:18 # 삭제 답글

    Wow, this article is fastidious, my younger sister is analyzing these kinds of things, thus I am going to convey her.
  • buy_cialis 2018/11/10 18:42 # 삭제 답글

    It's perfect time to make some plans for the long run and it is time to be happy. I have learn this publish and if I may I want to suggest you few attentiongrabbing things or advice. Maybe you could write next articles regarding this article. I desire to read even more things about it!
  • generic_cialis 2018/11/10 21:54 # 삭제 답글

    Thanks for this article. I'd also like to convey that it can always be hard if you find yourself in school and starting out to initiate a long history of credit. There are many college students who are only trying to live and have long or good credit history can often be a difficult thing to have.
  • viagra_cheap 2018/11/12 00:29 # 삭제 답글

    Hi, yup this post is truly fastidious and I have learned lot of things from it
  • cialis 2018/11/12 20:43 # 삭제 답글

    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?
  • viagra 2018/11/17 04:36 # 삭제 답글

    Hello to every one, its truly a fastidious for me to visit this site, it contains helpful Information.
  • cialis 2018/11/19 08:12 # 삭제 답글

    I'm curious to uncover out what weblog system youre employing? Im experiencing some small security problems with my latest weblog and Id like to locate something a lot more safeguarded. Do you have any recommendations?
  • cheap_viagra 2018/11/20 22:55 # 삭제 답글

    I just like the valuable info you provide in your articles. I will bookmark your weblog and check once more here frequently. I am moderately sure I will be told lots of new stuff right right here! Best of luck for the following!
  • buy_viagra 2018/11/20 23:50 # 삭제 답글

    Amoxicillin And Clavulanate 250mg With No Prescription in Indianapolis
  • buy_cialis 2018/11/25 06:07 # 삭제 답글

    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 2018/11/25 15:25 # 삭제 답글

    I appreciate, cause I found just what I was looking for. You have ended my 4 day long hunt! God Bless you man. Have a nice day. Bye
  • viagra 2018/11/25 21:54 # 삭제 답글

    I really enjoy reading on this website, it holds great articles. Don't put too fine a point to your wit for fear it should get blunted. by Miguel de Cervantes.
  • viagra_cheap 2018/11/27 19:39 # 삭제 답글

    This is a great blog, would you be involved in doing an interview about how you created it? If so email me!
  • buy_viagra 2018/11/29 21:01 # 삭제 답글

    Hello, i think that i saw you visited my site so i came to return the favor.I am trying to find things to enhance my web site!I suppose its ok to use some of your ideas!!
  • viagra 2018/12/01 06:58 # 삭제 답글

    Pretty great post. I just stumbled upon your blog and wanted
  • cialis 2018/12/04 04:00 # 삭제 답글

    I'm trying to find sites that have already fantastic useful information on what's popular and what is the optimum makeup products is..
  • cialis 2018/12/06 01:31 # 삭제 답글

    Pretty great post. I just stumbled upon your blog and wanted
  • buy_viagra 2018/12/07 00:49 # 삭제 답글

    Im not that much of a online reader to be honest but your blogs really nice, keep it up! I'll go ahead and bookmark your site to come back later. All the best
  • cheap_cialis 2018/12/08 22:31 # 삭제 답글

    A person essentially help to make seriously posts I would state. This is the first time I frequented your web page and thus far? I surprised with the research you made to create this particular publish extraordinary. Fantastic job!
댓글 입력 영역
◀ 다음덧글    이전덧글 ▶