是否有一个 JavaScript 事件，单击该事件后会清除表单中的值。
我正在构建一个在线表单，并且用户是否已经填写了该表单。我有一条消息说不是你(带有他们输入的名字)，例如不是你哈利，单击此处。
文本的“单击此处”部分将是可单击的，如果用户单击此部分，则表单字段中的所有值都将被删除。本质上，一旦单击，它将清除该网页上从上一页的表单中提取的所有数据。
<!DOCTYPE html>
<html>
<head>
<base href="http://go.pardot.com" >
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content=""/>
<link rel="shortcut icon" type="image/png" href="http://go.pardot.com/l/190502/2018-02-22/7lvsrf/190502/46706/Favicon.jpg">
<title>Medical Indemnity Initial Quote Form</title>
<style>
form.form textarea.standard {
height: 70px;
overflow: auto;
padding: 2px;
width: 800px !important;
float: none;
/* border-radius: 5px; */
border: none !Important;
border-bottom: 1px solid !important;
background-color: transparent !important;
color: white !important;
}
form.form p span.description {
color: white !important;
font-size: 30px !important;
position: absolute !important;
top: 1rem !important;
width: 84% !important;
}
#pardot-form input.text {
border-radius: 4px;
width: 50%;
height: 2em;
font-family: Arial,sans-serif;
font-size: 30px;
background-color:transparent;
border:none ;
color:white;
border-bottom:1px solid #555555 !important;
text-align:left !Important;
margin-left:-57rem;
}
@media (max-width: 791px) {
#pardot-form input.text {
border-radius: 4px;
width: 50%;
height: 2em;
font-family: Arial,sans-serif;
font-size: 30px;
background-color:transparent;
border:none ;
color:white;
border-bottom:1px solid #555555 !important;
text-align:left !important;
margin-left: -22rem !important;
}
}
@media (max-width: 1841px) {
#pardot-form input.text {
border-radius: 4px;
width: 50%;
height: 2em;
font-family: Arial,sans-serif;
font-size: 43px;
background-color:transparent;
border:none ;
color:white;
border-bottom:1px solid #555555 !important;
text-align:left !important;
margin-left: -18rem !important;
}
}
@media only screen and (max-width: 690px) and (min-width: 273px) {
#pardot-form input.text {
border-radius: 4px;
width: 50%;
height: 2em;
font-family: Arial,sans-serif;
font-size: 30px;
background-color:transparent;
border:none ;
color:white;
border-bottom:1px solid #555555 !important;
text-align:left !important;
margin-left: -6rem !important;
}
}
form.form {
text-align:center;
}
.container {
background-color:#131313;
}
form.form select {
background-color:#131313;
color:white;
border:none;
border-bottom:1px solid #555555 !important;
width: 50%;
}
form.form p label {
color: #FFFFFF !important;
font-size: 24px;
font-weight: 100;
text-align:center !Important;
}
@media (max-width: 641px) {
form.form p label {
background: none;
padding-left: 0px;
font-size: 10px !important;
}
}
form.form p.required label, form.form span.required label {
background-position: top left;
padding-left: 15px;
text-align: center;
}
form.form p.required label, form.form span.required label {
background-position: -9999px -9999px !important;
text-align:left !important;
}
form.form input.date {
background-color:#131313 !important;
color:white !important;
border:none !important;
border-bottom:1px solid #555555 !important;
width: 50%;
font-size: 30px;
text-align:center;
}
form.form p.submit input {
display: inline-block;
cursor: default;
background-color: #e93b00;
width: auto;
height: 45px;
line-height: 38px;
padding: 5px 20px 0 20px;
font-size: 25px;
border-radius: 4px;
text-align: center;
font-weight: bold;
font-family: Arial,sans-serif;
max-width: 610px;
overflow: hidden;
border:none;
}
@media handheld, screen and (max-width: 995px) {
form.form p.submit input {
display: inline-block;
cursor: default;
color:white !Important;
background-color: #e93b00;
width: 50%;
height: 100px;
line-height: 38px;
padding: 5px 20px 0 20px;
font-size: 70px;
border-radius: 4px;
text-align: center;
font-weight: bold;
font-family: Arial,sans-serif;
max-width: 610px;
overflow: hidden;
border: none;
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
}
@media (max-width: 800px) {
form.form p.required, form.form span.required, form.form label.required {
margin-top:2rem !Important;
}
}
form.form p.submit {
margin: 0rem !important;
padding: 0;
}
form.form .value span {
display:inline-block !Important;
border: 2px solid white;
border-radius: 5px;
background-color: grey;
display: inline-grid;
opacity: 0.50 !important;
}
form.form .pd-radio .value span {
display:inline-block !important;
}
form.form p.required, form.form span.required, form.form label.required {
font-weight: bold;
}
.select {
font-size:30px;
text-align:center;
border-radius:3px solid;
}
form.form p.required, form.form span.required, form.form label.required {
margin-top:10rem;
}
@media (max-width: 420px) {
form.form p.required, form.form span.required, form.form label.required {
margin-top:2rem !important;
}
}
form.form p label {
display: block;
float: none !important;
margin: 0;
padding: 3px 13px 0 0;
text-align: right;
width: 100% !important;
}
a {
color:;#e93b00 !important;
}
a:visited { text-decoration: none; color:#e93b00 !important; }
a:hover { text-decoration: none; color:#e93b00 !important; }
a:focus { text-decoration: none; color:#e93b00 !important; }
a:hover, a:active { text-decoration: none; color:#e93b00 !important; }
.red-color, form.form p.error, form.form span.error, form.form div.error, form.form p.error label {
color: #8b0000;
font-size: 20px !Important;
margin:0 !important;
}
form.form span.value {
display: block;
margin-left:0 Important;
}
form.form .value span {
margin-left:4rem;
border: 2px solid white;
border-radius: 5px;
background-color: grey;
display: inline-grid;
opacity: 0.50 !important;
}
@media (max-width: 1200px) {
form.form .value span {
margin-left:0rem !important;
border: 2px solid white;
border-radius: 5px;
background-color: grey;
display: inline-grid;
opacity: 0.50 !important;
/* width: 43%; */
margin-top: 1rem;
text-align: center;
width: 100%;
margin-left:0rem !Important;
margin-right:0rem !important;
}
}
p.form-field.Marketing_Preferences.pd-checkbox.required.required-custom.error {
margin-left: 0rem !important;
}
p.form-field.Marketing_Preferences.pd-checkbox.required.required-custom.error {
margin-left: 0rem !important;
}
#pardot-form span.error {
clear: left;
display: block;
font-weight: bold;
margin-top: 2px;
padding-left: 166px;
}
input[type="checkbox" i] {
margin: 3px 3px 3px 4px;
float: right;
height: 53px;
width: 56px;
}
form.form p.required label, form.form span.required label {
margin-left:0.5rem !important;
}
@media (max-width: 600px) {
span.value {
width:100% !important;
}
}
@media only screen and (max-width: 600px) and (min-width: 300px) {
form.form span.value {
display:grid !important;
margin-left:0rem !important;
}
}
form.form span.value {
display: block;
margin-left: 0px !Important;
}
form.form p span.description {
form.form p span.description {
clear: both;
display: block;
margin-left: 49px !important;
font-size: 36px !important;
margin-top: 2rem;
}
}
#boxes {
margin-top:1rem !important;
font-size:39px;
}
@media handheld, screen and (max-width: 995px) {
#boxes {
color: white !important;
font-size:43px !Important;
}
}
</style>
<link rel="stylesheet" type="text/css" href="https://go.pardot.com/css/form.css?ver=20121030" />
<script type="text/javascript" src="https://go.pardot.com/js/piUtils.js?ver=20130530"></script><script type="text/javascript">
piAId = '191502';
piCId = '9424';
piHostname = 'pi.pardot.com';
if(!window['pi']) { window['pi'] = {}; } pi = window['pi']; if(!pi['tracker']) { pi['tracker'] = {}; } pi.tracker.pi_form = true;
(function() {
function async_load(){
var s = document.createElement('script'); s.type = 'text/javascript';
s.src = ('https:' == document.location.protocol ? 'https://pi' : 'http://cdn') + '.pardot.com/pd.js';
var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c);
}
if(window.attachEvent) { window.attachEvent('onload', async_load); }
else { window.addEventListener('load', async_load, false); }
})();
</script></head>
<body>
<div class="container">
<form accept-charset="UTF-8" method="post" action="file:///C:/Users/HarryMead/Desktop/New%20folder/Document1.html" class="form" id="pardot-form">
<style type="text/css">
form.form p label { color: #000000; }
form.form p.required label, form.form span.required label { background: none; padding-left: 0px; line-height:1.4; margin-bottom:1rem; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="form-field first_name pd-text required required-custom ">
<label class="field-label" for="190502_34068pi_190502_34068">Please enter your first name so I can start your quote... *</label>
<input type="text" name="190502_34068pi_190502_34068" id="190502_34068pi_190502_34068" value="" class="text" size="30" maxlength="40" onchange="" />
</p>
<div id="error_for_190502_34068pi_190502_34068" style="display:none"></div>
<p class="form-field last_name pd-text required required-custom ">
<label class="field-label" for="190502_34070pi_190502_34070">Thank you, please could you let me know your last name... *</label>
<input type="text" name="190502_34070pi_190502_34070" id="190502_34070pi_190502_34070" value="" class="text" size="30" maxlength="80" onchange="" />
</p>
<div id="error_for_190502_34070pi_190502_34070" style="display:none"></div>
<p class="form-field email pd-text required required-custom ">
<label class="field-label" for="190502_34072pi_190502_34072">Awesome! Please could you provide me your email address so that I can send your quote documents to you... *</label>
<input type="text" name="190502_34072pi_190502_34072" id="190502_34072pi_190502_34072" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 190502, 34072, 162304018);" /><br/><span class="description"> <a target="_self" href="file:///C:/Users/HarryMead/Desktop/New%20folder/Documenterror.html">Click Here</a>.</span>
</p>
<div id="error_for_190502_34072pi_190502_34072" style="display:none"></div>
<p class="form-field phone pd-text required required-custom ">
<label class="field-label" for="190502_34074pi_190502_34074">Do you have a contact number? *</label>
<input type="text" name="190502_34074pi_190502_34074" id="190502_34074pi_190502_34074" value="" class="text" size="30" maxlength="40" onchange="" />
</p>
<div id="error_for_190502_34074pi_190502_34074" style="display:none"></div>
<p class="form-field company pd-text required required-custom ">
<label class="field-label" for="190502_34076pi_190502_34076">Thank you! And what is your business name? If you trade in your own name then that's fine - simply enter your full name *</label>
<input type="text" name="190502_34076pi_190502_34076" id="190502_34076pi_190502_34076" value="" class="text" size="30" maxlength="255" onchange="" />
</p>
<div id="error_for_190502_34076pi_190502_34076" style="display:none"></div>
<p class="form-field Marketing_Preferences pd-checkbox required required-custom">
<label class="field=label" for="190502_34174pi_190502_34174">Occasionally we may wish to contact you to let you know about special offers and products we think may be of interest to you. We will never share your details with other third parties. Please tick if you are happy for us to contact you via the following:</label>
<span class="value"><span><input type="checkbox" name="190502_34174pi_190502_34174_287262" id="190502_34174pi_190502_34174_287262" value="287262" onchange="" /><label class="inline" for="190502_34174pi_190502_34174_287262" id='boxes'>Email</label></span><span><input type="checkbox" name="190502_34174pi_190502_34174_287264" id="190502_34174pi_190502_34174_287264" value="287264" onchange="" /><label class="inline" for="190502_34174pi_190502_34174_287264" id='boxes'>Phone</label></span><span><input type="checkbox" name="190502_34174pi_190502_34174_287266" id="190502_34174pi_190502_34174_287266" value="287266" onchange="" /><label class="inline" for="190502_34174pi_190502_34174_287266" id='boxes'>Text</label></span><span><input type="checkbox" name="190502_34174pi_190502_34174_287268" id="190502_34174pi_190502_34174_287268" value="287268" onchange="" /><label class="inline" for="190502_34174pi_190502_34174_287268" id='boxes'>None</label></span><span><input type="checkbox" name="190502_34174pi_190502_34174_287270" id="190502_34174pi_190502_34174_287270" value="287270" onchange="" /><label class="inline" for="190502_34174pi_190502_34174_287270" id='boxes'>All</label></span></span>
</p>
<div id="error_for_190502_34174pi_190502_34174" style="display:none"></div>
<p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;">
<label for="pi_extra_field">Comments</label>
<input type="text" name="pi_extra_field" id="pi_extra_field"/>
</p>
<!-- forces IE5-8 to correctly submit UTF8 content -->
<input name="_utf8" type="hidden" value="☃" />
<p class="submit">
<input type="submit" accesskey="s" value="Next" />
</p>
<script type="text/javascript">
//<![CDATA[
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if(anchor.getAttribute("href")&&!anchor.getAttribute("target")) {
anchor.target = "_top";
}
}
//]]>
</script>
<input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="" /></form>
<script type="text/javascript">(function(){ pardot.$(document).ready(function(){ (function() {
var $ = window.pardot.$;
window.pardot.FormDependencyMap = [];
$('.form-field-master input, .form-field-master select').each(function(index, input) {
$(input).on('change', window.piAjax.checkForDependentField);
window.piAjax.checkForDependentField.call(input);
});
})(); });})();</script>
<script>
var $inputs = $("input"); // get all inputs first
$inputs.keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
var index = $inputs.index(this) + 1; // get next index of input
if (index < $inputs.length) { // check if not last input
$inputs.eq(index).get(0).focus(); // focus next
}
}
});
</script>
</div>
</body>
</html>最佳答案
为什么不对链接使用reset()函数？
<a href="#" onclick='document.getElementById("pardot-form").reset();'>Click Here</a>
工作示例:
https://jsfiddle.net/32hesfre/6/
或者，在表单标签内添加重置按钮:
<input type="reset" value="Click here" />
关于javascript - 单击文本时重置表单字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49261227/