Changing an checkbox input name with a button click function - php

I'm running into a problem with changing the name attribute on an input element when a button is clicked.
I have 3 buttons:
* Add Renter
* Delete Customer
* Update Customer
This is the input element:
<input type=\"checkbox\" name=\"todelete[]\" value=\"$busRow[0]\" class=\"check\" />
$busRow is the user's id..
The form is submitted to a php script that checks to see what button was set and does different actions for that button. When the user clicks the delete it loops through and deletes each customer that was in the todelete[] array. When the user clicks the Update Customer button i want to change the checkbox input's name to "id". Then my php script will grab the user's id instead of grabbing the array value and then redirect the user to the Update Customer page with the id stored on the URL.
This is the javascript i'm using at the bottom of the page:
<script type="text/javascript">
$("button").click(function () {
if ($(this).text() == "Update Customer") {
$('input.check').attr("name", "id");
}
});
</script>
When i get to the Update Customer page the id is not there in the URL and i can't pull any values based upon the ID :(

You're setting the name value to "id", instead of the value stored in value. Try this:
$("button").click(function () {
if ($(this).text() == "Update Customer") {
var element = $('input.check');
element.attr("name", element.attr("value"));
}
});
Although, I think you could just simply pass the value of the input tag instead of the name when the btn clicked is 'Update'. That would save you the hassle of changing these different attributes and could save you trouble.
Edit: I'm reading the OP again and see you want to set the name att to "id" and not the user's id??? You're question is vague and hard to understand what you're trying to do. You're leaving out crucial code that grabs this "id" and redirects the user.
Edit2: What's up with the semi-colon between your string concat? I hope that's not in your source code. Now seeing your redirect code. I think your problem lies in trying to change the tag's attributes/values with an 'input.check' selector. I would also say you should redesign the way you are implementing this. Your checkboxes shouldn't hold your user information. But regardless, I don't think you need to even change the name value. If update isset() then just make $id = (its current name value); Download firebug to debug your javascript code. Firebug will also show you errors in your code that wouldn't see otherwise. It should help you out a lot

Try putting an alert inside the if statement to check if that is actually becoming true, to narrow down what might be the cause.
Also I've never seen input.check used as a selector. Perhaps give the button an id making it:
<input id=\"customercheck\" type=\"checkbox\" name=\"todelete[]\" value=\"$busRow[0]\" class=\"check\" />
Then change the attribute via the ID like so:
$('#customercheck').attr("name", "id");
that also saves you if you add another input to the field later down the road.

Related

get selected checkbox values into jQuery and process to the other page

