Skip to main content

Jquery Set Custom Data Attribute Value Example

Hii guys,

In this artical, we will learn how to get custom attribute value in jquery and how to set custom attribute value in jquery. we will use attr() and data() for getting custom attribute value and set custom attribute value in js.

We can easily set data attribute value in jquery, also you can do it same thing with custom attribute value in jquery.

Example 1:

First Example Using jquery data() function



<!DOCTYPE html>
<html>
<head>
    <title>Jquery Set custom data attribute value</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
  
<div id="example1">Click Here:</div><br>
<button class="set-attr">Set Attribute</button>

<script type="text/javascript">
 
$(".set-attr").click(function(){
    $("#example1").data('my-name', 'nicesnippets');

    var name = $("#example1").data('my-name');
    alert(name);
});
  
</script>
  
</body>
</html>
Example 2:

Second Example Using jquery attr() function


<!DOCTYPE html>
<html>
<head>
    <title>Jquery Set custom data attribute value</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
  
<div id="example1">Click Here:</div><br>
<button class="set-attr">Set Attribute</button>

<script type="text/javascript">
 
$(".set-attr").click(function(){
    $("#example1").attr('my-name', 'nicesnippets');

    var name = $("#example1").attr('my-name');
    alert(name);
});
  
</script>
  
</body>
</html>

It will help you...

Labels:

Comments

Post a Comment

Popular posts from this blog

React Native Flexbox Tutorial With Example

Hi Dev, Today, I will learn you how to create flexbox in react native. You can easily create flexbox in react native. First i will import namespace View , after I will make flexbox using View tag in react native. Here, I will give you full example for simply display flexbox using react native as bellow. Step 1 - Create project In the first step Run the following command for create project. expo init flexbox Step 2 - App.js In this step, You will open App.js file and put the code. import React, { Component } from 'react' import { View, StyleSheet } from 'react-native' const Home = (props) => { return ( <View style = {styles.container}> <View style = {styles.redbox} /> <View style = {styles.greenbox} /> <View style = {styles.corolbox} /> <View style = {styles.purplebox} /> </View> ) } export default Home const styles = StyleSheet.create ({ container: { flexDirection:...
Post a Comment
Read more

Laravel 6 validation required if another field is empty

Hii guys, In this artical, i will give you example of laravel 6 in validation required if another field is empty. We know laravel provide several in-built laravel 6 validation required_without . If you need to add validation rules like required if other field is empty in laravel then you can do it using required_without. I am going to explain you, If you can not enter test (field) value at that time test1 (field) is required. So at that time you can add validation required_without. So, you can use this way: "test1" =>"required_without:test" Example: public function store(Request $request) { $request->validate([ "test" =>"required", "test1" =>"required_without:test" ]); dd("Done!"); } If return validation error otherwise show Done!. It will help you...
Post a Comment
Read more

laravel Basic Validation Example

Hii guys, In this artical, i will give you example of laravel Basic Validation Example. Laravel ships with a simple, convenient facility for validating data and retrieving validation error messages via the Validation class. Basic Validation Example $validator = Validator::make( array('name' => 'Dayle'), array('name' => 'required|min:5') ); The first argument passed to the make method is the data under validation. The second argument is the validation rules that should be applied to the data. It will help you...
Post a Comment
Read more