Scribd
Upload
22 views

Jquery Notes

The document discusses various jQuery methods for interacting with DOM elements including: 1. Using click() to handle click events on elements and log messages to the console. 2. Using the attr() method to get, set, and change attributes like IDs, widths, and form values. 3. Submitting AJAX requests on form submits and handling the response, including submitting image uploads. 4. Getting and setting selected options in select elements from arrays. 5. Using javascript:void(0) to create anchor tags that don't trigger page redirects.

Uploaded by

Shashank Sajjan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
22 views

Jquery Notes

The document discusses various jQuery methods for interacting with DOM elements including: 1. Using click() to handle click events on elements and log messages to the console. 2. Using the attr() method to get, set, and change attributes like IDs, widths, and form values. 3. Submitting AJAX requests on form submits and handling the response, including submitting image uploads. 4. Getting and setting selected options in select elements from arrays. 5. Using javascript:void(0) to create anchor tags that don't trigger page redirects.

Uploaded by

Shashank Sajjan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

jQuery

Button click() Method


    $("p").click(function(){
        console.log(The paragraph was clicked.");
    });
Get Attribute attr() Method
    $(".btn").click(function(){
        id = $(this).attr("data-id");
        console.log(id);
    });
Set Attribute attr() Method
    $("button").click(function(){
    $("img").attr("width","500");
    });
Set or Change Form Input Value Based on the name Attribute
   $('input[name=username]').val("username1");
Set or Change Form Select Value
    var value = "valueIntChar";
    $("#selectInputId option[value='"+value+"']").attr("selected","selected");

Reset or Clear the Select Input’s selected attribute


    $('#selectInputId option:selected').removeAttr('selected');

jQuery Functions

jQuery Ajax
Ajax on form submit
    $("#myformName").submit(function(e) {
        e.preventDefault();
        $.ajax({
            url: 'ajax.php?action=save_data',
            method: "POST",
            data: $(this).serialize(),
            success: function() {
                alert("Success");
            }
        })
    })
Ajax form submit with an image
    $('#image-form).submit(function(e) {
        e.preventDefault();
        $.ajax({
            url: 'ajax.php?action=save_image',
            data: new FormData($(this)[0]),
            cache: false,
            contentType: false,
            processData: false,
            method: 'POST',
            type: 'POST',
            success: function() {
                    alert("Data successfully added", 'success')
                }
            }
        })
    })
Here contentType and processData attributes are very important, since the image cannot be
processed with serialize function.

Get Selected Array From Form Select Options


var val1=[];
  $('select[name="array_name[]"] option:selected').each(function() {
    val1.push($(this).val());
  });
  console.log(val1);
Set Options as Selected From Array
    var values = ["2","3","5"];
    $.each(values.split(","), function(i,e){
        $("select[name='arr_name[]'] option[value='" + e +
"']").prop("selected", true);
    });
Void Javascript anchor href Method
 <a href="javascript:void(0)">No Redirection</a>

You might also like