javascript - 单击文本时重置表单字段-6ren

javascript - 单击文本时重置表单字段

转载作者：行者123 更新时间：2023-12-03 02:18:28

是否有一个 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/

最佳答案

为什么不对链接使用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/

文章推荐： c# - 无法在Chrome中使用接受范围:字节复制Ogg音频

文章推荐： javascript - 当 d3 中的点发生变化时更新多边形

postgresql - 组内级联的Postgres交叉表(文本，文本)
表架构 DROP TABLE bla; CREATE TABLE bla (id INTEGER, city INTEGER, year_ INTEGER, month_ INTEGER, val I
javascript - 按一定顺序分割字符串。例如文本/0000/文本/文本
我需要拆分字符串/或从具有以下结构的字符串中获取更容易的子字符串。字符串将来自 window.location.pathname 或 window.location.href，看起来像 text/n
ios - 将对象添加到数组时更新 textView 文本，而不覆盖前一个对象的 textView 文本
每当将对象添加到数组中时，我都会尝试更新 TextView ，并在 TextView 中显示该文本，如下所示: "object 1" "object 2" 问题是，每次将新对象添加到数组时，它都会覆盖
java - Html 2 文本 - 删除 "hidden"文本
我目前正在寻找使用 Java 读取网站可见文本并将其存储为纯文本字符串的方法。换句话说，我想转换成这样: Hello stupid World进入“ Hello World ” 或者类似的东西 Un
php - Pear Mail，如何以UTF-8发送纯文本/文本+文本/html
我正在尝试以文本和 HTML 格式发送电子邮件，但无法正确发送正确的 header 。特别是，我想设置 Content-Type header ，但我找不到如何为 html 和文本部分单独设置它。这
c# - 从资源 wpf 绑定(bind)文本 block 文本
我尝试了上面的代码，但我无法绑定(bind)文本，我怎样才能将资源内部文本 bloc
unity3d - Unity 网络播放器因 UI 文本(新 Canvas 文本)而崩溃
我刚刚完成了 Space Shooter 教程，由于没有 GUIText 对象，所以我创建了 UI.Text 对象并进行了相应的编码。它在统一播放器中有效，但在构建 Web 应用程序后无效。我花了一段
ios - 为什么 UITextField 文本 setter 无法识别 [UIView 文本] 选择器
我有这个代码: - (IBAction)setButtonPressed:(id)sender { NSUserDefaults *sharedDefaults = [[NSUserDefau
java - 在 JLabel 图标上添加 JLabel 文本。使用相同的 JLabel 文本
抱歉标题含糊不清，但我想不出我想在标题中做什么。无论如何，对于图像上的文本，我使用了 JLabel 文本并将其添加到图标中。 JLabel icon = new JLabel(new Imag
javascript - "The stylesheet was not loaded because its MIME type, "文本/html "is not "文本/css"
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topi
html - 是否可以使用 CSS 定位 HTML(文本)？ - 它显示为(文本)作为 ID
我在将 Twitter 嵌入到我从 HTML 5 转换的 wordpress 运行网站时遇到问题。我遇到的问题是推文不是我的自定义字体... 这是我无法使用任何 css 定位的 HTML 代码，我正
java - 将 logger.debug ("message: "+ 文本)转换为 logger.debug(消息 : {}", 文本)
我正在尝试找到解决由于使用以下形式的代码而导致的冗余字符串连接问题的最佳方法: logger.debug("Entering loop, arg is: " + arg) // @1 在大多数情况下，
java分组正则表达式无法匹配字符串+文本
我写了这个测试 @Test public void removeRequestTextFromRouteError() throws Exception { String input = "F
java正则表达式匹配&[文本]
我目前正在创建一个正则表达式来拆分所有匹配以下格式的字符串:&[文本]，并且需要获取文本。字符串可能类似于:something &[text] &[text] everything &[text] 等
CSS变形词/文本
有没有办法将标题文本从一个词变形为另一个词，同时保留两个词中使用的字母？我看过的许多 css 文本动画大多是视觉的，很少有旋转整个单词的。我想要做的是从一个词过渡，例如“BEACH”到“CHANGE
学习python中matplotlib绘图设置坐标轴刻度、文本
总结matplotlib绘图如何设置坐标轴刻度大小和刻度。上代码： ?
容器内的 Flutter 文本
我在容器 (1) 中创建了容器 (2)。你能帮忙如何向容器(1)添加文本吗？下面是我的代码 return Scaffold( body: Padding( padding: c
具有渐变和渐变轮廓的 CSS 文本
我似乎找不到任何人或任何人这样做过。我试图限制我们使用的图像数量，并想创建一个带有渐变作为其“颜色”的文本，并在其周围设置渐变轮廓/描边到目前为止，我还没有看到任何将两者结合在一起的东西。我可以自
从视频游戏截图中提取 Python 文本
我正在为视频游戏暗黑破坏神 2 使用 discord.py 构建一个不和谐机器人。其中一项功能要求机器人从暗黑破坏神 2 屏幕截图中提取项目的名称和属性。我目前正在为此使用 pytesseract，但
在ggplot2中旋转 strip 文本
我很难弄清楚如何旋转 strip.text theme 中的属性来自 ggplot2 .我使用的是 R 版本 3.4.2 和 ggplot2 版本 2.2.1。以下是 MWE 的数据。 > dput

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 单击文本时重置表单字段