Change – Select – Submit Methods jQuery

In This Blog, you are going to learn 3 very useful methods of jQuery, where is very beneficial for jQuery Client Side Scripting, Change, Select And Submit Method. Change And Submit used more often in the websites developed using jQuery.

jQuery change() Method

• The change event occurs when the value of an element has been changed (only works on , and <select> elements). </p>
• The change() method triggers the change event, or attaches a function to run when a change event occurs.

Source Code Of Change Method jQuery

<label for="txt">Enter Name</label>
<input type="text" name="" id="txt">

<script src="JQuery.js"></script>
<script>
$(document).ready(function(){
   $("#txt").change(function(){
     alert("You have changed the text " + $(this).val());
   });
});
</script>

Another Example Of Change Method jQuery

<label for="">Select Country</label>
    <select name="" id="country_list">
        <option value="-1">Select</option>
        <option value="Pakistan">Pakistan</option>
        <option value="India">India</option>
        <option value="Srilanka">Srilanka</option>
        <option value="Bangladesh">Bangladesh</option>
    </select>
<script src="JQuery.js"></script>
<script>
$(document).ready(function(){
   $("#country_list").change(function(){
                
                var country = $("#country_list").val();
                if(country == "-1")
                {
                   alert('Please Select a Country');
                }
                else
                    {
                        $("#result").text("Selected Country: " + country);
                    }
                
            });
});
</script>

jQuery select() Method

• The select event occurs when a text is selected (marked) in a text area or a text field.
• The select() method triggers the select event, or attaches a function to run when a select event occurs.

Source Code Of Select Method jQuery

<label for="txt">Enter Name</label>
<input type="text" name="" id="txt">

<script src="JQuery.js"></script>
<script>
$(document).ready(function(){
    $("#txt").select(function(){
          
      alert("You have Select the text " + $(this).val());
   });
});
</script>

jQuery submit() Method

• The submit event occurs when a form is submitted.
• This event can only be used on elements.
• The submit() method triggers the submit event, or attaches a function to run when a submit event occurs

Source Code Of Submit Method jQuery

<form id="myForm">
    
<input type="text" required placeholder="Enter First Name" name="" id="txt1">
        <br><br>
<input type="text" required placeholder="Enter Last Name" name="" id="txt2">
        <br><br>
<!--        <input type="submit" value="Submit">-->
        <button type="submit" value="Submit">Submit</button>
    
    </form>
    <h2 id="result"></h2>

<script src="JQuery.js"></script>
<script>
$(document).ready(function(){
    $("#myForm").submit(function(){
                var fname = $("#txt1").val();
                var lname = $("#txt2").val();
                alert("Your Full Name is: " + fname + " " + lname);
//              alert("Form has been submitted..");
            });
});
</script>

    

Click Below Link to Download Notes & Source Code Of This Blog

https://www.mediafire.com/file/m83gm36rg1m93rj/CHANGE+SELECT+SUBMIT+JQUERY.rar/file