How can I validate radio buttons? Because this won't work at all. The radio button name and ID is billable and their value is either yes or no.
function formValidator() {
var errors = new Array();
if($("#billable").checked == false) {
errors[0] = "*Billable - Required";
}
if(errors.length > 0) {
var error_msg = 'Please review:';
for(i=0;i<errors.length;i++) {
if(errors[i]!=undefined) {
error_msg = error_msg + "\n" + errors[i];
}
}
alert(error_msg);
return false;
}
return true;
}
Change to
$("#billable:checked").size()
Using $("#billable").checked you will get undefined, because this property doesn't exist.
With $("#billable:checked").size() you will get how many checked radios do you have (0 or 1)
See in jsfiddle.
if you try sometime with the JQuery validation plugin, all you will need is something like:
rules: {
'billable[]':{ required:true }
}
Edited:
as this post, this will help you:
var iz_checked = true;
$('input').each(function(){
iz_checked = iz_checked && $(this).is(':checked');
});
if ( ! iz_checked )
Related
I'm trying to implement an expanding searchbox in wordpress. I have applied the HTML in my search-form.php and CSS in my style.css. However, I'm not sure how to apply the Jquery part. Is it as follows:-
add_action ('wp_footer','vr_search_head',1);
function vr_search_head() {
?>
<script>
$(document).ready(function(){
var submitIcon = $('.searchbox-icon');
var inputBox = $('.searchbox-input');
var searchBox = $('.searchbox');
var isOpen = false;
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('searchbox-open');
inputBox.focus();
isOpen = true;
} else {
searchBox.removeClass('searchbox-open');
inputBox.focusout();
isOpen = false;
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
$(document).mouseup(function(){
if(isOpen == true){
$('.searchbox-icon').css('display','block');
submitIcon.click();
}
});
});
function buttonUp(){
var inputVal = $('.searchbox-input').val();
inputVal = $.trim(inputVal).length;
if( inputVal !== 0){
$('.searchbox-icon').css('display','none');
} else {
$('.searchbox-input').val('');
$('.searchbox-icon').css('display','block');
}
}
</script>
<?php
}
search box from http://codepen.io/nikhil/pen/qcyGF/
I tried applying the above code in my child themes functions.php but it doesnt seem to work. On clicking search, the search box doesnt open.
Thanks
I have a long form, that's a sliding page form so that it is broken up into parts for the user.
I do my error checking through jQuery, here is the code:
$("input.next").click(function(e) {
e.preventDefault();
var stage = ((($("#container").position().left) / 950) * -1) + 1;
var thispage = $(this).closest("div.page");
var errors = false;
var isFinal = $(this).hasClass("send");
thispage.find("input.txt").each(function () {
if(($(this).val() == "") && (!$(this).hasClass("optional"))) {
$(this).css("background","#FFE5E5");
errors = true;
} else {
$(this).css("background","#E5FFEA");
}
});
thispage.find(".checkbox").each(function () {
if(!$(this).is(':checked')) errors = true;
});
if(thispage.find("#profileimage").val() == "") errors = true;
thispage.find("textarea.txt").each(function () {
if(($(this).val() == "") && (!$(this).hasClass("optional"))) {
$(this).css("background","#FFE5E5");
errors = true;
} else {
$(this).css("background","#E5FFEA");
}
});
if(!errors) {
// if no errors, slide to next page.
if(!isFinal) {
thispage.find("div.errormessage").fadeOut(50);
$("#container").animate({left: "-=950px"}, 800, function () {
$("ul#stages li").removeClass("active");
$("ul#stages li.stage"+stage).addClass("active");
console.log("Stage: " + stage);
});
}
} else {
thispage.find("div.errormessage").fadeIn(100);
}
console.log("isFinal: " + isFinal);
console.log("Errors: " + errors);
if((isFinal) && (!errors)) {
console.log("submitting form...");
$("#enrolform").submit(); }
});
However when the div.next.send button is pressed, it has a name of sendapplication and in my PHP code I am using:
if(isset($_POST['sendapplication'])) {
..To check whether the entire form was submitted or not. The reason I need to do this is because I also have a 'save' feature of the form, which allows the user to save the data and come back later.
The problem is when the user clicks 'sendapplication' button I don't get that through in the $_POST or $_REQUEST variables. And I think the reason why is because it's the jQuery script that's sending it, and not the button. The button is suppressed because of the e.preventDefault() line.
How can I check that that particular button was pressed? is there someway I can manipulate the .submit() function?
You can add following code into the click() method:
var self= $(this),
form = self.closest(form),
tempElement = $("<input type='hidden'/>");
// clone the important parts of the button used to submit the form.
tempElement
.attr("name", this.name)
.val(self.val())
.appendTo(form);
See jQuery submit() doesn't include submitted button for more details
Anthony Grist's comment is probably a lot better solution to this :)
I'm a newbie in javascript, so i need all your help.
So basically i'm trying to do ondrop function(validate), so when I drop something for the first time, the validate function will run and drop the div value from the php. But for the second time and so on, if I dropped the same div value I want it to alert duplicate and remove that div element(the duplicate), but I'm unsuccessfull in detecting the duplicate div.
Can anyone tell me whats wrong with my code?
I have a javascript, php, and html like this:
<script type="text/javascript">
function dragIt(target, e) {
e.dataTransfer.setData('div', target.id);
return false;
}
function validate(target, e){
var id = e.dataTransfer.getData('div');
var clone = document.getElementById(id).cloneNode(true);
var allValues = [];
for (i=0; i<clone.length; i++)
{
if (clone[i].value != "")
{
allValues[i] = clone[i].value.toLowerCase();
}
}
allValues.sort();
var uniqueValues = [];
var idx = 0;
var prevValue = allValues[0];
var currValue = allValues[0];
for (i=0; i<allValues.length; i++)
{
currValue = allValues[i];
if (currValue != prevValue){idx++;}
uniqueValues[idx] = currValue;
prevValue = currValue;
}
if (uniqueValues.length != allValues.length)
{
e.preventDefault();
clone.parentNode.removeChild(clone);
alert('Cannot submit duplicate entries');
return false;
}
else {
alert(clone.id);
e.preventDefault();
target.appendChild(clone);
return true;
}
}
I have implemented the functionality to remove users from the database in my application. A user chooses user(s) (checkboxes) and clicks submit. A confirmation box is shown asking the user if he wants to delete username. Everything works except that if Cancel is clicked the user(s) still gets removed.
Why is that and how could I prevent it (I have check and return false runs)
from usercontroller.php:
if ($userView->TriedToRemoveUser()) {
$userIds = $userView->GetUsersToRemove();
if ($userIds != 0) {
$removeTry = $userHandler->RemoveUser($userIds);
if ($removeTry) {
$xhtml = \View\UserView::USER_REMOVED;
}
else {
$xhtml = \View\UserView::FAILED_TO_REMOVE_USER;
}
}
}
from userview.php:
public function TriedToRemoveUser() {
if (isset($_POST[$this->_submitRemove])) {
return true;
}
else {
return false;
}
}
from the js.file:
$('#form3').submit(function() {
$('input[type=checkbox]').each(function () {
if( this.checked ) {
var username = $(this).attr('user');
var confirmBox = confirm('Do you really want to remove the user ' + username + ' ?');
if (!confirmBox) {
return false;
}
}
});
});
Returning false from the .each() does not stop the submit, store that value in a variable and return that variable.
$('#form3').submit(function() {
var submit = true;
$('input[type=checkbox]').each(function () {
if( this.checked ) {
var username = $(this).attr('user');
var confirmBox = confirm('Do you really want to remove the user ' + username + ' ?');
if (!confirmBox) {
submit = false;
return false;
}
}
});
return submit;
});
(WARNING: All code is off the top of my head and not properly tested)
Assuming you are talking about the return false; statement in the javascript:
The return false; will not prevent the submit method as it is only breaking from the .each() method. All this will do is stop the iteration over the checkboxes.
Try something like:
$('#form3').submit(function () {
var doDelete = true;
$('input[type=checkbox]').each(function () {
// ...
if (!confirmBox) {
doDelete = false;
return false; // Deletion has been cancelled so there is no need to continue the iteration
}
});
if (!doDelete) {
return false;
}
});
This will prevent the entire form from being submitted if the user cancels any of the selected users. If you're intention is to continue to submit any confirmed users you could try something like the following:
$('#form3').submit(function () {
$('input[type=checkbox]').each(function () {
// ...
if (!confirmBox) {
$(this).attr('checked', false); //Uncheck this box so that it isn't submitted
}
});
});
I want to validate radio button, when i checked radio button textbox will be disabled,
but it cant happens.
what will be the exact js for validate radio button.
My JS code is :
function selection_project_phd()
{
var phds = document.getElementById('EmployeeGuidedProjectPhd').value;
var projs = document.getElementById('EmployeeGuidedProjectProject').value;
var course_name = document.getElementById('EmployeeGuidedProjectCourseName').value;
if(phds == 1)
{
course_name.disable=true;
return false;
}
else
if(projs==0)
{
course_name.disable=false;
return false;
}
return true;
}
This one is View file .ctp code
Phd
Project
function selection_project_phd() {
var phds = document.getElementById('EmployeeGuidedProjectPhd').checked;
var projs = document.getElementById('EmployeeGuidedProjectProject').checked;
var course_name = document.getElementById('EmployeeGuidedProjectCourseName');
if(phds) { course_name.disable=true; return false; }
else if(projs !== true ) { course_name.disable=false; return false; }
return true;
}