admin管理员组

文章数量:1326282

I've developed a html contact form. How do I capture the data which is entered in the form using JavaScript? (I can't use jQuery)? I think I need use document.GetElementById(), but how? And do I need to use an event such as onBlur to capture it when a user leaves the field, radio button, or checkbox?

/*Borders of fields for validation and indication*/
input:invalid{
    box-shadow: 0 0 2px .5px red;
}
textarea:invalid{
    box-shadow: 0 0 2px .5px red;
}
/*Spacing around fields this is in place of <br>*/
label{
    display: block; 
    padding-top: 5px
}
<!DOCTYPE html>
    <html>
    <head>
      <title>Contact Me</title>
      <link rel="stylesheet" type="text/css" href="contactform_Lab8.css">
    </head>
    
    <body>
    
    <form id="contactus">
    	<fieldset>
    		<label for="name">Name:</label>
    			<input id="name" type="text" name="name" autofocus required>
    		<label for="email">Email:</label>
    			<input id="email" type="email" name="email" required>
    		<label for="phone">Phone:</label>
    			<input id="phone" type="tel" name="phone" required>
    		<label for="status">Status:			
    			<select id="status" name="status" required>
    				<option value="client">Client</option>
    				<option value="partner">Partner</option>
    				<option value="vendor">Vendor</option>
    			</select>
    		</label>
    		<label for="subscribe">
    			<input id="subscribe" type="checkbox" name="subscribe" value="check" checked> 
    		Send me your newsletter</label>
    		<label for="sales">
    			<label for="support">
    				<input id="slsSupport" type="radio" name="slsSupport" value="sales" checked>Sales
    				<input id="slsSupport" type="radio" name="slsSupport" value="support">Support
    			</label>
    		</label>
    		<label for="msg">Message:</label>
    			<textarea id="msg" name="msg" rows="10" cols="30" required></textarea>
    		</fieldset>
    		<fieldset>
    		<button type="submit">Send</button>
    		<button type="reset">Reset</button>
    		</fieldset>
    </form>
    <script src="contactform_Lab8.js"></script>
    
    </body>
    </html> 

I've developed a html contact form. How do I capture the data which is entered in the form using JavaScript? (I can't use jQuery)? I think I need use document.GetElementById(), but how? And do I need to use an event such as onBlur to capture it when a user leaves the field, radio button, or checkbox?

/*Borders of fields for validation and indication*/
input:invalid{
    box-shadow: 0 0 2px .5px red;
}
textarea:invalid{
    box-shadow: 0 0 2px .5px red;
}
/*Spacing around fields this is in place of <br>*/
label{
    display: block; 
    padding-top: 5px
}
<!DOCTYPE html>
    <html>
    <head>
      <title>Contact Me</title>
      <link rel="stylesheet" type="text/css" href="contactform_Lab8.css">
    </head>
    
    <body>
    
    <form id="contactus">
    	<fieldset>
    		<label for="name">Name:</label>
    			<input id="name" type="text" name="name" autofocus required>
    		<label for="email">Email:</label>
    			<input id="email" type="email" name="email" required>
    		<label for="phone">Phone:</label>
    			<input id="phone" type="tel" name="phone" required>
    		<label for="status">Status:			
    			<select id="status" name="status" required>
    				<option value="client">Client</option>
    				<option value="partner">Partner</option>
    				<option value="vendor">Vendor</option>
    			</select>
    		</label>
    		<label for="subscribe">
    			<input id="subscribe" type="checkbox" name="subscribe" value="check" checked> 
    		Send me your newsletter</label>
    		<label for="sales">
    			<label for="support">
    				<input id="slsSupport" type="radio" name="slsSupport" value="sales" checked>Sales
    				<input id="slsSupport" type="radio" name="slsSupport" value="support">Support
    			</label>
    		</label>
    		<label for="msg">Message:</label>
    			<textarea id="msg" name="msg" rows="10" cols="30" required></textarea>
    		</fieldset>
    		<fieldset>
    		<button type="submit">Send</button>
    		<button type="reset">Reset</button>
    		</fieldset>
    </form>
    <script src="contactform_Lab8.js"></script>
    
    </body>
    </html> 

