Jquery all time methods and functions

December 18, 2017

Hello, welcome to therichpost.com. In this post, I will tell you Jquery all time methods and functions. I personally like jquery very much. Most of my code is full with jquery. When I stuck in php or other language then that stuckness I remove with jquery code.

Today In this post, you will more code related to jquery.

1. jquery differents click functions:

$(“Div#id”).click(function(){
//you code
});

// for dynamic htmls

$(“Div#id”).on(‘click’, function(){
//you code
});

$(“Div#id”).on(‘click’, ‘.divclass’, function(){
//you code
});

2. Open Bootstrap Modal Popup with jquery:

$(‘#ModalId’).modal(‘show’);

3. Add css to div with jquery:

$(‘#DivId’).css(‘width’, ‘100px’);

4. Remove commas in array data with jquery:

arr.join(“\n”)

There are so many jquery code, tricks and i will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com

Comments

48 responses to “Jquery all time methods and functions”

February 22, 2018

alexa

// jquery custom validations on button click

$(“.formbtn”).on(“click”, function(){

var i=0;
var j=0;
if($(“#firstname”).val()==””)
{
i = 1;
$(“#firstname”).css(“border”, “1px solid red”);
}
else
{
i = 0;
$(“#firstname”).css(“border”, “1px solid rgba(0, 0, 0, 0.15)”);
}

if($(“#lastname”).val()==””)
{
j=0;
$(“#lastname”).css(“border”, “1px solid red”);
}
else
{
j = 0;
$(“#lastname”).css(“border”, “1px solid rgba(0, 0, 0, 0.15)”);
}

if(i==0 && j==0)
{
alert(“All Done :)”);
}
else
{
alert(“All Not Done :(“);
}

});

Reply
February 22, 2018

alexa

// get select box text value on change event

$(“.addnewservice .select-service”).on(“change”, function(){
var optionSelected = $(this).find(“option:selected”);
var valueSelected = optionSelected.val();
var textSelected = optionSelected.text();

});

Reply
1. February 22, 2018
  
  therichpost
  
  thank you alexa
  
  Reply
February 23, 2018

alexa

Here more:
========

set default flag in intl-tel-input
open -> intlTelInput.min.js -> find-> preferredCountries-> add county code:
That is it

Reply
February 25, 2018

sneha

Please help:

How to write a JavaScript code using if condition….user status should active its show green color button on…..it user status is disable it shows red color button

Reply
February 25, 2018

therichpost

Here you can check the answer:

if($(“#divwhereuserstatus”).text()==”active “)
{
$(“#button”).css(“background-color”, “green”);
}
else
{
$(“#button”).css(“background-color”, “red”);
}

Hope this solve your problem..

Reply
February 25, 2018

sneha

sir how to do this through using ajax call using if condtion in javascrit

Reply
1. February 25, 2018
  
  therichpost
  
  for ajax use this:
  
  $.ajax({
  type: ‘POST’,
  url: “url.php?action=saveData”,
  data: data,
  success: function(resultData) { if($(“#divwhereuserstatus”).text()==”active “)
  {
  $(“#button”).css(“background-color”, “green”);
  }
  else
  {
  $(“#button”).css(“background-color”, “red”);
  } }
  });
  
  Reply
February 25, 2018

sneha

okay sir

Reply
1. February 25, 2018
  
  sneha
  
  success: function( result){
  console.log(result);
  if(userstatus == 1){
  $(“#active”).show();
  }
  else{
  
  $(“#inactive”).show();
  like this but i m not getting
  
  Reply
February 25, 2018

sneha

success: function( result){
console.log(result);
if(userstatus == 1){
$(“#active”).show();
}
else{

$(“#inactive”).show();
like this but i m not getting

Reply
1. February 25, 2018
  
  therichpost
  
  fine…
  
  Reply
February 25, 2018

sneha

but i m not getting output sir

Reply
1. February 25, 2018
  
  therichpost
  
  give me your file or complete code for this..
  
  Reply
February 25, 2018

sneha

var error = “”;
$(document).ready(function(){
$(“#submit”).on(“click”, function(){
$(“.error”).html(“”);
var number = $(“#zip”).val(),
userstatus = 1;

flag = true;

if(number === “” || !regex(number)){
error= “Enter correct 6 digit number Eg:123456”;
flag = false;
}

if(!flag){
$(“.error”).html(error).css({“color”:”#FF0000″ , “font-weight”:”bold” , “text-align”: “center” , “margin”: “px 0px”});
}
else{
$.ajax({

data : {“layout” : 1000, “fname” :name ,”lname”:lname, “email”: email, “password” : password , “gender” : gender},
method : “POST”,
success: function( result){
console.log(result);
if(userstatus == 1){
$(“#active”).show();
}
else{

$(“#inactive”).show();

}
},

})
}

})

})

html

Enter Your Details
Active
Inactive

Reply
February 25, 2018

sneha

Enter Your Details
Active
Inactive

Reply
February 25, 2018

sneha

var error = “”;
$(document).ready(function(){
$(“#submit”).on(“click”, function(){
$(“.error”).html(“”);
var number = $(“#zip”).val(),
userstatus = 1;

flag = true;

if(number === “” || !regex(number)){
error= “Enter correct 6 digit number Eg:123456”;
flag = false;
}

if(!flag){
$(“.error”).html(error).css({“color”:”#FF0000″ , “font-weight”:”bold” , “text-align”: “center” , “margin”: “px 0px”});
}
else{
$.ajax({

data : {“layout” : 1000, “fname” :name ,”lname”:lname, “email”: email, “password” : password , “gender” : gender},
method : “POST”,
success: function( result){
console.log(result);
if(userstatus == 1){
$(“#active”).show();
}
else{

$(“#inactive”).show();

}
},

})
}

})

})

Reply
February 25, 2018

sneha

HTML

Enter Your Details
Active
Inactive

Reply
1. February 25, 2018
  
  therichpost
  
  Okay let me know you….
  
  Reply
February 26, 2018

sneha

how to pass this value n id at the time of onsubmit in javascript

Reply
1. February 26, 2018
  
  therichpost
  
  here is an example:
  
  document.getElementById(“myForm”).onsubmit = function() {
  alert(document.getElementById(“textboxid”).value);
  }
  
  Reply
February 28, 2018

sneha

sir i want to learn javascript n jquery can u suggest links n tutorilals

Reply
1. February 28, 2018
  
  therichpost
  
  I can teach you..
  
  Reply
March 1, 2018

nina sheikh

sir if i need any help regarding coding validation wud u guide me

Reply
1. March 1, 2018
  
  therichpost
  
  please check here
  https://therichpost.com/learn-jquery
  
  Reply
March 8, 2018

nina sheikh

sir y is localstorage.getitem is used

Reply
1. March 8, 2018
  
  therichpost
  
  The localstorage.getitem() method of the Storage system, when passed a key name, will return that key’s value.:
  ======================
  var currentColor = localStorage.getItem(‘bgcolor’);
  document.getElementById(‘bgcolor’).value = currentColor;
  
  //also you can store temprary value like below method
  // Save data to the current local store
  
  localStorage.setItem(“username”, “John”);
  
  // Access some stored data
  alert( “username = ” + localStorage.getItem(“username”));
  
  Reply
March 8, 2018

nina sheikh

its like when we login as a user his details shud b appeared on top right corner ..like example in gmail we login n compose mail everythin n wen to signout wil go to our profile pic n signout ryt…..it should show our profile until we are in that page ..otherwise logout

Reply
1. March 8, 2018
  
  therichpost
  
  They are called sessions. Store user information through login.
  
  Reply
March 8, 2018

nina sheikh

//also you can store temprary value like below method
// Save data to the current local store

localStorage.setItem(“username”, “John”);

// Access some stored data
alert( “username = ” + localStorage.getItem(“username”));

how to access using json

Reply
March 8, 2018

nina sheikh

yea sessions….n hav to access data thru json

Reply
1. March 8, 2018
  
  therichpost
  
  First tell me which framework you are working?
  
  Reply
March 8, 2018

nina sheikh

yea these session hav to access it through json

Reply
1. March 8, 2018
  
  therichpost
  
  First tell me which framework you are working?
  
  Reply
March 8, 2018

nina sheikh

bootstrap

Reply
1. March 8, 2018
  
  therichpost
  
  we cannot get json data in bootstrap or you can create it static data?
  
  Reply
  1. March 8, 2018
    
    nina sheikh
    
    how
    
    Reply
March 8, 2018

therichpost

with this we create custom json data in js:

var data = {‘name’: ‘therichpost’, ‘age’: 1};

Reply
March 8, 2018

therichpost

with this we create custom json data in js:

<script type=”text/javascript”>
var data = {‘name’: ‘therichpost’, ‘age’: 1};
</script>

Reply
March 8, 2018

nina sheikh

this thing hav to put in js folder..
actually i tried with
if(session === “”){
localStorage.getItem(“session”);
{“session” :
{ “name”: “abc”}
}
window.location=”login.php”;
}

Reply
1. March 8, 2018
  
  therichpost
  
  try this:
  
  var session = { ‘session’: ‘abc’};
  localStorage.setItem(‘session’, JSON.stringify(session));
  session = JSON.parse(localStorage.getItem(‘session’));
  if(session[‘session’]!=””)
  {
  window.location=”login.php”;
  }
  
  Reply
March 8, 2018

therichpost

try this:

var session = { ‘session’: ‘abc’};
localStorage.setItem(‘session’, JSON.stringify(session));
session = JSON.parse(localStorage.getItem(‘session’));
if(session[‘session’]!=””)
{
window.location=”login.php”;
}

Reply
March 8, 2018

nina sheikh

i tried

Reply
1. March 8, 2018
  
  therichpost
  
  Okay then what?
  
  Reply
March 8, 2018

nina sheikh

its not taking

Reply
1. March 8, 2018
  
  therichpost
  
  but I checked above code and it is working.
  Did you paste that code in script tags?
  
  Reply
2. March 9, 2018
  
  therichpost
  
  we can get localStorage data in whole website:
  if (localStorage) {
  var data = JSON.parse(localStorage.getItem(‘session’));
  alert(data[‘session’])
  }
  
  Reply