Develop Reference

set html button state based on query

I have a page with 'favourite' button that when clicked runs an Ajax post and updates my db table 'favourite' accordingly user and book details.
The current process is as follows,
click button once > add book to favourite table > refresh page > display success div
click button again > delete book from favourite table > refresh page > display success div
What I would like to do now is on page load, check if the user has already added the book as a favourite, if so, set the class of this button to btn-success (green).
How do I achieve this? Do I need to give the button an attribute on page load and check this on page load?
I am quite new to php and js so any advice is appreciated. I have included my code for reference.
ajax
$(document).ready(function(){
$( "#fav" ).click(function(){
book_id = $(fav).val(); // set the value of the button as the book_id
$.ajax({
type: 'POST',
url: '<?php echo URL; ?>books/checkFav',
data: {book_id:book_id},
success: function () {
window.location.reload(true);
}//end success
});//end ajax
});
});
checkFav php
$bookid=$_REQUEST['book_id']; //get this from ajax
$userid=$_SESSION['user_id']; //get this from session
$sql = "SELECT * FROM favourite WHERE book_id = :book_id AND user_id = :user_id";
... //execute
if(empty($rows_found)) {
$sql = "INSERT INTO favourite (book_id, user_id) VALUES (:book_id, :user_id)";
... //execute
} else {
$sql = "DELETE FROM favourite WHERE book_id = :book_id AND user_id = :user_id";
... //execute
}
html
echo '<td>
<button id="fav" value="'.$book->id.'" type="button" class="btn btn-default"></button></td>';
echo '</tr>';

This is incorrect:
<button id="fav" value="'.$book->id.'" type="button" class="btn btn-default"></button>
You must specify that you want PHP code and you want to echo $book->id, like this:
<button id="fav" value="<?php echo $book->id; ?>" type="button" class="btn btn-default"></button>
Also, let's suppose you have a PHP function isFavorite, then
<button id="fav" value="<?php echo $book->id; ?>" type="button" class="btn btn-default<?php echo ((isFavorite()) ? (" btn-success") : ("")); ?>"></button>

There are two things you can do:
make a php function that checks if it is already a favorite or not and returns true or false and based on that add a class to the button like this:
$("#buttonId").addClass("btn-success");
if you already have this data when the page loads you can add a php code inline in the html like this:
if($favorite){
$class = "btn-success";
}
and then in the html
<button id="fav" value="<?php echo $book->id; ?>" type="button" class="btn <?php echo ($book->isFavorite()) ? 'favorite' : '';?>"></button>

get check box value dynamically using javascript

we have list employees with email id using below code
<tbody>
<?php
$sqlquery = mysql_query("select * FROM employee");
while($row=mysql_fetch_object($sqlquery)){
?>
<tr class="gradeA">
<td><input type="checkbox" name="eid" value="<?php echo $row->emailid;?>" onclick="send_email_form_test()"><?php echo $row->name;?></td>
</tr>
<?php }?>
</tbody>
when checkbox is clicked following function call,
function send_email_form_test(){
var selected = new Array();
$("input:checkbox[name=eid]:checked").each(function() {
if($(this).val() !=""){
selected.push($(this).val());
}
});
alert(selected.join(','));
var final_email = selected.join(',');
document.getElementById("to").value =final_email;
}
after click the checkbox,email ids are appears in "to" textarea field .when i will go to second page of the employee list, i cant able to get "to" textarea field,it will empty on the second page
<div>
<label for="required">TO</label>
<textarea name="to" cols="5" rows="10"></textarea>
</div>
<div>
<label for="email">Subject</label>
<input type="text" size="80" id="subject" name="subject" >
<input type="submit" name="submit" value="submit">
</div>
how to add and remove the email ids with comma separated,when i click the checkbox.I have issue on when i will go on next page of the pagination

You can add 'this' parameter to the Javascript function as onclick="send_email_form_test(this)"> then you will get the clicked checkbox object. Then you will be able to retrieve the value of the clicked check box

