Html multipe输入类型颜色,将所选颜色插入数据库

时间:2015-04-25 04:19:02

标签: javascript php jquery html ajax

我使用输入类型颜色来选择颜色来自定义我的网站。我将所选颜色插入数据库并将其检索回并应用于网站,这对于单个输入类型颜色很有用。现在我有一个输入类型的颜色和一个按钮,当我选择颜色,然后单击按钮然后,区域名称和颜色插入数据库,如区域名称=页脚和颜色= #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);

4 个答案:

答案 0 :(得分:4)

Option Explicit

Dim FSO
Set FSO = CreateObject("Scripting.FileSystemObject")

Dim InputFile1
InputFile1 = ("C:\Testing\File1.txt")

Dim InputFile2
InputFile2 = ("C:\Testing\File2.txt")

Dim InputFile3
InputFile3 = ("C:\Testing\File3.txt")

Dim CurrentDate, OldDate

'* Default Date format is MM/DD/YYYY
CurrentDate = Date()
OldDate = Date() - 1

WScript.Echo ("The Current Date on the system is set to " & CurrentDate) & VbCrLf & ("Checking if the file is newer than " & OldDate)

If FSO.FileExists(InputFile1) Then
        If CDATE (FSO.GetFile(InputFile1).DateLastModified) > OldDate Then
        WScript.Echo ("All good!")
    Else
        WScript.Echo ("File is not current.")
    End If

Else
    WScript.Echo ("File does not exist.")
    Wscript.Quit
    End If

答案 1 :(得分:3)

您可以根据需要添加任意数量的输入。提交表单时,将使用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...)";

答案 2 :(得分:3)

我的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 :(得分:0)

        //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);


     ?>