时间戳

首页 > 解决方案 > 在 CSS 中使用 Ajax 成功数据显示带有在表单中输入的值的预览

javascript - 在 CSS 中使用 Ajax 成功数据显示带有在表单中输入的值的预览

问题描述

我有一个包含大约 80 个输入文本和选择的表单。

所有输入字段都与 css 值相关。我想在不提交表单的情况下在表单中显示带有新值（ onChange 任何输入值）的预览（可能需要 ajax。带有 php 的 Ajax 可以......我是这个领域的新手）

示例表单代码如下

<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_width}px; /* New Value from input */
}

在Div 预览中：

 <div class="container"> // here above css will be applied
     Rest Info....

 </div>

通过单击浮动按钮单击，可以在表单/模态下方显示预览。

我怎样才能做到这一点？先感谢您...

标签： javascriptphphtmljquerycss

解决方案

你不需要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);
});

推荐阅读