jQuery Tutorial: Learn jQuery For Free with example | Atcodex

How to Check Atleast One Checkbox is Checked or Not in JQuery?

atcodex — Thu, 07 Oct 2021 08:02:15 +0000

In this tutorial, we will show you how to check at least one checkbox is checked or not in jquery. We have tried to explain this simple step by step. you can see jquery for least one checkbox checked.

we have used a form selector to target the form and a function will execute whenever someone tries to submit the form. This function will check if at least one check box is checked or not.

we have used if the condition inside this function if at least one input type checkbox is check, the condition will output true. For this purpose input:checkbox selector is used to selecting all the checkboxes to check which checkbox is checked.

let’s see bellow example:




    


  

    How to check atleast one checkbox is checked or not in JQuery
    Colors:
  
     Red
     Blue
     Black
     Orange

Hope you liked it.

Remove multiple elements from an array in Javascript/jQuery

atcodex — Mon, 28 Sep 2020 17:31:11 +0000

In this post, we will learn how to Remove multiple elements from an array using Javascript or jQuery give with an example. We can simply remove elements from an array using javascript. Below in the post, we have tried different methods to do the same.

Let’s suppose we have an array in which and we want to remove some particular element from the array without refreshing the page. In that case, we have to use javascript and jquery to remove the element from the array. Because if we go for server-side language then we have to refresh the page or need to get done the same thing with the help of AJAX and backend language. Which is a kind of long and boring task to do. We can simply use javascript, jquery, and some of the other javascript libraries to do it.

Following are the some example we are providing to make you understand about the topic.

Remove element using Vanilla JavaScript

In first, let’s remove the element using simple javascript and jquery, In this, we will use Array.prototype.remove, grep() and inArray() to remove multiple as well as the duplicate value from the array in jquery. However, you can check How to remove duplicate values from an array in PHP




   Jquery Remove Multiple Values from Array Example

Output

Remove element using Using Lodash

To remove an element, we can use an external javascript library called Lodash. Lodash has the remove() method which is very easy to use. All other methods in the Lodash are very easy to use and helpful which can done job for you in a second. You do not need to break the array and manipulate for getting some work done in javascript. It have very helpful built in methods which you can use in any situation in the programming.

In the below code we are just passing the array in _.remove() and in which we have defined callback function when passed argument is == to 3.

NOTE : It make the changes in the existing array value.

var arr = [1, 2, 3, 3, 4, 5];
_.remove(arr, function(e) {
    return e === 3;
});
console.log(arr);

// Output:
// [ 1, 2, 4, 5 ]

Remove element using Using Underscore

We can use Underscore library to solve the same problem. It has _.reject method which is same like _.remove() method in the Lodash. It works similarly like Lodash with some difference which is : it returns the new array after removing the passed value in the array. Old array value remains same.

See the following code for an example:

var arr = [1, 2, 3, 3, 4, 5];
var ret = _.reject(arr, function(e) {
    return e === 3;
});
console.log(arr);
console.log(ret);

// Output:
// [ 1, 2, 3, 3, 4, 5 ]
// [ 1, 2, 4, 5 ]

Conclusion

We have explained 3 different method and by using them you can remove the one or more elements from the array in simple way. I hope you guys have liked the post, if you have any suggestion please comment below., i would love to help you.

The post Remove multiple elements from an array in Javascript/jQuery appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.

jQuery crop and resize an image before upload using PHP

atcodex — Sat, 29 Aug 2020 17:18:34 +0000

Sometimes we need to upload the image to the server with the image crop option. For example, nowadays we can see that most of the website like Facebook, twitter give the option to set the profile picture in circular thumbnail way. You do not get the option to upload your whole profile pic. The picture has to be cropped in a circular and thumbnail format.

In this tutorial, we are going to explain the same thing using the Croppie plugin. In this PHP tutorial, we are going to crop an image using jQuery Croppie plugin and upload the image via Ajax request in PHP.

What is Croppie plugin?

Croppie is an HTML5 canvas-based image cropping library that lets you create a square or circular view of the image and allow you to crop the image with its simple and easy click and crop interface. It is very easy to use and allows the user to navigate on image and crop the only part of the image that the user wants.

