在文本单击时重置表单字段

时间：2018-03-13 16:28:01

标签： javascript html

是否有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="&#9731;" />
		
		<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>

https://jsfiddle.net/32hesfre/

2 个答案:

答案 0 :(得分：1)

为什么不使用reset()功能作为链接？

<a href="#" onclick='document.getElementById("pardot-form").reset();'>Click Here</a>

工作示例：

https://jsfiddle.net/32hesfre/6/

或者，在表单标记内添加一个重置按钮：

<input type="reset" value="Click here"  />

答案 1 :(得分：0)

这是Pardot中的“​​开箱即用”功能 - 请参阅屏幕抓取enter image description here。

相关问题
最新问题