I did not test it, but I think this is how you could collect emails from all pages
<?php
//...
echo '<script>window.tablePage = ', $paginator->currentPage, ';</script>';
?>
<script type="application/javascript">
//...
pageSelected = selected.join(',');
//get emails selected on other pages
allSelected = JSON.parse(localStorage.getItem('emails'));
//add currently selected emails
allSelected[tablePage] = pageSelected;
localStorage.setItem('emails', JSON.stringify(allSelected));
//output emails from all pages
document.getElementById("to").value = allSelected.join(',');
//...
</script>
(JSON library is here: https://github.com/douglascrockford/JSON-js/blob/master/json2.js )

why different effect in differnt browser after "onclick"

I want to enable the btn1 and disable btn2 on page-load. When I input value in txtbox1, then, on clicking btn1 ,btn1 should be disabled and enable btn2. If I click btn2, then btn2 should also be disabled.
$value= $_POST['tb1'.$id];
echo '<form name="f1" method="POST" action="">';
echo '<input type="text" id="txtbox1'.$id.'" name="tb1'.$id.'" value="'.$value.'" />';
echo '<input type="submit" id="btn1'.$id.'" name = "btnstart'.$id.'" value="START" onClick="document.getElementById(\'btn2'.$id.'\').disabled=false;this.disabled=true;"/><input type="submit" id="btn2'.$id.'" name = "btnend'.$id.'" value="End" onClick="this.disabled=true;" disabled/>';
echo '</form>';
if ( isset( $_POST['tb1'.$id] ) ) {
echo $value;
}
When I use Chrome, i can do the above button effects , but I cannot get the txtbox1 value.
When I use IE and Firefox, I can get the txtbox1 value, but the button effect is not want I want. Which means, I input value in txtbox1 then click btn1 only, then it will automatically enable btn2, then disable both then, then get back to the original status(btn1 enable, btn2 disable).
How to solve this problem?

Since you have dynamic button names, its better not to touch them for disbale/enable feature that you want :
Using jquery:
$(document).ready(function () {
/*Operations on the 1st button click */
$('#form').children("input[type='submit']:first").click(function () {
$(this).attr("disabled", "disabled"); /*disable the 1st button */
$('#form').children("input[type='submit']").eq(1).removeAttr("disabled"); /*enable the 2nd button */
});
/*Operations on the 2nd button click */
$('#form').children("input[type='submit']").eq(1).click(function () {
$(this).attr("disabled", "disabled");
});
});
Additionally : give your form an id, something like :
echo '<form name="f1" id="form" method="POST" action="">';
/* check the form id tag ^^ here*/
basic demo here
but you wont be able to see full feature in it!!

never write your code like this, this makes debugging like pain, just make a script tag and handle everything there like this, the point here is about setAttribute and removeAttribute:
<?php
// your server side code
// finish declaring your variables like
$input_id = 'an_id';
$input_value = 'some_value';
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>testing</title>
</head>
<body>
<form name="f1" method="POST">
<input type="text" id="txtbox1<?php echo $input_id; ?>" name="tb1<?php echo $input_id; ?>" value="<?php echo $input_value; ?>" />
<input type="button" id="btn1<?php echo $input_id; ?>" name="btnstart<?php echo $input_id; ?>" value="START" />
<input type="button" id="btn2<?php echo $input_id; ?>" name="btnend<?php echo $input_id; ?>" value="End" disabled="disabled"/>
</form>
<script type="text/javascript">
btn1 = document.getElementById('btn1<?php echo $input_id; ?>');
btn2 = document.getElementById('btn2<?php echo $input_id; ?>');
btn1.onclick = function() {
console.log(this);
btn1.setAttribute("disabled","disabled");
btn2.removeAttribute("disabled");
return false;
};
</script>
</body>
</html>

Javascript and Codeigniter onclick new window

I am working on something here, I have a button, when you click on this button I want another page to open in a new window and not a new tab.
How would I do this in codeigniter?
I have a function in my controller like so
function print_members(){
$this->load->model('common_model');
$data = $this->common_model->general();
$data['members'] = $this->common_model->all_members();
$this->load->view('print_members', $data);
}
and when the user clicks on my input button
<?php echo form_open('controller/print_members', array('id'=>'form', 'target' =>'_blank')); ?>
<input id="print" type="submit" name="print" value="Print"/>
<? echo form_close(); ?>
I am basically looking for away to open `controller/print_members' function in a new window. The following code aboves opens it in a new tab.

This can be done by javascript
Javascript
<script>
function popup(){
var xhr = "<?php echo base_url('print_members')?>" /***controller url****/
popup=window.open(xhr,'print members' 'width=500,height=500');
}
</script>
you can used input or href like this
<input id="print" type="button" name="print" value="Print" onclick="popup()"/>
Or
<a href="void:javascript" onclick="popup()"/>Print </a>
no change in controller file

form with 2 buttons need to call different functions based on value

I have a page which has lot of post data in the url.
For example,
www.test.com/test.php?userid='tester'&name=test&so on
The above page has a form that has something like this:
<?
$set=get_value_set;
if($set ==1) {
$set_value="SET";
} else {
$set_value="UNSET";
}
?>
<form name="test">
<input type="text" readonly="READONLY" value="<? echo $user_id; ?>">
<input type="submit" value="Email" name="submit_user">
<input type="submit" value="<? echo $set_value; ?>" name="submit_user">
<?
function setuser()
{
//sets the value
}
function email_user()
{
//sets the value
}
?>
there are two buttons above, when I click on email, i want the value of email button to be passed to the email_user function and do some proceesing there. Similar thing when I click on the set button.
NOTE:But in both cases above, I want the form to remain in the same page with the same post data in the url, but I also want the page to be refreshed so that the set button can have a value of Set or Unset depending on the database update.
Is this possible?

I would start to remove the submit action of each button and change them to
<input type="button" class="btn-Email" value="Email" name="submit_user" />
<input type="button" class="btn-Other" value="<? echo $set_value; ?>" name="submit_user" />
and then, using jQuery, you can easily process each click and submit the form
$(function() {
$(".btn-Email").click(function() {
// append anything you want
var but_email_value = $(this).val(), // or $(".btn-Email").val()
btn_other_value = $(".btn-Other").val();
$("form").submit();
});
$(".btn-Other").click(function() {
// append anything you want
var but_other_value = $(this).val(), // or $(".btn-Other").val();
btn_email_value = $(".btn-Email").val();
$("form").submit();
});
});

change your HTML
<form id="test" name="test">
...
<button onclick="email_user();">Email</button>
<button onclick="setuser();"><? echo $set_value; ?></button>
</form>
your functions should submit the form for you:
document.getElementById("test").submit();