I'm trying to change the colour of a div after a form has been submitted. The div on the new page should be in the colour selected.

JS

 function change(col) {   
     col.style.backgroundColor = '<?php echo $colour ?>';    
 }

HTML

<form action="" method="post">
    <input type='search' name='keywords' value='' style="width:100%;">
<a href='#col'>
<input type=submit  value='Submit' name='doSearch' style="visibility: hidden;" onclick="change(this.href)" />
 </a>

</form>
<div id="col" onclick="location.href='index2.php';">
    <br/>
    <?php echo $message ?>
</div>

I'm trying to change the colour of a div after a form has been submitted. The div on the new page should be in the colour selected.

JS

 function change(col) {   
     col.style.backgroundColor = '<?php echo $colour ?>';    
 }

HTML

<form action="" method="post">
    <input type='search' name='keywords' value='' style="width:100%;">
<a href='#col'>
<input type=submit  value='Submit' name='doSearch' style="visibility: hidden;" onclick="change(this.href)" />
 </a>

</form>
<div id="col" onclick="location.href='index2.php';">
    <br/>
    <?php echo $message ?>
</div>

• javascript
• html
• css
• background-color

• Where is the change(col) function called? In the other page? Could we get the code of the other page? Do you have any errors popping in the console? – Jeff Noel Commented Jun 10, 2013 at 14:49
• with selected, you mean by a dropdown menu? – BeNdErR Commented Jun 10, 2013 at 14:58
• change was called. Everything exists on this page. I've fixed it. – user1190466 Commented Jun 10, 2013 at 15:58
• @BeNdErR. Its selected from a php function. Thanks. – user1190466 Commented Jun 10, 2013 at 16:01

4 Answers 4

<? $message="dd"; ?>
<script>
function change(col) {
document.getElementById('col').style.backgroundColor=col;
}
 </script>

<form action="" method="post">
<input type='search' name='keywords' value='' style="width:100%;">

<a href='#col'>
<input type=submit  value='Submit' name='doSearch' style="visibility: hidden;" onclick="enter(this.href)" />
 </a>
 </form>


<div style="width:50px; height:50px;" id="col" onclick="location.href='index2.php';" >

 <br/>
<?php echo $message ?>

</div>
<? if(isset($_POST['keywords'])){ ?>
<script>
 change('<?=$_POST['keywords']?>');
</script>
<? } ?>

test it, it works by inserting the color on the keywords input

You could do this easily with jQuery:

$("#yourID").click(function(){

  $(this).css("background-color","yellow");

  });

have a look here: http://jsfiddle.net/TeFYV/

code

var colors = ["red", "blue", "yellow", "green", "orange", "black", "cyan", "magenta"]

function changeColor() {
    //you can as well pass col reference as you do in your code
    var col = document.getElementById("changecolor");
    col.style.backgroundColor = colors[Math.floor((Math.random()*8)+1)];
}

Adapt to your needs, hope it helps

Easiest way would be to pass the color as a parameter between the two pages and then use jQuery on the second page to set the color with the one you got from that parameter.