Hello, I built 2 files I need that onclick radio button the SQL query will pull the right data (input value) and will return the right color for the div: <div id='lp-title'> <div id='lp-editor'> This is what I have: <input type='radio' name='bg_id' value='3' id='1' onclick='ChangeImg(this.id)' /> <br /><br /> <input type='radio' name='bg_id' value='4' id='2' onclick='ChangeImg(this.id)' /> <script> $('#ChangeImg').click(function() { $.ajax({ type: "POST", url: "ajaxPHP.php", data:, success: } }); }); </script> <div id="CommonImg"> <div id="live-preview-display"> <div id='lp-title' style='color: <?PHP echo $title_color ?>'>some title</div> <div id="lp-editor1" style='color: <?PHP echo $editor1_color ?>'>some editor</div> </div> </div> PHP: second file (ajaxPHP.php): <?PHP $bg_id = $_POST['bg_id']; $query = mysql_query("SELECT * FROM `bgs` WHERE (id = '$bg_id')"); $index = mysql_fetch_array($query); $title_color = $index['title_color']; $editor1_color = $index['editor1_color']; ?> PHP: How do I return the data so the color will change when I click on every radio button?
1) Don't mix normal JavaScript (inline) coding while using jQuery 2) Your HTML alone is invalid.. well not "invalid" just not standard.. please use double quotes when doing HTML for more standarized coding 3) id's and class names in HTML can NOT start with a numerical number - removed them. 4) Your jQuery function was wrong for what you were trying to do.. when you want to call a function in JavaScript do the following (which you can have jQuery inside it) onclick="changeThis()" Code (markup): function changeThis() { ... } Code (markup): NOT the way you were doing it by using a selector in jQuery. Please read up on some jQuery and how its selectors work. 5) Always wrap jQuery inside of a $(document).ready(function() { } code as jQuery works off of the DOM, which can only be used once that element has been loaded. So by wrapping all jQuery inside that you can guarantee that your functions will fire. 6) If you are not passing anything into the data parameter inside the AJAX, or even using the success callback function, get rid of them. 7) For a success callback AJAX jQuery function, you need to have it as a function (if you choose to use the parameters it sends back or not is another story) 8) Always put javascript coding above the HTML (inside the head). There are only a few exceptions when they should be placed else where. 9) when using AJAX - AJAX does NOT return with variables. You have to do some maniuplation for when it is returned via jQuery/javascript (which is what you need to do for manipulation of your HTML). <script type="text/javascript"> $(document).ready(function() { $(".bg_id").click(function() { var option = $(this).val(); $.ajax({ type: "GET", url: YOUR URL Code (markup): [COLOR=#111111][FONT=monospace],[/FONT][/COLOR][COLOR=#111111][FONT=monospace] data: "bg_id="+ option, success: function(result) { $("#lp-title").css('background-color', result.substr(0, result.indexOf("||"))); $("#lp-editor1").css('background-color', result.substr(result.indexOf("||")+2)); } }); }); }); </script> [/FONT][/COLOR][COLOR=#111111][FONT=monospace]<input type="radio" name="bg_id" value="3" />[/FONT][/COLOR] [COLOR=#111111][FONT=monospace]<br /><br />[/FONT][/COLOR] [COLOR=#111111][FONT=monospace]<input type="radio" name="bg_id" value="4" />[/FONT][/COLOR] [COLOR=#111111][FONT=monospace]<div id="CommonImg">[/FONT][/COLOR] [COLOR=#111111][FONT=monospace] <div id="live-preview-display">[/FONT][/COLOR] [COLOR=#111111][FONT=monospace] <div id="lp-title"[/FONT][/COLOR][COLOR=#111111][FONT=monospace]>some title</div>[/FONT][/COLOR] [COLOR=#111111][FONT=monospace] <div id="lp-editor1"[/FONT][/COLOR][COLOR=#111111][FONT=monospace]>some editor</div>[/FONT][/COLOR] [COLOR=#111111][FONT=monospace] </div>[/FONT][/COLOR] [COLOR=#111111][FONT=monospace]</div> [/FONT][/COLOR] Code (markup): Your new PHP, which had one big error i noticed: ** For your SQL statement, no need to wrap the 'id' inside of ( ). Code (markup): [COLOR=#000000][FONT=monospace][B]<?php[/B][/FONT][/COLOR] [COLOR=#000088][FONT=monospace]$bg_id[/FONT][/COLOR][COLOR=#339933][FONT=monospace]= [/FONT][/COLOR][COLOR=#000088][FONT=monospace]$_GET[/FONT][/COLOR][COLOR=#009900][FONT=monospace][[/FONT][/COLOR][COLOR=#0000FF][FONT=monospace]'bg_id'[/FONT][/COLOR][COLOR=#009900][FONT=monospace]][/FONT][/COLOR][COLOR=#339933][FONT=monospace];[/FONT][/COLOR] [COLOR=#000088][FONT=monospace]$query[/FONT][/COLOR][FONT=monospace][COLOR=#339933]=[/COLOR] [/FONT][COLOR=#990000]mysql_query[/COLOR][COLOR=#009900][FONT=monospace]([/FONT][/COLOR][COLOR=#0000FF][FONT=monospace]"SELECT * FROM `bgs` WHERE id = '". $bg_id ."'"[/FONT][/COLOR][COLOR=#009900][FONT=monospace])[/FONT][/COLOR][COLOR=#339933][FONT=monospace];[/FONT][/COLOR] [COLOR=#000088][FONT=monospace]$index[/FONT][/COLOR][COLOR=#339933][FONT=monospace]= [/FONT][/COLOR][COLOR=#990000]mysql_fetch_array[/COLOR][COLOR=#009900][FONT=monospace]([/FONT][/COLOR][COLOR=#000088][FONT=monospace]$query[/FONT][/COLOR][COLOR=#009900][FONT=monospace])[/FONT][/COLOR][COLOR=#339933][FONT=monospace];[/FONT][/COLOR] [FONT=monospace][COLOR=#000088]echo $index['title-color'] .'||'. $index['editor1-color'];[/COLOR][/FONT] [COLOR=#000000][FONT=monospace][B]?>[/B][/FONT][/COLOR][COLOR=#111111][FONT=monospace] [/FONT][/COLOR] Code (markup): Code (markup): enjoy, and hopefully you learned a few things.
Hi JamesD31, Thank you very much for your instruction! I truly appreciate it... I affraid I mislead you. I have the follow fileld: <input name='title_color' id='lp-title' class="color {pickerClosable:true, styleElement:'title'} short_input" value="<?PHP echo $title_color ?>" divID='lp-title'> PHP: I'm trying to use the AJAX code in order to change the variable: $title_color , so the value of the this filed will change according the radio button: <input type='radio' name='bg_id' value='3' id='1' onclick='ChangeImg(this.id)' /> <br /><br /> <input type='radio' name='bg_id' value='4' id='2' onclick='ChangeImg(this.id)' /> PHP: Can you please help me?
Did you not read / do anything I said? copy & paste the exact thing I made.. put it in a separate test page.. try it >_>
I did, and I copy it your code is working, but not exactly as I wanted it to work because it change the color of the div while I wanted is to insert value inside the INPUT file: <input name='title_color' id='lp-title' class="color {pickerClosable:true, styleElement:'title'} short_input" value="<?PHP echo $title_color ?>" divID='lp-title'>