Есть ли событие 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/

0
harry 13 Мар 2018 в 19:28

2 ответа

Лучший ответ

Почему бы не использовать функцию reset() для ссылки?

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

Рабочий пример:

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

ИЛИ добавьте кнопку сброса внутри тегов формы:

<input type="reset" value="Click here"  />
1
jtheman 13 Мар 2018 в 16:47

Это особенность Pardot "из коробки" - см. Снимок экрана введите описание изображения здесь .

0
Katy H. 18 Апр 2018 в 12:48