I have a problem with click event for all my "a" objects. On my page I have a table where I am showing img of Red/Green jpg, depends if something is active or inactive. After user click "a" objects I want to change image to opposite, and update database. Right now It looks something like this:
while($rang = $result->fetch_assoc())
{
?>
<form action="" method="post">
<tr>
<td align="center" id="switch">
<input type="hidden" id="id_tournament_class" value="<?=$rang['id_tournament_class'];?>" /> //this input i am sending to php file to know which I should change in DB
<?php
if ($rang['active']==true)
{
?><a href="#" ><img src="../img/dot_green.png" /></a><?php
}
else
{
?><a href="#" ><img src="../img/dot_red.png" /></a><?php
}
?>
</td>
</tr>
</form>
<?php
}
Now my script code for this looks like this:
$(function() {
$('#rang a').click(function() {
loadUrl += "?id=" + $(this).parent().find('input[type=hidden]').val();
$(this).html(ajax_load).load(loadUrl);
});
});
In php file I am echo'ing:
echo '<img src="../img/dot_green.png" />';
or
echo '<img src="../img/dot_red.png" />';
I would use jQuery.post() to submit the data to database. This is one example:
JS file
$("#submit").click(function(){
$.post("test6.php",{
'schoolName':$('#schoolName').val(),
'schoolAddress':$('#schoolAddress').val(),
'schoolEmail':$('#schoolEmail').val(),
'schoolTelephone':$('#schoolTelephone').val(),
'country':$('#country option:selected').text(),
'numberOfFilms':$('#numberOfFilms').val(),
'productionDate':$('#productionDate').val(),
'schoolWebsite':$('#schoolWebsite').val(),
'dozvola1':$('#dozvola1').prop('checked'),
'dozvola2':$('#dozvola2').prop('checked'),
'dozvola3':$('#dozvola3').prop('checked')
},function(data){
id = (data.id);
}, "json");
HTML file
<div class="clearfloat"></div>
<div class="left">School Address</div>
<div class="right"><input type="text" style="width: 500px;"
id="schoolAddress" name="schoolAddress"
/></div>
<div class="clearfloat"></div>
<div class="left">School Telephone</div>
<div class="right"><input type="text" style="width: 500px;"
id="schoolTelephone" name="schoolTelephone" /></div>
<div class="clearfloat"></div>
<div class="left">School E-mail</div>
<div class="right"><input type="text" style="width: 500px;"
id="schoolEmail" name="schoolEmail"
onblur="validateEmail(this.value)" /></div>
<div class="clearfloat"></div>
<div class="left">Number of films</div>
<div class="right"><select name="numberOfFilms" id="numberOfFilms">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
<option>32</option>
<option>33</option>
<option>34</option>
<option>35</option></select></div>
<div class="clearfloat"></div>
<div class="left">Production Date</div>
<div class="right"><input type="text" style="width: 500px;"
id="productionDate" name="productionDate"/></div>
<div class="clearfloat"></div>
<div class="left">Website</div>
<div class="right"><input type="text" style="width: 500px;"
id="schoolWebsite" name="schoolWebsite" /></div>
<div class="clearfloat"></div>
<div class="left"><input type="checkbox" id="dozvola1" name="dozvola1" />
</div>
<div class="right" style="">I authorize the screening of my film till 10
% of its length on television for information purposes.
<div class="line"></div>
</div>
<div class="clearfloat"></div>
<div class="left"><input type="checkbox" id="dozvola2" name="dozvola2" />
</div>
<div class="right">I agree with the public screening of my film in
special programmes promoted by Balkanima with no commercial purposes,
and that are included in cultural activites organized by Schools,
Cultural Associations, Film Societies and Festivals.
<div class="line"></div>
</div>
<div class="clearfloat"></div>
<div class="left"><input type="checkbox" id="dozvola3" name="dozvola3" />
</div>
<div class="right">I agree to the use of photos of the film on internet
for promotion purposes.
<div class="line"></div>
</div>
<div class="clearfloat"></div>
<div class="right">* By completing this application you have accepted <a
href="http://localhost/joomlatest/index.php/en/rules">the proposition
and the festival rules</a>.</div>
<div class="clearfloat"></div>
<div class="right"><input type="button" id="submit" name="Submit" value="Next" style="margin: 5px; width: 100px;" /> <br />
<br />
PHP file
<?php
require_once("DB_connect.php");
$error = "no error";
$flag = "ok";
include_once"class_lib.php";
$table_id = new id($mysqli,"school2014");
$id = $table_id->get_id();
$ime = mysql_real_escape_string(trim($_POST["schoolName"]));
$adresa = mysql_real_escape_string(trim($_POST["schoolAddress"]));
$telefon = mysql_real_escape_string(trim($_POST["schoolTelephone"]));
$email = mysql_real_escape_string(trim($_POST["schoolEmail"]));
$sajt = mysql_real_escape_string(trim($_POST["schoolWebsite"]));
$country = mysql_real_escape_string(trim($_POST["country"]));
$numberOfFilms = mysql_real_escape_string(trim($_POST["numberOfFilms"]));
$productionDate = mysql_real_escape_string(trim($_POST["productionDate"]));
$dozvola1 = 'ne';
$year = date("Y");
if($_POST['dozvola1'] == 'true'){
$dozvola1 = 'da';
}
$dozvola2 = 'ne';
if($_POST['dozvola2'] == 'true'){
$dozvola2 = 'da';
}
$dozvola3 = 'ne';
if($_POST['dozvola3'] == 'true'){
$dozvola3 = 'da';
}
$datum = date("d").". ".date("m").". ".date("Y");
$query2 = "
INSERT INTO school2014
(`ime` ,`adresa` ,`telefon` ,`email` ,`sajt`,`id`,`dozvola1`,`dozvola2`,`dozvola3`,`numberOfFilms`,`productionDate`,`country`,`year`)
VALUES
('$ime','$adresa','$telefon','$email','$sajt',$id,'$dozvola1','$dozvola2',
'$dozvola3','$numberOfFilms','$productionDate','$country','$year')";
//echo $query2; Upozorenje ovaj fajl mora da ispise samo return id da bi ajax mogao raditi, ovaj echo se koristi samo za debagovanje
if (!mysql_query($query2)){$error = 'submit film query error: '.mysql_error(); $flag = 'error';}
if($flag == 'error'){
$returnID = '{"switch":"error" , "query":"'.$query2.'", "error":"'.$error.'"}';
echo $returnID;
}
else{
$returnID = '{"switch":"ok" , "id":"'.$id.'"}';
echo $returnID;
}
To replace images use http://api.jquery.com/replacewith/