在 CSS 中使用 Ajax 成功数据显示带有在表单中输入的值的预览
Posted
技术标签:
【中文标题】在 CSS 中使用 Ajax 成功数据显示带有在表单中输入的值的预览【英文标题】:Using Ajax Success Data in CSS to show Preview with values entered in the form 【发布时间】:2021-09-17 04:25:15 【问题描述】:我有一个包含大约 80 个输入文本和选择的表单。
所有输入字段都与 css 值相关。我想在表单中显示带有新值的预览(onChange 任何输入值)不提交表单(可能需要 ajax。Ajax 和 php 可以。 ..我是这个领域的新手)
示例表单代码如下
<form id="myform">
<label>Container Background Color : </label>
<input type="text" name="container_bgcolor" value=""> // Using jscolor.js with readonly input to select color in html color code format
<label>Container Color : </label>
<input type="text" name="container_color" value="">
<label>Container Width : </label>
<select name="container_width">
<option value="">Select Width </option>
<option value="480">480 Px </option>
<option value="500">500 Px </option>
<option value="550">550 Px </option>
</select>
<input type="submit" value="Submit Form">
</form>
现在我想显示带有输入字段值的预览。 (期待 OnChange 输入值)
CSS 文件示例:例如mystyle.css / mystyle.php (with header("Content-type: text/css; charset: UTF-8");)
.container
background-color: container_bgcolor; /* New Value from input */
color: container_color; /* New Value from input */
padding: 10px; /* Fixed Value */
margin : auto; /* Fixed Value */
width : container_widthpx; /* New Value from input */
在Div预览中:
<div class="container"> // here above css will be applied
Rest Info....
</div>
通过单击浮动按钮单击,可以在表单/模态下方显示预览。
我怎样才能做到这一点?提前谢谢你...
【问题讨论】:
您说您希望显示预览 - 但预览究竟是什么? 我正在尝试为网站创建年龄验证。我想授予管理员权限以更改年龄验证弹出框的样式/字体颜色等 【参考方案1】:你不需要 ajax,你可以用 javascript 做到这一点。我会用 jQuery。
您的 HTML,我在选择和输入中添加了 ID
<form id="myform">
<label>Container Background Color : </label>
<input id="container_bgcolor" type="text" name="container_bgcolor" value="">
<label>Container Color : </label>
<input id="container_color" type="text" name="container_color" value="">
<label>Container Width : </label>
<select name="container_width">
<option value="">Select Width </option>
<option value="480">480 Px </option>
<option value="500">500 Px </option>
<option value="550">550 Px </option>
</select>
<input type="submit" value="Submit Form">
</form>
jQuery:
$('#container_bgcolor').change(function()
var container_bgcolor = $('#container_bgcolor').val();
$('<your element>').css('background-color', container_bgcolor);
);
【讨论】:
我在表单中有大约 80 个输入字段。 (上面是示例)所以我们可以使用 (#myform).serialize();为了它? 是的,您可以,如果需要,您可以使其更具动态性。【参考方案2】:要实现您的要求,只需在所有控制.container
的 CSS 属性的 input
元素上放置一个 input
事件处理程序。
要干掉代码,您可以在它们上放置一个data
属性来控制它们影响的特定 CSS 属性,以便您可以为所有表单控件使用单个事件处理程序
let $container = $('.container');
$('.css-property').on('input change', e =>
let $target = $(e.target);
$container.css($target.data('css-property-name'), $target.val());
);
label display: block;
/* default values */
.container
background-color: #FFFFFF;
color: #000000;
width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.4.5/jscolor.min.js" integrity="sha512-YxdM5kmpjM5ap4Q437qwxlKzBgJApGNw+zmchVHSNs3LgSoLhQIIUNNrR5SmKIpoQ18mp4y+aDAo9m/zBQ408g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<form id="myform">
<label>
Container Background Color:
<input type="text" class="css-property" name="container_bgcolor" value="" data-jscolor=" value: '#FFFFFF' " data-css-property-name="background-color" />
</label>
<label>
Container Color:
<input type="text" class="css-property" name="container_color" value="" data-jscolor=" value: '#000000' " data-css-property-name="color" />
</label>
<label>
Container Width:
<select name="container_width" class="css-property" data-css-property-name="width" >
<option value="">Select Width </option>
<option value="480px">480px</option>
<option value="500px">500px</option>
<option value="550px">550px</option>
</select>
</label>
<input type="submit" value="Submit Form">
</form>
<div class="container">
Rest Info....
</div>
【讨论】:
好的..thnx 解决方案。我会试试的。还有一个查询,我在表单中有大约 80 个输入字段。我们可以用更少的工作来处理所有 80 个输入值吗?或者我们可以将所有值发送到 mycss.php 文件并以预先设计的 css 格式回显每个值与这些新值吗? 我不太清楚你的意思,但是你可以使用 AJAX 将所有表单值发送到服务器端,你可以在那里做任何你需要的事情。 完全正确...但是我被困在如何发送所有值并在 mystyle.php 文件中重现它们... 这与您上面提出的问题完全不同,因此我建议您提出一个新问题。 也就是说,该方法与此答案中的“方法 1”一样简单:***.com/a/14217926/519413以上是关于在 CSS 中使用 Ajax 成功数据显示带有在表单中输入的值的预览的主要内容,如果未能解决你的问题,请参考以下文章
使用ajax jQuery for-each函数在表中追加多个数据