I need help with the jquery. Im just starting on how to code with jQuery so im kinda newbie. please help me with some solutions,
so far i have this in the markups
<input type='checkbox' data-headmark=".$row['HEAD_MARK']." data-id=".$row['ID']." class='cuttingCheckbox' name='cuttingCheckbox'/>
and the jquery i have so far is just disabling the checkbox once selected,
$('.cuttingCheckbox').change(function() {
if (this.checked) {
this.setAttribute("disabled", true);
}
});
and the page who is going to use the values is the database process,
oci_parse($conn,"UPDATE FABRICATION_QC SET CUTTING = 'Y'
WHERE HEAD_MARK = ".$_POST["headmark"]." AND ID = ".$_POST["headmark_id"].";");
so the idea is sending those two values from checkbox to another page dynamically
Thanks guys for helping me
The answer to this question depends on if you want to send that update to the database life (I.E., right when the checkbox is checked) or on the form submit.
If live, you will use Ajax to immediately post the data. If not live, you will likey (in the jQuery) have to add something like so:
if (this.checked){
this.setAttribute("disabled", true);
var hidden=document.createElement("input");
input.type="hidden";
input.name=this.getAttribute("data-headmark");
input.value=this.getAttribute("data-id");
document.body.appendChild(input);
}
That way, an input of type "hidden" is added so when the form is posted, you can retrieve the variables stored in $_POST. If you need to keep track of what those variables are, you could use a similar method to append to a hidden input with a fixed name.

How to manage parameter in thick box tb_show function?

I am using below script on a form (say, form-A) to load another form (form-B) in thickbox, with values passed by controller.
First, in form-A, i am selecting one option from dropdown "customerID", then "Add Project" button (with id 'addProject') becomes visible, on clicking which, a thickbox appears with form-B in it. Here, in form-B, i want to pass selected customer. How can I do that?
I tried below code, and tried to access the $_GET['custID'] in controller's manage_project function, but it is showing blank. But when i am alerting the url1 (i have commented below), ID is coming there.
Below code is in form-A view file.
('#addProject').click(function(){
var url1='<?php echo SITEURL ?>/xome/invoice/manage_project?TB_iframe=true&height=800&width=700&inlineId=innerDiv&class=thickbox&custID='+$('#customerID').val();
//alert(url1);
tb_show('Add More Project',url1,'');
})
According to documentation at (http://thickbox.net/):
Important to Remember: Add all other query parameters before the
TB_iframe parameters. Everything after the "TB" is removed from the
URL.
So, try add custID before TB_iframe. And then you will be able to operate with a variable in the script, such as access them via $_GET['custID']. For example:
var url1='<?php echo SITEURL ?>/xome/invoice/manage_project?custID='+$('#customerID').val() + '&TB_iframe=true&height=800&width=700&inlineId=innerDiv&class=thickbox';

What is the best way to go about creating a page of stickies with savable and retrievable content?

I have had a look at sticky notes with php and jquery and jStickyNote, and while both seem to look pretty nifty they lack some elements I am after. I haven't been able to find a way to allow particular users to modify the stickies they create, nor have I found a good way to save their stickies into my database. I am, and would like to keep using php, mysql and jquery. I have thought with the first link that I could just save the image created into a folder and save the url into that database but then I cannot go back and allow the user to change the content of the sticky. With the second link there does not seem to be support for saving the sticky at all. I'd also like to create a function where adding stickies to a message board (for everyone to see) does so in a randomly placed way that looks natural. Any ideas for either of these problems?
Here is some javascript that should help:
// Called when the edit (A) button is pressed
function edit(event, editButton)
{
// Get existing title and change element to textarea
var stickyTitle = $(editButton).parent().find('p.stickyTitle');
var textareaTitle = $(document.createElement('textarea')).addClass('textareaTitle');
$(textareaTitle).text(stickyTitle.html());
// Get existing description and change element to textarea
var stickyDescription = $(editButton).parent().find('p.stickyDescription');
var textareaDescription = $(document.createElement('textarea')).addClass('textareaDescription');
$(textareaDescription).text(stickyDescription.html());
// Create save button
var saveButton = $(document.createElement('div')).addClass('jSticky-create');
// Add save button, then replace title, then replace description, then remove edit button
$(editButton).before(saveButton);
$(editButton).parent().find('p.stickyTitle').before(textareaTitle).remove();
$(editButton).parent().find('p.stickyDescription').before(textareaDescription).remove();
$(editButton).remove();
// Set description textarea focus and set button actions
textareaTitle.focus();
setActions();
}
// Called when the save (tick) button is pressed
function save(event, saveButton)
{
// Get existing title and change element to paragraph
var textareaTitle = $(saveButton).parent().find('textarea.textareaTitle');
var stickyTitle = $(document.createElement('p')).addClass('stickyTitle');
var newTitleValue = textareaTitle.val();
$(stickyTitle).html(newTitleValue);
// Get existing description and change element to paragraph
var textareaDescription = $(saveButton).parent().find('textarea.textareaDescription');
var stickyDescription = $(document.createElement('p')).addClass('stickyDescription');
var newDescriptionValue = textareaDescription.val();
$(stickyDescription).html(newDescriptionValue);
// Create edit button
var editButton = $(document.createElement('div')).addClass('jSticky-edit');
// Add edit button, then replace title, then replace description, then remove save button
$(saveButton).before(editButton);
$(saveButton).parent().find('textarea.textareaTitle').before(stickyTitle).remove();
$(saveButton).parent().find('textarea.textareaDescription').before(stickyDescription).remove();
$(saveButton).remove();
// Set button actions
setActions();
// Add the object to the ads div
$('#ads').append(object);
// Update your database here
// by calling the saveAd.php
}
function setActions()
{
// call these after changes are made to anything
$('.jSticky-create').unbind('click').click(function(e)
{
save(e, this);
});
$('.jSticky-edit').unbind('click').click(function(e)
{
edit(e, this);
});
$('.jSticky-delete').unbind('click').click(function(e)
{
remove(e, this);
});
}
function remove(event, deleteButton)
{
var stickyMaster = $(deleteButton).parent();
$(stickyMaster).remove();
//then call savead.php with delete parameter
}
Have you looked at any of the code? I took a really quick look at jStickyNote.
Basically, the "sticky note" is a css-styled, text area (that is surround by a div element).
If you want users to be able to save sticky notes/edit past notes, here's what I'd recommend:
Add some button to each note that says "Save" or with a similar meaning.
When a user clicks the "Save" button, you'll need to grab the text from that specific textarea element and then save that text to a database.
With that said, you'll probably need to design some sort of database with a user table and sticknote table. The sticknote table can have a foreign key to the user table.
You'll also want to add some sort of login functionality to your site and then load the correct sticky notes for the authenticated user.
Good Luck!
You can have a look at http://sticky.appspot.com - the code has been released by the google appengine team.
Sorry for not going into specifics, but you could modify the plugin code to load a php script whenever a save button is clicked (or the box is moved, or even on keyup) with $.ajax(), passing it the horizontal and vertical positions and content of the note ( say, $("#note-content").text() ) and have the script plug those things into a database with a MySQL query. Just serialize your data and send it away. This gets more complicated if you want let your users have multiple notes, but start with one. Where is you hangup, exactly? I would be more specific, but I'm not sure what you already know.
I was thinking earlier about adding this feature to an app I'm working on. The thing is, I don't like those plugins. It should be very simple to write your own though. Let me know if you need help with something specifically.

Add and remove form fields in Cakephp

Im looking for a way to have a form in cakephp that the user can add and remove form fields before submitting, After having a look around and asking on the cake IRC the answer seems to be to use Jquery but after hours of looking around i cannot work out how to do it.
The one example i have of this in cake i found at - http://www.mail-archive.com/cake-php#googlegroups.com/msg61061.html but after my best efforts i cannot get this code to work correctly ( i think its calling controllers / models that the doesn't list in the example)
I also found a straight jquery example (http://mohdshaiful.wordpress.com/2007/05/31/form-elements-generation-using-jquery/) which does what i would like my form to do but i cannot work out how to use the cakephp form helper with it to get it working correctly and to get the naming correct. (obviously the $form helper is php so i cant generate anything with that after the browser has loaded).
I an new to cake and have never used jQuery and i am absolutely stumped with how to do this so if anyone has a cakephp example they have working or can point me in the right direction of what i need to complete this it would be very much appreciated.
Thanks in advance
I would take the straight jquery route, personally. I suppose you could have PHP generate the code for jquery to insert (that way you could use the form helper), but it adds complexity without gaining anything.
Since the form helper just generates html, take a look at the html you want generated. Suppose you want something to "add another field", that when clicked, will add another field in the html. Your html to be added will be something like:
<input type="text" name="data[User][field][0]" />
Now, to use jquery to insert it, I'd do something like binding the function add_field to the click event on the link.
$(document).ready( function() {
$("#link_id").click( 'add_field' );
var field_count = 1;
} );
function add_field()
{
var f = $("#div_addfield");
f.append( '<input type="text" name="data[User][field][' + field_count + ']" />' );
field_count++;
}
Of course, if a user leaves this page w/o submitting and returns, they lose their progress, but I think this is about the basics of what you're trying to accomplish.
This was my approach to remove elements:
In the view, I had this:
echo $form->input('extrapicture1uploaddeleted', array('value' => 0));
The logic I followed was that value 0 meant, not deleted yet, and value 1 meant deleted, following a boolean logic.
That was a regular input element but with CSS I used the 'display: none' property because I did not want users to see that in the form. Then what I did was that then users clicked the "Delete" button to remove an input element to upload a picture, there was a confirmation message, and when confirming, the value of the input element hidden with CSS would change from 0 to 1:
$("#deleteextrapicture1").click(
function() {
if (confirm('Do you want to delete this picture?')) {
$('#extrapicture1upload').hide();
// This is for an input element that contains a boolean value where 0 means not deleted, and 1 means deleted.
$('#DealExtrapicture1uploaddeleted').attr('value', '1');
}
// This is used so that the link does not attempt to take users to another URL when clicked.
return false;
}
);
In the controller, the condition $this->data['Deal']['extrapicture1uploaddeleted']!='1' means that extra picture 1 has not been deleted (deleting the upload button with JavaScript). $this->data['Deal']['extrapicture1uploaddeleted']=='1' means that the picture was deleted.
I tried to use an input hidden element and change its value with JavaScript the way I explained above, but I was getting a blackhole error from CakePHP Security. Apparently it was not allowing me to change the value of input elements with JavaScript and then submit the form. But when I used regular input elements (not hidden), I could change their values with JavaScript and submit the form without problems. My approach was to use regular input elements and hide them with CSS, since using input hidden elements was throwing the blackhole error when changing their values with JavaScript and then submitting the form.
Hopefully the way I did it could give some light as a possible approach to remove form fields in CakePHP using JavaScript.

Get form checkbox values and pass them through pagination?

I need to get values from some selected checkboxes and pass those values through pagination in php/mysql. If on another page user selects other checkboxes, I need to add their values to array selected earlier.
I need this for a product comparison page. In short I need to:
get the checkbox values
store them
include the checkbox values from other pages in pagination
and when user selects "compare" send that array to compare page.
Anybody know how to do this? Related examples would be appreciated?
There are different ways to maintain state across pages, including cookies, session variables, hidden inputs, passing them in the querystring, persisting to database, etc. In this case I would probably use a session variable.
For more info on PHP session see PHP Sessions.
One solution would be to load all of the pages at once in their own divs inside of a form. When you click on a new page link, hide all divs except the one you need to show. That way all checkboxes are submitted in the same form, making it easier to handle server-side. That of course depends on how heavy each individual page is and how many pages there are.
Another solution would be to keep a session variable, tracking what was clicked. Each time someone clicks to go to another page. POST to the server a list of the checkboxes.
You could do it by using javascript to store the checkbox selection in a cookie. Here's some sample code to get you going in the right direction.
var aa_checkbox;
function init_checkbox(){
//setup blank cb cookie
if(!Cookie.read('cb')){
Cookie.write('cb', JSON.encode({}));
}
//setup "associative array" to match what is currently in the cookie
aa_checkbox = JSON.decode(Cookie.read('cb'));
//set up each checkbox with class="remember_cb"
$$('input.remember_cb').each(function(el){
//mark checked if it is in the cookie
if(aa_checkbox[el.name]){
el.checked = 'checked'
}
//setup onclick event to put checkbox status in the
el.addEvent('click', function(){
if(el.checked){
aa_checkbox[el.name] = 1;
}else{
delete(aa_checkbox[el.name]);
}
})
})
//save aa_checkbox back into cookie upon leaving a page
window.onbeforeunload = function(){Cookie.write('cb', JSON.encode(aa_checkbox));};
setup_form();
return true;
}
function setup_form(){
//set up form so that it adds the inputs upon submit.
$$('form.remember_cb_form').each(function(form){
form.addEvent('submit', function(ev){
//clean up previously inserted inputs
var aa_hidden_insert = $$('input.hidden_insert');
$each(aa_hidden_insert, function(el){
el.parentNode.removeChild(el);
})
var el_form = this;
//insert hidden elements representing the values stored in aa_checkbox
$each(aa_checkbox, function(i_value, s_name){
if(i_value){
var el_input = document.createElement('input');
el_input.type = 'hidden';
el_input.value = i_value;
el_input.name = s_name;
el_input.setAttribute('class', 'hidden_insert');
el_form.appendChild(el_input);
}
});
});
});
}
window.addEvent('domready', init_checkbox);
There is a working demo here and a more thorough explanation here
Your pagination links could actually perform a form POST, then read the checkbox[] in ur php script, and update a hidden form element or add the value to a session, anything stateful. so your anchor could look something like
<a href="#" onclick="document.myform.submit()">next&lt/a>

Categories