I am using the input type color to select the color to customize my site. I am inserting the selected color to database and retrieve it back and apply to the site this is working nice for a single input type color. For now i have an input type color and a button with this when i select the color and click the button then , the area name and color inserted to database like area name = footer and color = #CCC, now my problem is that i want to do this for all the content,header,left sidebar and right sidebar. I can use multiple button with multiple input type, but that seem not professional ,i want multiple input type color and one button for all. Any help would be appreciated. thanks in advance.
/**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);
I am using the input type color to select the color to customize my site. I am inserting the selected color to database and retrieve it back and apply to the site this is working nice for a single input type color. For now i have an input type color and a button with this when i select the color and click the button then , the area name and color inserted to database like area name = footer and color = #CCC, now my problem is that i want to do this for all the content,header,left sidebar and right sidebar. I can use multiple button with multiple input type, but that seem not professional ,i want multiple input type color and one button for all. Any help would be appreciated. thanks in advance.
/**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);
-
So you want to use a single
<input>to set the color for multiple elements? – hungerstar Commented Apr 25, 2015 at 4:24 -
For that you need multiple database columns. And multiple URL parameters as well as multiple input boxes with different ids. If you'd create an JSFiddle i'd like to edit but it's too long to write from scratch. (its not even valid html - not even enclosed in
<script>tags ) – Ronnie Commented Apr 25, 2015 at 4:25 - @hungerstar , i want mulitple <input> with only one submit buttom – Abdul Muheet Commented Apr 25, 2015 at 4:27
- @Ronnie i have already written the code for the whole site..but the problem is that there is a button with each <input>. I want only one button for all <input>. I have in the database column for each area like...header,footer, main area...my problem is to do this with only one submit button – Abdul Muheet Commented Apr 25, 2015 at 4:29
4 Answers
Reset to default 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./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("plete");
});
});
});
</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;
}
?>
You can add as many inputs as you want. When you submit the form, each input name and value will get submitted with the POST data. From there, it's up to you to add the values into the db insert script.
add another input and name it color2 or headerColor to make it more readable.
Then add in javascript:
var forms = document.forms['NameOfYourForm'];
var headerColor = forms['headerColor'].value;
once you've got all your variables for each color, add it all to that ajax call
For the php part:
$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...)";
My PHP and MySQL is a little rusty so please forgive me.
Your form only needs a single submit button. You don't need one for each input. Nothing magical, just basic HTML forms.
<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>
Then your PHP would check for the form submission along with validation/sanitization (not included for brevity) of input values, then build and run your database query.
<?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
}
?>
//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);
?>