Html 多输入类型颜色，将选择的颜色插入数据库答案

【问题标题】：Html multipe input type color ,inserting the selected colors to databaseHtml 多输入类型颜色，将选择的颜色插入数据库
【发布时间】：2015-07-03 20:28:24
【问题描述】：

我正在使用输入类型颜色来选择颜色来自定义我的网站。我正在将选定的颜色插入数据库并将其检索回来并应用于站点，这对于单一输入类型的颜色来说效果很好。现在我有一个输入类型颜色和一个按钮，当我选择颜色并单击按钮时，区域名称和颜色插入到数据库中，如区域名称 = 页脚和颜色 = #CCC，现在我的问题是我想要对所有内容、标题、左侧边栏和右侧边栏执行此操作。我可以使用具有多种输入类型的多个按钮，但这似乎不专业，我想要多种输入类型的颜色和一个按钮。任何帮助，将不胜感激。提前致谢。

    /**The working code for a single input type color with a button***/

  Choose Colour: <input class="color"  name="color1" id="color1"  placeholder="click to choose colour">

  <input type="submit" onclick="changebodycolour('color1')" value="Apply" />

 /**My function to insert the value to database table**/

   function changebodycolour(c1)
   {
var selectedcolur = document.getElementById(c1).value;
//alert(selectedcolur);
            $("#color1").empty();
            $("#loginScreen").empty();
                $.ajax({

                url: ""+pat+"changecolour.php?ipp="+encodeURIComponent(selectedcolur),

                type: 'POST',
                beforeSend: function()
                {
                $('body').css({ opacity: 0.5 });
                $("#loading_img").show();

                },
                success: function(data)
                {
                    $("#loading_img").hide();
                    $("#loginScreen").fadeIn('slow').append(data).delay(1300).fadeOut('slow');
                    $('body').css({ opacity: 2 });
                }       
                });//end ajax call

         }


    /**And this is php code**/
   $sql = "Insert into gr_colours values('','".$_GET['ipp']."','body')";
    $db->insert($sql);

【问题讨论】：

所以你想用一个<input>来设置多个元素的颜色？
为此，您需要多个数据库列。以及多个 URL 参数以及具有不同 id 的多个输入框。如果您要创建一个 JSFiddle，我想进行编辑，但从头开始编写太长了。（它甚至不是有效的 html - 甚至没有包含在 <script> 标签中）
@hungerstar ，我想要多个只有一个提交按钮
@Ronnie 我已经为整个站点编写了代码。但问题是每个都有一个按钮。我只想要一个按钮用于所有。我在每个区域的数据库列中都有......页眉，页脚，主要区域......我的问题是只用一个提交按钮

标签： javascript php jquery html ajax

【解决方案1】：

您可以根据需要添加任意数量的输入。当您提交表单时，每个输入名称和值都将与 POST 数据一起提交。从那里，您可以将值添加到 db insert 脚本中。

添加另一个输入并将其命名为 color2 或 headerColor 以使其更具可读性。

然后添加javascript：

var forms = document.forms['NameOfYourForm'];
var headerColor = forms['headerColor'].value;

获得每种颜色的所有变量后，将其全部添加到该 ajax 调用中

对于php部分：

$color1=$_GET['ipp'];
$headerColor= $_GET['headerColor'];
$bodyColor=$_GET['bodyColor'];
... and so on for each form input


$sql = "Insert into gr_colours values('','".$color1."','".$headerColor."','".$bodyColor."'etc...)";

【讨论】：

在php代码中是否有for each循环
感谢您的回复，我会执行此操作并会看到

【解决方案2】：

我的 PHP 和 MySQL 有点生锈，请见谅。

您的表单只需要一个提交按钮。每个输入都不需要一个。没什么神奇的，只是基本的 HTML 表单。

<form name="form" method="post">

    <label>Header Color</label>
    <input type="text" name="header-color" value="">

    <label>Content Color</label>
    <input type="text" name="content-color" value="">

    <label>Left Sidebar Color</label>
    <input type="text" name="left-sidebar-color" value="">

    <label>Right Sidebar Color</label>
    <input type="text" name="right-sidebar-color" value="">

    <input type="submit" name="submit" value="submit">

</form>

然后您的 PHP 将检查表单提交以及输入值的验证/清理（为简洁起见，不包括在内），然后构建并运行您的数据库查询。

<?php

if ( $_POST['submit'] ) {

    $header_color        = $_POST['header-color']; // validate/sanitize first
    $content_color       = $_POST['content-color']; // validate/sanitize first
    $left_sidebar_color  = $_POST['left-sidebar-color']; // validate/sanitize first
    $right_sidebar_color = $_POST['right-sidebar-color']; // validate/sanitize first

    $query = sprintf(
        "INSERT INTO table (header_color, content_color, left_sidebar_color, right_sidebar_color) VALUES( %s, %s, %s, %s )",
        $header_color,
        $content_color,
        $left_sidebar_color,
        $right_sidebar_color
    );

// run query

}

?>

【讨论】：

【解决方案3】：

<?php /* Try this code  color.php */ ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div>
Footer:<br> <input type="color" name="footer" class="color" >
<br><br>
Header:<br> <input type="color" name="header" class="color" >
<br><br>    
Aside:<br> <input type="color" name="aside" class="color" >
<br><br>    
<button id="submit">submit</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    jQuery(document).ready(function($) {
        $('#submit').click(function(){
            var obj={};
        $('.color').each(function(e){
            obj[$(this).attr('name')]=$(this).val();


        });

        $.ajax({
            url: 'changecolor.php',
            type: 'POST',
        //  dataType: 'json',
            data: obj,
        })
        .done(function(data) {
            console.log(data);
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });

                });
            });
</script>
</body>
</html>
<?php /* changecolor.php */ ?>
<?php
if(isset($_POST)){
    $key=array_keys($_POST);
    $value=array_values($_POST);
    $fields="`".implode("`,`", $key)."`";
    $values="'".implode("','", $value)."'";
    $sql="INSERT INTO `table_name` ({$fields}) VALUES ({$values})";
    echo $sql;

}
?>

【讨论】：

【解决方案4】：

        //You can do like this just serialize your form? Your index or colour.php


     <form method="post" name="colourform" class="colourform">

     Footer:<br> <input type="color" name="footer" class="color" >

     Header: <input type="color" name="header" class="color" >

     Aside:<input type="color" name="aside" class="color" >

    <input type="button" id="mysubmit" value="Apply" />
    </form>

  <script type="text/javascript">
  $(document).ready(function(e) {

  $("#mysubmit").click(function(e) {
  var serialize = $('.colourform').serialize(); 

    $.ajax({  
    type : 'POST',
     url: "changecolour.php",
     data : serialize,
     dataType:"json",

    beforeSend: function()
                {


                },
                success: function(data)
                {




                }   

                }); 
            });
          });


            </script>



     /**** Now this your changecolour.php*****/


     <?php

        $footer= $_POST['footer'];
        $header= $_POST['header'];
         $aside= $_POST['aside'];

     $sql = "Insert into colours  values('','".$footer."','".$header."','".$aside."')";
     $db->insert($sql);


     ?>

【讨论】：