捕获表单元素的值以进行打印

时间:2012-09-19 09:31:56

标签: jquery printing

我非常有能力使用JQuery,并且通常可以让大多数事情变得有点麻烦。我试过谷歌搜索这个问题,但要么我正在搜索错误的条款,要么没有公布的解决方案。

在为订单表单页面准备print.css文件时,我被问到是否可以删除文本INPUTS并打印出它们的值,同样是一个包含地址的SELECT菜单。

在研究时,我确实遇到过.val()方法 - 现在称为.fieldValue() - 和.serializeArray()所以我想我知道如何提取值,而不是如何将其打印到位形式元素。

要明确:
例如,SELECT菜单显示默认传递地址的第一行。 对于打印输出,我希望它实际显示整个地址,跨多行,而不是SELECT菜单。

我在下面有这个解决方案,它允许我捕获值,但我不知道如何插入它们来代替表单元素: Printing an HTML form using jQuery

感谢您的帮助!


EDIT 捕获的值只应插入打印输出中,而不是替换html中的表单元素。

1 个答案:

答案 0 :(得分:1)

以下是作为jsfiddle的基本解决方案:http://jsfiddle.net/2mBSS/15/

基本上:当某些事情发生时(比如单击一个按钮),循环相应的元素并使用.replaceWith() jQuery函数将它们替换为它们的值...... .val()。如您所见,这适用于<select>以及<input>元素。

您当然可以创建一个更复杂的HTML元素来替换输入,例如"<p>" + val + "</p>"

请注意,这将完全删除表单输入字段,直到重新加载页面。这可能无关紧要(例如,如果您在新标签中打开打印页面)或者它可能会破坏您网站的设计......我个人更喜欢使用打印CSS工作表来设置打印页面的样式,例如删除输入框上的边框。但是,如果您需要在<select>元素中提取所选选项的值,这可能无法正常工作。

如果你想保持页面完整,我建议你嵌入一些隐藏的元素来保存文本进行打印,并在点击打印按钮时将输入表单的值复制到它们...然后在你的打印CSS中您隐藏所有输入,而是显示支持元素(例如<p><span>)。