javascript - 创建一个独特的 HTML 表单
问题描述
我正在尝试使用 Javascript 创建一个 HTML 表单,该表单复制每个字段的内容并将其粘贴到单个文本框中。
-------------- 提供的 HTML 代码 --------
<form id="callflow" class="appnitro" method="post" action="">
<div class="form_description">
<h2>Callflow</h2>
<p>Flowsheet to take notes and ensure you meet all QA elements on every call.</p>
</div>
<ul >
<li id="li_1" >
<label class="description" for="cust_name">Greet Customer </label> <br>
Thank you for calling ___________ My Name is David to Whom do I have the Pleasure of Speaking with today? <br><br>
<label class="description" for="cust_name"> Customer Name</label>
<div>
<input id="cust_name" name="cust_name" class="element text medium" type="text" maxlength="255" value=""/>
<br>
</div>
<label class="description" for="call_reason">Reason for the call. </label>
<div>
<textarea id="call_reason" name="call_reason" class="element textarea medium"></textarea>
</div>
</li>
<li id = "li_2" >
<label class="description" for="element_2">Provide Assurance Statement </label>
<p>____________ I want to personally apologize that your having to deal with this if this happened to me I would be fustrated as well.</p> <br>
</li>
<li id = "li_3" >
<label class="description" for="element_3">Provide Promoter Statement </label>
<p> This is not the experience we want our customers to have here at ______________. I would be more than happy to take care this for you. </p><br>
</li>
<li id="li_4" >
<label class="description" for="element_4">Ask Probing Questions:</label>
Why do you want to return [insert item]? <br>
Can I ask why your seeking to cancel your order? <br>
Was this item for an event? <br>
Could you describe the damage to me?
<br>
<br>
</li>
<li id = "li_5">
<label class="description" for="tailored_solution"> Propose Solution </label>
<p>D. Discount to keep. | R. Replacement Parts | U. Unit | M. Money Back</p>
<br>
<div>
<textarea id="tailored_solution" name="tailored_solution" class="element textarea medium"></textarea>
</div>
<br>
<br>
<label class="description" for="tailored_solution"> WRAP Call </label>
<p> It's going to take just a brief moment here for me to finish up processing this request for you. You wont hear anything but rest assured I am still here just holler if you need anything. </p>
</li>
<li id="li_6" >
<label class="description" for="set_expectations">Recap & Set Expectations. </label>
<span>
<input id="set_expectations_discount" name="set_expectations_discount" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="set_expectations_discount">Discount Expectations</label>
<input id="set_expectations_replacement" name="set_expectations_replacement" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="set_expectations_replacement">Replacement Expectations</label>
<input id="set_expectations_refund" name="set_expectations_refund" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="set_expectations_refund">Refund Expectations</label>
<input id="set_expectations_return" name="set_expectations_return" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="set_expectations_return">Return Expectations</label>
</span>
</li>
<li id="li_7" >
<label class="description" for="close">Check for Additional Needs Addressing any Remaining Questions. </label>
<span>
<input id="close_1" name="close_1" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="close_1">Yes</label>
<input id="close_2" name="close_2" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="close_2">No</label>
</span>
</li>
<li id = "li_8">
<label class="description" for="notes"> Generate Notes </label>
<input type="checkbox" name="notes_gen" onclick="FillNotes(this.form)">
<em>Check this box to generate notes.</em>
<div>
<textarea id="notes" name="notes" class="element textarea medium"></textarea>
</div>
<li class="buttons">
<input type="hidden" name="form_id" value="6865" />
<input id="clearForm" class="button_text" type="reset" name="Clear" value="Clear" />
</li>
</ul>
</form>
--------------- 提供的 Javascript 代码 ------
function FillNotes(f) {
if(f.notes.checked == true) {
f.notes.value = f.cust_name.value;
f.notes.value = f.call_reason.value;
f.notes.value = f.tailored_solution.value;
f.notes.value = f.set_expectations.value;
f.notes.value = f.set_expectations_discount.value;
f.notes.value = f.set_expectations_refund.value;
f.notes.value = f.set_expectations_replacement.value;
f.notes.value = f.set_expectations_return.value;
f.notes.value = f.close.value;
f.notes.value = f.close_1.value;
f.notes.value = f.close_2.value;
}
}
}
现在我希望它复制每个复选框和文本区域的内容,除了我希望它粘贴到的最后一个文本框,并在每个条目之间添加一个分隔符,如 | 或者 /
首先我做错了什么第二我的JS充其量是低于标准的。有人愿意帮助我吗?
PS 提交按钮已被替换为重置,因为这旨在替代工作中的“记笔记”,因此我们可以删除对代理计算机上粘滞便笺的访问。
解决方案
$("#copy").click(function() {
$('#callflow *').filter(':input').each(function() {
let elem = $("#notes");
let thisElem = $(this)[0];
if (thisElem.value && (thisElem.type === "text" || thisElem.type === "textarea")) {
elem.val(elem.val() + "|" + thisElem.value);
} else if (thisElem.type === "checkbox" && thisElem.checked) {
elem.val(elem.val() + "|" + thisElem.nextElementSibling.innerHTML);
}
});
});
推荐阅读
- go - 子对象未使用 golang 解析 graphql
- c# - 实体框架核心生成奇怪的sql
- ruby-on-rails - 在 Rails 应用程序中使用 Simple Scheduler Gem 调度任务
- wcf - 调整 WCF IIS 服务参数,无需重启服务或 IIS
- tridion - Tridion 2013 SP1 HR1 中的内容取消发布问题
- sql-server - SQL Server 2016 奇怪的行为 - OR 条件给出 0 行但 AND 条件给出了一些行
- java - 没有元素硒的Sendkeys java
- javascript - 在 for 循环中等待事件函数
- node.js - 如何在开发人员模式下为 Javascript (node.js) 运行 Azure Application Insights
- django-cms - 如何从 django CMS 菜单中删除 aldryn-newsblog 文章