The form represents the HTML <form> elements and are generally used to send data from one application to another; data that can be added / selected by the user.
There are several ways to access the HTML <form> elements as objects in JavaScript.
Generally, the following methods are used: getElementById(), querySelector() or the: document.forms property.
<p>Accesses a <form> using its ID and displays the value from the 'action' attribute.</p>
<form id='frm1' action='some_page.php' method='post'>
<p>This form with id '#frm1' has the action: <em id='resp'>#resp</em></p>
Text: <input type='text'/>
</form>
<script>
var frm = document.getElementById('frm1');
document.getElementById('resp').innerHTML = frm.action;
</script>
<p>Accesses a <form> using its 'name' and displays the value from the 'action' attribute.</p>
<form name='frm2' action='some_adr.php' method='post'>
<p>This form with name 'frm2' has the action: <em id='resp'>#resp</em></p>
Text: <input type='text'/>
</form>
<script>
var frm = document.forms['frm2'];
document.getElementById('resp').innerHTML = frm.action;
</script>
If there are multiple forms with the same 'class', the querySelector() method will return the first form with that class.
<p>Accesses a <form> using its 'class' and displays the value from the 'action' attribute.</p>
<form class='frm3' action='some_page.php' method='post'>
<p>This form with class 'frm3' has the action: <em id='resp'>#resp</em></p>
Text: <input type='text'/>
</form>
<script>
var frm = document.querySelector('form.frm3');
document.getElementById('resp').innerHTML = frm.action;
</script>
In addition to the properties and methods specific to html elements (presented at: //coursesweb.net/javascript/properties-methods-html-elements ), the form object contains its own properties and methods.
eform.acceptCharset - returns or sets the value of the accept-charset attribute.
<h4>Example form.acceptCharset</h4>
<form id='frm1' action='#' accept-charset='utf-8'>
Email: <input type='email' name='email'><br>
Pass: <input type='password' name='password'>
</form>
<p>Displays the value of the acceptCharset property.</p>
<blockquote id='resp'>#resp</blockquote>
<script>
var frm1 = document.getElementById('frm1');
document.getElementById('resp').innerHTML ='accept-charset = '+ frm1.acceptCharset;
</script>
eform.action - returns or sets the value of the action attribute.
<h4>Example form.action</h4>
<form id='frm1' action='page.php'>
Email: <input type='email' name='email'><br>
Pass: <input type='password' name='password'>
</form>
<p> If you click the following button, it displys the value from 'action' and sets another value.<br>
- The second click on the button it displays the new value.</p>
<button id='btn1'>Action</button>
<blockquote id='resp'>#resp</blockquote>
<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
document.getElementById('resp').innerHTML = frm1.action;
frm1.action ='other_page.php';
});
</script>
eform.autocomplete - returns or sets the value of the autocomplete attribute from <form>.
<h4>Example form.autocomplete</h4>
<form id='frm1' action='#' autocomplete='off'>
Email: <input type='email' name='email'><br>
Name: <input type='text' name='nume'>
</form>
<p>If you click the following button, it displys at #resp the value from 'autocomplete' and sets another value.<br>
- The second click on the button it displays the new value.</p>
<button id='btn1'>Autocomplete</button>
<blockquote id='resp'>#resp</blockquote>
<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
document.getElementById('resp').innerHTML = frm1.autocomplete;
frm1.autocomplete ='on';
});
</script>
eform.elements - contains an array of objects with all form elements belonging to this form. Then, the elements can be accessed in JavaScript by the order index (starting from 0), or by name (added to the 'name' attribute).
<h4>Example form.elements</h4>
<form action='#' id='frm1'>
Email: <input type='email' name='email' value='some@email.net'><br>
Pass: <input type='password' name='password' value='some_pass'>
</form>
<p> Displays the value of each input in form.</p>
<blockquote id='resp'>#resp</blockquote>
<script>
var felm = document.getElementById('frm1').elements;
var email = felm[0];
var pass = felm['password'];
document.getElementById('resp').innerHTML ='Email: '+ email.value +'<br>Pass: '+ pass.value;
</script>
eform.enctype - returns or sets the value of the 'enctype' attribute.
<h4>Example enctype</h4>
<form id='frm1' action='#' method='post'>
Text: <input type='text'/>
</form>
<p>If you click the following button, it displys at #resp the value returned by the 'enctype' property.</p>
<button id='btn1'>enctype</button>
<blockquote id='resp'>#resp</blockquote>
<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
document.getElementById('resp').innerHTML = frm1.enctype;
});
</script>
eform.length - contains the number of elements in form.
<h4>Example form.length</h4>
<form action='#' id='frm1'>
Email: <input type='email' name='email'><br>
Pass: <input type='password' name='password'><br>
<input type='submit' name='sbmt' value='Send'>
</form>
<p> Displays the number of elements in <form>. It accesses them with the 'elements' property, and displays their name.</p>
<blockquote id='resp'>#resp</blockquote>
<script>
var frm1 = document.getElementById('frm1');
var res ='Number of elements in form: '+ frm1.length;
for(var i=0; i<frm1.length; i++) res +='<br>'+ frm1.elements[i].name;
document.getElementById('resp').innerHTML = res;
</script>
eform.method - returns or sets the value of the 'method' attribute of the <form>.
<h4>Example form.method</h4>
<form id='frm1' action='#' method='get'>
Text: <input type='text' name='email'>
</form>
<p> If you click the following button, it displys the value from 'method' and sets another value.<br>
- The second click on the button it displays the new value.</p>
<button id='btn1'>method</button>
<blockquote id='resp'>#resp</blockquote>
<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
document.getElementById('resp').innerHTML = frm1.method;
frm1.method ='post';
});
</script>
eform.name - returns or sets the value of the 'name' attribute of <form>.
<h4>Example name</h4>
<form id='frm1' action='#' name='frm_name'>
Text: <input type='text'/>
</form>
<p>If you click the following button, it displys at #resp the value returned by the 'name' property.</p>
<button id='btn1'>name</button>
<blockquote id='resp'>#resp</blockquote>
<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
document.getElementById('resp').innerHTML = frm1.name;
});
</script>
eform.noValidate - sets or returns whether the form-data should be validated or not, on submission (true or false). Defaul is true
<h4>Example form.noValidate</h4>
<form id='frm1' action='#' noValidate>
Email: <input type='email' name='email'>
</form>
<p>If you click the following button, it displys at #resp the value 'true', indicating that 'novalidate' is added, then sets it with the value 'false'.<br>
- The second click on the button it displays the new value.</p>
<button id='btn1'>noValidate</button>
<blockquote id='resp'>#resp</blockquote>
<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
document.getElementById('resp').innerHTML = frm1.noValidate;
frm1.noValidate = false;
});
</script>
eform.target - returns or sets the value of the 'target' attribute of <form>.
<h4>Example form.target</h4>
<form id='frm1' action='#' target='iframe_name'>
Text: <input type='text' name='txt1'>
</form>
<p>If you click the following button, it displys at #resp the value of thw 'target' attribute, then sets another value.<br>
- The second click on the button it displays the new value.</p>
<button id='btn1'>target</button>
<blockquote id='resp'>#resp</blockquote>
<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
document.getElementById('resp').innerHTML = frm1.target;
frm1.target ='_blank';
});
</script>
eform.reportValidity() - returns true if data in the form elements are valid (according to defined settings), otherwise False.
<h4>Example form.reportValidity()</h4>
<form id='frm1' action='#'>
Nume: <input type='text' pattern='[A-z0-9]{3,}' required placeholder='Minimum 3 letters / numbers'><br>
Email: <input type='email' required>
</form>
<p> The input fields have the 'required' attribute.<br>
- Click on the button to check the value returned by the reportValidity() method, and it displays the response at #resp.</p>
<button id='btn1'>Send</button>
<blockquote id='resp'>#resp</blockquote>
<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
var res = frm1.reportValidity() ?'Data completed correctly' :'Fill in all the input fields correctly.<br>The Name at least 3 characters, only letters and numbers';
document.getElementById('resp').innerHTML = res;
});
</script>
eform.reset() - resets the form to its initial state (like the reset button).
<h4>Example form.reset()</h4>
<form id='frm1' action='#'>
Text: <input type='text' value='some-val'><br>
Select: <select><option value='gamv'>gamv.eu</option><option selected value='marplo'>marplo.net</option></select>
</form>
<p> Modify the form data, then click the next button.</p>
<button id='btn1'>Rseteaza</button>
<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
frm1.reset();
alert('form resetted');
});
</script>
eform.submit() - submits the form to the server. (like the Submit button).
<h4>Example form.submit()</h4>
<form id='frm1' action='#'>
Text: <input name='txt1' type='text'>
</form>
<p> If the text in the text box has at least 3 characters, clicking on the button will submit the form, if it has less then 3 characters', it display a message.</p>
<button id='btn1'>Trimite</button>
<blockquote id='resp'>#resp</blockquote>
<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
var tval = frm1['txt1'].value;
if(tval.length >2) frm1.submit();
else document.getElementById('resp').innerHTML ='Add minimum 3 characters.';
});
</script>
Events are triggered when certain actions are performed. They can be used to execute some functions when the specified action occurs.
reset - it is triggered when the form is resetted (with the 'reset' button, or the reset() method).
<h4>Example reset</h4>
<form id='frm1' action='#'>
Text: <input type='text' value='some-val'><br>
Select: <select><option value='gamv'>gamv.eu</option><option selected value='marplo'>marplo.net</option></select><br>
<input type='reset' value='Reset'>
</form>
<p> Click on the following button.</p>
<blockquote id='resp'>#resp</blockquote>
<script>
var frm1 = document.getElementById('frm1');
//when #frm1 is resetted
frm1.addEventListener('reset', (ev)=>{
document.getElementById('resp').innerHTML ='The form is resetted.';
});
</script>
submit - it is triggered when the form is submitted (with the 'submit' button).ev.preventDefault() method cancels the automatic submission of the form ('ev' represents the emitted event).
<h4>Example submit</h4>
<form id='frm1' action='#'>
Text: <input type='text' name='txt1' placeholder='Minimum 3 characters'><br>
<input type='submit' value='Submit'>
</form>
<p>If the text field contains less then 3 characters when the form is submited, it displays a message.<br>
Otherwise, it submit the form with the submit() method.</p>
<blockquote id='resp'>#resp</blockquote>
<script>
var frm1 = document.getElementById('frm1');
//when #frm1 is submitted
frm1.addEventListener('submit', (ev)=>{
//stops automatic form submission
ev.preventDefault();
var tval = frm1['txt1'].value;
if(tval.length <3) document.getElementById('resp').innerHTML ='Add minimum 3 characters.';
else frm1.submit();
});
</script>
<ul> <li>http://coursesweb.net/html/</li> <li>http://coursesweb.net/css/</li> </ul>
.some_class {
display: list-item;
}var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net