I have used it and found it very useful, even I have used it in my personal project. You should give it a try, so let’s move forward and start to know how it works.

Use of Croppie plugin to crop the image

This is a common requirement in all modern web applications where you upload the images, crop the images as required for profile picture or media galleries as a thumbnail.

Create index.html

In this step, we will create a HTML file “index.html” and include the required library for this example.



  PHP and jQuery - Crop Image and Upload using Croppie plugin - atcodex
   
  
  
  

  




  
    PHP and jQuery - Crop Image and Upload using Croppie plugin
    

      
        
        
        
        
        Select image to crop:

Create upload.php

Now we will create a PHP file “upload.php” to move the cropped images into a folder, so create a “uploads” folder, where are our upload file will be saved. You can change it to some other location as you want.

Conclusion

I think the Croppie plugin is very simple and easy to crop the image. The interface and functioning of the plugin are easy. You can crop any type of images like JPG, JPEG, PNG, etc.

If you have any doubts or any query related to this post, please do comment below and let me know, I would love to help you guys. You can also check How to upload a file with JavaScript and PHP

The post jQuery crop and resize an image before upload using PHP appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.

Select box with search option in Jquery with example

atcodex — Sat, 01 Aug 2020 15:39:56 +0000

When it comes to select the data from the drop-down list, if there is no searching in a select box, then it creates little bit trouble for users to navigate on proper data. So it is recommended to keep the searching option in the select box if there are large data.

Today we are going to share the post about a plugin name Chosen Plugin for the select box. It is very simple and easy to integrate into the project.

You have to include required JS and CSS in the main file and need to add the chosen class in the select box where you need searching.

The following is complete code, how to integrate search option in select box.



    Select box with search option in Jquery with example  
    
    
    



    
         Select box with search option in Jquery with example

How to select multiple options from a drop-down list in HTML

You can also integrate the multiple select options. For that, you only need to add multiple in select box





CSS 



CSS code to design the above HTML form. We just added this CSS to improve the form view. Its just optional you can skip this part.



.container{
   margin: 0 auto;
   border: 0px solid black;
   width: 50%;
   height: 250px;
   border-radius: 3px;
   background-color: ghostwhite;
   text-align: center;
}
/* Preview */
.preview{
   width: 100px;
   height: 100px;
   border: 1px solid black;
   margin: 0 auto;
   background: white;
}

.preview img{
   display: none;
}
/* Button */
.button{
   border: 0px;
   background-color: deepskyblue;
   color: white;
   padding: 5px 15px;
   margin-left: 10px;
}



PHP file to upload the image



PHP file upload script. You can check the image type before uploading them on the server. if the image gets uploaded, it shows the path of the image otherwise if there is any problem in image upload it will show you 0.







Uploading Image and Showing Preview using jQuery AJAX



This script contains a jQuery which sends the file to the fileUpload.php. if it gets response 0 from  PHP file it means the file did not get upload, on other than 0 status means the file has been uploaded and then it shows the uploaded image in .preview img class.



  	 $(document).ready(function(){
                    $("#file_upload").click(function(){
                        var fd = new FormData();
                        var files = $('#file')[0].files[0];
                        fd.append('file',files);
                        $.ajax({
                            url: 'fileUpload.php',
                            type: 'post',
                            data: fd,
                            contentType: false,
                            processData: false,
                            success: function(response){
                                if(response != 0){
                                    $("#img").attr("src",response); 
                                    $(".preview img").show(); // Display image 
                                }else{
                                    alert('file not uploaded');
                                }
                            },
                        });
                    });
            });




Output











Download Source Code

The post jQuery ajax image upload in PHP with preview appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.



How to trigger an event in input text after I stop typing/writing
atcodex — Sat, 25 Jul 2020 19:37:40 +0000

Sometimes we need to trigger a subsequent function when performing some task. In this post, we will explain to you how you can trigger callback in jQuery after the user stops typing. 



The callback is used in many ways like we use callback function in AJAX call, autosave something, etc.  In the below code snippet, we have given a textarea. When you stop after writing something then the callback function triggered automatically and alert you the message. In application, you can perform some other activity instead of alert.



