I have a select with some options. But this select section is not always shown. It is only shown if a user has clicked another element. If the user submits the form than the default values (first entries) of the select are also submitted. How can I clear the select value?
I tried it with $('#ExpM').val('') and also with this:
$('#Form').submit(function() {
if (!$('#radio_dump').is(':checked')){
$('#ExpM').selectedIndex=-1;
$('#ExpY').selectedIndex=-1;
}
});
But the values are also sent in the post. These values are not required. What can I do?
Try this:
$('#Form').submit(function() {
if (!$('#radio_dump').is(':checked')){
$('#ExpM').attr('name','');
$('#ExpY').attr('name','');
}
});
Basically, name it blank so nothing for it is sent.
foreach($_POST as $key => $value)
if ( empty($value) ) unset($_POST[$key]);
This is some idea only, I have not tested if it solves your problem:
Disabled form controls are not submitted. You could disable those form controls which should not be submitted, so you would not need to worry any longer which item is selected at all.
See Disabled and read-only controlsHTML4.
I'm pretty sure jQuery has something to disable a form field, see jQuery - Disable Form Fields.
Related
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.
I am having a form with quite a lot of list boxes. After submitting the form I have no problem to process all list boxes with PHP in a loop. But I am looking for a way to only grab those that have changed because it would save a lot of processing time.
Let's say I have a hundred list boxes. Their ids are "lb_1" ... "lb_100". I would loop through them like:
foreach($_POST as $key=>$value) {
if (substr($key,0,3)== "lb_" ) {
...do something...
}
}
That loop however will do something with all the hundred listbox values. I only want to catch those that have actually changed.
Any ideas?
To expand on the suggestion given by #Tushar, you could use Javascript to set the Disabled attribute to true for any field that has not changed. That way they would not exist in the POST. The only way you would know which ones to disable is to store the initial values (in JS probably for ease of comparison). Then on form submit, loop through the fields and disable all the ones that have not changed.
document.getElementById('lb_1').disabled = true; // example of how to disable field
I can provide more example code if you like.
Ok, thanks to your tips I came up with this client-side solution:
I added a hidden form text field right before each listbox that contains the original value. The hidden field and the list boxed are named with the same unique suffix so I know which one belongs to which.
When the form is passed the PHP loop looks like this:
foreach($_POST as $key=>$value) {
if (substr($key,0,3)== "lb_" ) {
if ($_POST[hidden_name] != $value) {
setNewValue($value);
}
}
}
This is a lot faster than accessing the database for each compare since the values are already available in the $_POST array.
Thanks for your help.
I've a jQuery code which show/hide some disabled fields, based on an user select option:
$('.fieldcontent').not('.info').hide();
$('#selector_cs').change(function() {
$('.fieldcontent').customFadeOut(100);
$('.' + $(this).val()).customFadeIn(900);
$('input').prop('disabled',false);
$('textarea').prop('disabled',false);
$('select').prop('disabled',false);
});
});
The big headache is: if one or more fields are fading in, these fields doesn't pass my php validation, nor submitting the form.
If javascript is disabled on all browsers, the form works perfectly.
PHP validation is
if(!isset($_POST['products'])) {
$products[2] = clean_var($_POST['products']);
}
else {
$error = 1;
$products[3] = 'color:#FF0000;';
}
for all fields
Is there any php /jquery solution (no ajax please, 'cause i won't make the whole form again, and don't know anything about ajax)?
Thanks in advance for help
EDIT: Just detected another error: If the jquery script fadein another section of the form, PHP doesn't validate it anymore. Why? Never had problems like this with php-jquery.
If you leave them enabled, but change the property type to hidden then PHP should see the fields when you submit them.
Update
How about the following scenario:
5 fields shown
start-hiding two fields (A+B)
'add' two type=hidden fields with the same name as A+B and copy their current value from A+B to `A+`B
PHP should see these two hidden fields instead of the fields that are currently fading out.
If the user did not submit while fading out, then when the fields have faded out remove the `A+`B fields and set the property of the two faded fields to hidden
Inverse this for showing them fields again.
Do take note that this is not a problem caused by PHP but caused by how/when a browser interprets a form field to be a valid form field to be send when submitting the form
All,
I have the following bit of PHP to check a checkbox:
<input type="checkbox" name="check_out_gear[]" id="'.$resultsetgear['gear_checkout_id'].'" value="'.$resultsetgear['gear_checkout_id'].'" class="gear_checkout_checkbox" checked disabled>
That code works fine and the checkbox is checked and it is disabled. I'm checking to see if it at least one checkbox is checked by using the following jQuery:
var fields = jQuery(".gear_checkout_checkbox").serializeArray();
if (fields.length == 0)
{
jQuery.wl_Alert('Please select a piece of equipment that you\'re checking out!','warning','#no_answers','#workform', {sticky:false});
one_selected = false;
}
When that checkbox is checked and disabled the length is always 0. However as soon as I remove the disabled from the code it has a length of at least 1. Any idea how I can get this code to work with a disabled checkbox?
serializeArray mimics a form submitting. When a form is submitted, disabled elements do not get sent.
Use is(":checked") instead.
jQuery(".gear_checkout_checkbox").is(":checked")
From the docs:
The .serializeArray() method uses the standard W3C rules for
successful controls to determine which elements it should include; in
particular the element cannot be disabled and must contain a name
attribute.
This is documented behavior for disabled inputs. From the jQuery docs on .serializeArray():
The .serializeArray() method uses the standard W3C rules for successful controls to determine which elements it should include; in particular the element cannot be disabled and must contain a name attribute.
Just check for the length of the checked boxes using the :checked selector [jQuery docs], like so:
if (jQuery(".gear_checkout_checkbox:checked").length === 0)
A disabled checkbox will not be sent, regardless of whether it is checked or not. Therefore it won't be picked up by serializeArray. You should check whether the checkbox itself is checked, not if it would be submitted.
A disabled input will not show up because it is disabled. The fact that it is checked is of no consequence.
If you're using jQuery to enable and disable the checkbox, you could use jQuery to also set a value on a hidden input when disabling the checkbox (and to change it again when the checkbox is enabled again). You can then process the hidden input along with the checkboxes and do the correct thing.
Another possibility is to not disable the checkbox at all, but then use CSS changes to indicate it is locked and catch the onchange event to prevent it from being modified.
You can use length property of jQuery object not the length of the array that is returned by serializeArray() method, try the following:
if ($(".gear_checkout_checkbox:checked").length === 0) {
jQuery.wl_Alert('Please select a piece of equipment that you\'re checking out!','warning','#no_answers','#workform', {sticky:false});
one_selected = false;
}
Ok, consider this problem. I have a list of email addresses and each email address has a checkbox which marks them as valid or not. OK, so the user can go and check/uncheck each one of the email addresses manually or he can click on a button that selects or deselects all the checkboxes.
However, my problem is, when the user clicks on that button that selects/deselects all the checkboxes, how would the program know in what state all the checkboxes are? I mean:
if (all checkboxes are checked)
{ uncheck all}
else
{ check all }
I cannot just go and take the value of the first row, since:
1. User may have checked/unchecked it manually
2. That ID may no longer be present in the db.
Please help me.
I think you are looking at this the wrong way. I would suggest having a checkbox as your toggle (as sites/apps do). Then the state of the checkbox is dependant whether all other checkboxes are selected.
You could do it with variables / flags but this look intuitive to me. here is an example - code is a bit rushed :)
http://jsbin.com/uyapi4
Just look at the first row, and then apply the opposite state to all checkboxes.
If there is an ID no longer in the database, that is a separate issue that you handle with server-side code, either by ignoring it, or by throwing a validatione error back to the user.
The way this is worded it makes me think this is a usability question as opposed to a programming question. Take a look at gmail and the ui they use for toggling selected emails. There is basically a checkall box at the top of the list which grays in checked if an email is checked. If you click it then it toggles everything to unchecked and switches to unchecked itself. If you click again it selects all. I think this UI works well.
Not sure if its what your are looking for, hope it help.
// Will select all checkbox input not checked, and checked them.
$(".checkbox-class:not(:checked)").attr('checked', true);
No tested.
Not entirely sure whether you're asking a UX question or a technical question. So I'll answer both. :-)
From a UX perspective, FWIW (and this may be off-topic), usually with an "all" button that toggles between "all" and "none", this is the state map I use:
all are checked => uncheck all
none are checked => check all
some are checked => check all
If you do that, this is really easy:
var cbs;
cbs = $(container).find('input[type=checkbox]');
cbs.attr('checked', cbs.not(':checked').length > 0);
Live example
...assuming all of these checkboxes are in some kind of container (e.g., a form or some div within the form, etc.).
If you want to do something else, you can still have jQuery to count the checked ones for you:
var cb, total, checked;
cb = $(container).find('input[type=checkbox]');
total = cb.length;
checked = cb.filter(':checked');
if (checked == total) {
// They're all checked
}
you can use this assuming you have all the checkboxes named email[]
Add this to the head of the page or in the script file you have:
<script type="text/javascript">
function checkAll()
{
checkBoxes = document.getElementsByName('email[]')
for(i=0;i<checkBoxes.length;i++)
if(!checkBoxes[i].checked)
checkBoxes[i].checked = true
}
function uncheckAll()
{
checkBoxes = document.getElementsByName('email[]')
for(i=0;i<checkBoxes.length;i++)
if(checkBoxes[i].checked)
checkBoxes[i].checked = false
}
</script>
and this in the body of the page:
Check All || Uncheck All
or add it as a button but dont forget to use"javascript:checkAll()"and"javascript:uncheckAll()"`
or store the state in a variable and do something like this?:
http://www.jsfiddle.net/EQuvq/12/
It sounds like you want two separate events: Select All and Deselect All. The most straightforward way to handle this is to have two separate buttons (or selections in a drop-down, whatever).
In this case, you'd want something like (in JavaScript using jQuery):
function selectAll() {
$(":checkbox").attr("checked", true);
}
function deselectAll() {
$(":checkbox").removeAttr("checked");
}
It's within the current HTML spec that the "checked" attribute have no value, but. If you're unsure about this, you can always use .attr("checked", true) instead.
If, on the other hand, you're looking for a function that toggles the state of each checkbox, then...
function toggleChecked() {
$(":checked").each(function() {
var checkedState = $(this).attr("checked");
$(this).attr("checked", !checkedState);
});
}
If, finally, you're looking for a function that assigns a checked state to all checkboxes, then...
function setChecked(state) {
$(":checked").attr("checked", state);
}