Share Improve this question edited Mar 28, 2015 at 0:19 TylerH 21.1k77 gold badges79 silver badges112 bronze badges asked Mar 27, 2015 at 23:45 Bigboy6Bigboy6 1092 gold badges3 silver badges13 bronze badges 12
  • 1 Is this what you're looking for? - stackoverflow./questions/11563638/… – wavemode Commented Mar 27, 2015 at 23:50
  • Always Google before asking :) – Timmah Commented Mar 27, 2015 at 23:50
  • @wavemode That's the part he knows about. What he doesn't understand is how to run it with an event handler. – Barmar Commented Mar 27, 2015 at 23:51
  • Rather than using getelementById, look into jQuery, which will give better cross-browser patibililty. To get the idea of using jQuery to get a value, look at .val() ,which includes example code. You can also easily handle the events with jQuery. – Reg Edit Commented Mar 27, 2015 at 23:52
  • 1 For a better UI, I would go for change and input events instead of blur etc. – Roko C. Buljan Commented Mar 27, 2015 at 23:59
 |  Show 7 more ments

2 Answers 2

Reset to default 4

it is just the value attribute

//the specific input
var inputID = document.getElementById('inputID');

//add a listener to the object for blur
inputID.addEventListener('blur',function(){
    //the value attribute is the way to get what the user entered.
    console.log(inputID.value);
});

EDIT

For a more re-usable approach. Give all of the elements in the form the same class that you want to add the same blur listener to. Then loop through all of those elements and add the listener and handler.

var inputClass = document.getElementsByClassName('formInput');

for (var i = 0, ii = inputClass.length; i < ii ; i++) {
   inputClass[i].addEventListener('blur', doSomething);
}

function doSomething() {
    var inputField = this;
    console.log(inputField.value);
}

example: http://codepen.io/ScavaJripter/pen/33d9336b618f3162a9dfb16379ef4fcc/

There are many ways to do this depending on what you want. Heres an example of A. alerting the value of the name field onblur B. Preventing the form from submitting unless the name is charles (final validation)

window.onload = function ()
{
  var name =document.getElementById("name");
  name.addEventListener("blur", alertVal);
  function alertVal(){
  alert(name.value);
  }
  var form = document.getElementById("contactus");
  form.addEventListener("submit",function(e){
  e.preventDefault();
  if(name.value == "charles"){
    alert("Success submitting form");
    form.submit();
    }
    else{
    alert("name must be charles");
    }
  });
 
}
/*Borders of fields for validation and indication*/
input:invalid{
    box-shadow: 0 0 2px .5px red;
}
textarea:invalid{
    box-shadow: 0 0 2px .5px red;
}
/*Spacing around fields this is in place of <br>*/
label{display: block; padding-top: 5px}
<!DOCTYPE html>
<html>
<head>
  <title>Contact Me</title>
  <link rel="stylesheet" type="text/css" href="contactform_Lab8.css">
</head>

<body>

<form id="contactus">
    <fieldset>
        <label for="name">Name:</label>
            <input id="name" type="text" name="name" id="name" autofocus required>
        <label for="email">Email:</label>
            <input id="email" type="email" name="email" required>
        <label for="phone">Phone:</label>
            <input id="phone" type="tel" name="phone" required>
        <label for="status">Status:         
            <select id="status" name="status" required>
                <option value="client">Client</option>
                <option value="partner">Partner</option>
                <option value="vendor">Vendor</option>
            </select>
        </label>
        <label for="subscribe">
            <input id="subscribe" type="checkbox" name="subscribe" value="check" checked> 
        Send me your newsletter</label>
        <label for="sales">
            <label for="support">
                <input id="slsSupport" type="radio" name="slsSupport" value="sales" checked>Sales
                <input id="slsSupport" type="radio" name="slsSupport" value="support">Support
            </label>
        </label>
        <label for="msg">Message:</label>
            <textarea id="msg" name="msg" rows="10" cols="30" required></textarea>
        </fieldset>
        <fieldset>
        <button type="submit">Send</button>
        <button type="reset">Reset</button>
        </fieldset>
</form>
<script type="contactform_Lab8.js"></script>

</body>

</html>

本文标签: javascriptHow do I capture data entered into the field of an HTML formStack Overflow