Understanding JavaScript DOM Form Objects

JavaScript DOM Objects Form Form

Form Objects form input text, password, hidden, checkbox, radio, file, button, submit, reset textarea select option button

Form Objects form https://www.w3schools.com/jsref/dom_obj_form.asp input/textarea text, checkbox, radio, textarea, select https://www.w3schools.com/jsref/dom_obj_select.asp option https://www.w3schools.com/jsref/dom_obj_option.asp

<form id="f1" method="post" action="join.php" target="newWin"> form Property Property elements[] action enctype Description Description Returns an array containing each element in the form Sets or returns the action attribute of a form Sets or returns the MIME type used to encode the content of a form id length method Sets or returns the id of a form Returns the number of elements in a form Sets or returns the HTTP method for sending data to the server name target Sets or returns the name of a form Sets or returns where to open the action-URL in a form Method Method reset() submit() Description Description Resets the values of all elements in a form Submits a form

Input Properties input submit, reset, button id text, checkbox, radio textarea file hidden select option password id id id id id id id name name name name name name name type type type type type type type value value value value value selectedIndex value value form form form form form form form form accessKey accessKey accessKey accessKey accessKey tabIndex tabIndex tabIndex tabIndex tabIndex tabIndex alt alt alt alt alt disabled disabled disabled disabled disabled disabled disabled defaultValue defaultValue defaultValue defaultChecked multiple defaultSelected checked readOnly readOnly accept length text selected rows size size options[] cols maxLength

<form name="join" > Country: <input type="text" id="ctry" name="ctry" value="Taiwan" /> <br /> User Name: <input type="text" id="uid" name="uid" value="Your id" /><br /> Password: <input type="password" id="pwd" name="pwd" value="mypwd" /><br /> </form> https://ycchen.im.ncnu.edu.tw/www2011/lab/DomFormJS.html value var f1=document.getElementById("join"); f1.ctry.value = "Taiwan"; document.getElementById("ctry").value = "Taiwan"; disabled f1.ctry.disabled = true; readOnly f1.pwd.readOnly = true; accessKey document.getElementById("pwd").accessKey = 'p'; //Alt+p or Alt+Shift+p

Members: <input type="checkbox" id="yahoo" name="yahoo" value="yahoo" />Yahoo! <input type="checkbox" id="google" name="google" value="google" />Google <input type="checkbox" id="youtube" name="youtube" value="youtube" />Youtube Payment: <input type="radio" id="payV payV" name="pay" value="Visa" checked="checked" />Visa <input type="radio" id="payM payM" name="pay" value="Master" />Master <input type="radio" id="payJ payJ" name="pay" value="JCB" />JCB *checked var yahoo=document.getElementById("yahoo"); if (yahoo.checked yahoo.checked) alert("You select Yahoo!"); document.getElementById("google").checked var payV = document.getElementById("payV"); if (payV.checked) alert("Your payment via: "+payV.value); document.getElementById("payJ").checked = true; // Use getElementsByName(" ") var arrPay = document.getElementsByName("pay"); if (arrPay[0].checked) alert("Your payment via: "+arrPay[0].value); arrPay[2].checked = true; .checked = false;

Month: <select id="month" name="month"> <option>Jan.</option> <option value="February">Feb.</option> <option>Mar.</option> <option value="April">Apr.</option> </select> *selectedIndex *selectedIndex var month = document.getElementById("month"); alert(month.selectedIndex); month.selectedIndex = 2; * options[] * options[] var opt = month.options[month.selectedIndex] month.options[month.selectedIndex]; alert(opt.text+" / "+ opt.value); * selected * selected opt.selected = true; document.getElementById("month").options[2].selected = true;

multiple select Web Technologies: <br /> <select id="wts" name="wts[]" size="5" multiple <option selected="selected">HTML</option> <option>XHTML</option> <option>CSS</option> <option selected="selected">JavaScript</option> <option>ASP</option> <option selected="selected">PHP</option> </select> multiple> var wts = document.getElementById("wts"); var str1=""; for (var i=0; i<wts.length wts.length;i++) { if (wts.options[i].selected wts.options[i].selected) str1 += wts.options[i].text+", "; } alert("You select : "+str1);

methods text, textarea, password, file blur() focus() select() checkbox, radio, button, submit, reset blur() focus() click() select blur() focus() add() remove()

3+2 https://www.post.gov.tw/post/internet/SearchZone/index.jsp?ID=130107

<select name="city" ID="city" onChange="citychange_23()" class="select"> <option value="%" > </option> <option value=" " > </option> <option value=" " > </option> <option value=" " > </option> <option value=" " > </option> <option value=" " > </option> </select> <INPUT type="text" value="" name="cityareatext" ID="cityarea" size="6" maxlength="4"> cityarea = new Array(); cityarea_account = new Array(); cityarea_account[0] = 0; cityarea[1] = " "; cityarea[2] = " "; cityarea[6] = " "; cityarea[7] = " "; cityarea_account[1] = 7; cityarea[8] = " "; cityarea[9] = " "; cityarea[10] = " "; cityarea[17] = " "; cityarea[18] = " "; cityarea[19] = " "; cityarea_account[2] = 19; cityarea[20] = " "; cityarea[21] = " "; cityarea[22] = " "; function citychange_23() { i = window.document.form1.city.selectedIndex; window.document.form1.cityarea.length = \ cityarea_account[i] - cityarea_account[i-1]; index = cityarea_account[i-1] + 1; for (j = 0; j < window.document.form1.cityarea.length; j ++) { if (j!=0) { window.document.form1.cityarea.options[j].value = cityarea[index + j-1]; window.document.form1.cityarea.options[j].text = cityarea[index + j-1]; } } }

add(), remove() of Select Month: <select id="month" name="month"> <option>Jan.</option> <option value="February">Feb.</option> <option>Mar.</option> <option value="April">Apr.</option> </select> var month = document.getElementById("month") * add() * add() var opt1 = new Option(); opt1.text = " "; opt1.value="May" month.add(opt1); // month.add(opt1, 4) * remove() * remove() month.remove(2); month.remove(month.selectedIndex); before the 4-th option