This is a useful code that you can use to trigger a call backup function such as autosave, ajax request, spelling check, or something else as per requirements.



//HTML




jQuery code to Trigger callback after the user stops typing.



var x_timer;    
$("#input-box").keyup(function (e){
    clearTimeout(x_timer);
    var user_name = $(this).val();
    x_timer = setTimeout(function(){
       // callback_function();
       console.log("user stopped");
    }, 1000);
});



Complete Code 






    
    
    How to trigger an event in input text after I stop typing/writing














You can also check  Restrict multiple URLs or Email id in the Input field with jQuery validation.
The post How to trigger an event in input text after I stop typing/writing appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.



How to enable and disable the submit button using jQuery?
atcodex — Sat, 25 Jul 2020 19:08:12 +0000

In form submission, we don’t want user to click multiple times on the submit button. You may want to disable the submit button when the form is being submitted to the server because resubmit the same content to the server again and again, may cause script failure. 



To overcome this problem we can simply disable the submit button so the user can not click the button again until it gets released when we get a response from the server. 



In this post we will show you how you can disable the submit button after form submission.



First add the jQuery library so that our function can work.







Use jQuery prop() to disable a button.



//where #submit is id of your form submit button
$("#submit").prop( "disabled", true);



Use true  – when you want to disable the button 
Use false – when you want to enable the button 



If user clicks on submit button, we can disable it like this :



$("#submit").click(function () {
	$(this).prop( "disabled", true);
	//$(this).prop( "disabled", false); //to enable button just set 2nd parameter false
});



Here is the full example






    
    
    How to enable and disable the submit button using jQuery?














Hope it will help.



You can also check Simple jQuery form validation.




The post How to enable and disable the submit button using jQuery? appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.



Restrict multiple URLs or Email id in the Input field with jQuery validation
atcodex — Sat, 25 Jul 2020 13:28:23 +0000

Sometimes we need to restrict users from submitting more than one URL in the HTML form.  In that scenario, we can use the following jQuery code.  We need to use RegEx expression and JavaScript match() function to match the pattern of  input string. When input string gets matched then it compared with allowed variable in the code.  



You can set, how many URLs can be used in textarea. If you will set 2 then it allows only 2 URLs in the textarea.



Create a textarea and submit button :









Add ajax library to run the jQuery code :







Add jQuery code to validate the input string.



var allowed = 1; // how many times url can be allowed
var regex = /https?:\/\/[\-A-Za-z0-9+&@#\/%?=~_|$!:,.;]*/g; //match urls
//var regex = /\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}\b/ig; //match emails

$('#text').on('input', function() {
	var textArea = $(this).val().match(regex); // search string
	if(textArea && textArea.length > allowed){
		$('#submit').prop("disabled", true);
	}else{
		$('#submit').prop("disabled", false);
	}
});







Here we have validated the multiple URL. you can validate the multiple email id also, for email id you can find RegEx expression in the above code, just uncomment that and you can validate the multiple Email id. 



Using different  RegEx expression you can validate the other things like a number, particular string pattern, etc.



NOTE



 /g at the end of regular expression? it stands for “Global search” flag. it returns multiple matched records, without this you will only get last matched record.




Output







The post Restrict multiple URLs or Email id in the Input field with jQuery validation appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.

jQuery Tutorial: Learn jQuery For Free with example | Atcodex

How to Check Atleast One Checkbox is Checked or Not in JQuery?

How to check atleast one checkbox is checked or not in JQuery

Recommended Posts For You

Remove multiple elements from an array in Javascript/jQuery

Remove element using Vanilla JavaScript

Remove element using Using Lodash

Remove element using Using Underscore

Conclusion

jQuery crop and resize an image before upload using PHP

What is Croppie plugin?

Use of Croppie plugin to crop the image

Conclusion

Select box with search option in Jquery with example

Select box with search option in Jquery with example

How to select multiple options from a drop-down list in HTML

CSS

PHP file to upload the image

Uploading Image and Showing Preview using jQuery AJAX

How to trigger an event in input text after I stop typing/writing

jQuery code to Trigger callback after the user stops typing.

How to enable and disable the submit button using jQuery?

Restrict multiple URLs or Email id in the Input field with jQuery validation