Develop Reference

get collection class names from common class name

I want the collection array with 'info', '321' and 'danger' in jquery/Javascript. I'm having following HTML code.
And I have to use '.etape' classname for this.
<input class="etape btn-info others">
<input class="etape btn-321 ">
<input class="etape btn-danger others1">
<input class="etape others">
My worst script:
<script>
$(document).ready(function() {
var myClass;
var classNames = $('.etape').attr('class').split(/\s+/);
$( ".cc" ).each( function(index, item) {
if(item.indexOf("btn-") == 0){
myClass[] = item;
}
});
});
</script>
Please help me.

Here's how to get ["info", "321", "danger"] from the posted markup
var classes = $('.etape').map(function() {
var m = this.className.match(/btn\-(.*?)(?:\s|$)/);
return m ? m.pop().split('-').pop() : m;
}).get().filter(Boolean);
FIDDLE

var collection = [];
var classRegex = /btn-.*\s/;
$(".etape").each(function(index,element) {
var className = $(element).attr('class').match(classRegex);
if(className != null){
var data = className[0].replace("btn-","").trim();
collection.push(data);
}
});

Use CSS attr selectors:
$('[class*="btn-"]').val('hello');
// returns: [<input class=​"etape btn-info others">​, <input class=​"etape btn-321">​, <input class=​"etape btn-danger others1">​]
demo: https://jsfiddle.net/tianes/dx91guLw/

get correct output for correct click

I want to put the value from the input into the div depending upon the key that is pressed.
What is wrong with the code and how to correct it.
<input id = "mp1" /><input id = "mp2" />
<button id="sum1">Submit1</button>
<button id ="sum2">Submit2</button>
<div id="out"></div>
$('button').click(function() {
var k = this.id.substr(this.id.length -1);
var mp = $('#mp'+k).value;
$('#out').html (mp);
});
http://jsfiddle.net/ftE36/1/

You should either use Vanilla JS:
document.getElementById('mp'+k).value;
Or jQuery:
$("#mp"+k).val();
Avoid mix-and-match ;)

As i understand, i think you want something like this:
$('button').click(function(e) {
var k = e.target.id.substr(this.id.length -1);
var mp = $('#mp'+k).val();
$('#out').html (mp);
});
http://jsfiddle.net/jogesh_pi/RM4UQ/

try something like
$(document).ready(function () {
$("#mp1").keypress(function () {
$("#out").html($(this).val());
});
});

Please try the code:
html:
<input id = "mp1" /><input id = "mp2" />
<button id="sum1">Submit1</button>
<button id ="sum2">Submit2</button>
<div id="out"></div>
js:
$('button').click(function(e) {
//var id = e.target.id;
var k = e.target.id.substr(this.id.length -1);
var mp = $('#mp'+k).val();
$('#out').html (mp);
});
Demo
Hope it should helpful for you. Please try and let me know. Thanks.

Accessing <div> elements by name in jQuery

I have the following content in -
var jsonObj = [ {"name" : "Jason"},{"name":"Bourne"},{"name":"Peter"},{"name":"Marks"}];
<!---->
$("#getname").click(function() {
var response = getNames(jsonObj);
$("#nameData").html(response);
});
function getNames(jsonObj){
var response = JSON.stringify(jsonObj);
for ( var i = 0, len = jsonObj.length; i < len; i++) {
var nameVal = jsonObj[i].name;
response = response.replace(nameVal,replaceTxt(nameVal,i));
}
return response;
}
function replaceTxt(nameVal,cnt){
return "<u id='"+cnt+"' name='names' >"+nameVal+"</u> ";
}
$('u[name="names"]').dblclick(function(){
var currentId = $(this).attr('id');
alert(currentId);
});
});
and html as below -
<button id="getname">Get Name</button>
<div id="nameData"></div>
Double clicking on names value doesn't generating alerts.

are you sure it is..
<dev id="nameData"></dev>
OR
<div id="nameData"></div>
this works...but you have an extra }); in the question...(don't know if it is a typo)
fiddle here

Try this:
$(document).ready(function(){
$('u[name="names"]').live("dblclick", function(){
var currentId = $(this).attr('id');
alert(currentId);
});
});

Try moving this code:
$('u[name="names"]').dblclick(function(){
var currentId = $(this).attr('id');
alert(currentId);
});
});
inside
$("#getname").click(function() {
var response = getNames(jsonObj);
$("#nameData").html(response);
});
like:
$("#getname").click(function() {
var response = getNames(jsonObj);
$("#nameData").html(response);
$('u[name="names"]').dblclick(function(){
var currentId = $(this).attr('id');
alert(currentId);
});
});
});

You don't need the last "});" Or you didn't paste the whole code.
Look here: http://jsfiddle.net/4cajw/1/

As your code suggest that you are .dblclick()ing on dynamically generated element, that don't work, you have to select parent elem which exist in the document
$(document).on('dblclick','u[name="names"]', function(){
var currentId = $(this).attr('id');
alert(currentId);
});
try this out.

JSON.stringify - object -> JSON.
JSON.parse - JSON -> object

Javascript results to div

Q1: My point is create many buttons as many rows of array. Like this, only one button appears.
<script type="text/javascript">
var myArray = [];
$('#button').click(function(){
var value1 = $('#value1').val();
var value2 = $('#value1').val();
var value3 = $('#value1').val();
var newArray = [];
var newArray[0] = value1;
var newArray[1] = value2;
var newArray[2] = value3;
myArray.push(newArray);
$("#save").append(
$("<button>").click(function() {
myFunction.apply(null, myArray);
}).text("Click me!")
);
});
});
function myFunction(value1,value2,value3)
{
var jsonData = $.ajax({
url: "file.php?value1=" + value1 + "&value2=" + value2 + "&value3=" + value3
dataType: "json",
async: false
}).responseText;
(...)
}
//edited: problem maybe found. I said buttons dont do anything because of this.
OUTPUT: file.php?value1=paul,23,USA&value2=undefined&value3=undefined
//it seems that value1 gets all values :s
</script>
<div id ="save"></div>
Im looking for a solution that return someting like this:
eg:
<!--<button onclick="myFunction(name,age,country)">Click me</button>-->
<button onclick="myFunction(paul,23,USA)">Click me</button>
<button onclick="myFunction(john,23,USA)">Click me</button>
EDITED MY CODE WITH MORE DETAILS

.html replaces, and your quotes are mismatched. But it doesn't matter - jQuery is better at manipulating the DOM than it is at manipulating strings. Try:
$("#save").append(
$.map(myArray, function(item) {
return $("<button>").click(function() {
myFunction.apply(null, item);
}).text("Click me");
})
);
Here's a demo.

You're only seeing one button because the .html() method replaces the html of the element. It doesn't append.
Luckily, jQuery has a method for the behavior you want, fittingly called append. Change it to look like this:
for(i=0;i<myArray.length;i++)
{
var button = $("<button>Click me</button>");
$("#save").append(button) ;
}
I intentionally left the onclick behavior out of that snippet. You can write it in the html of the button you create, as you have been, or you can do it with jQuery - the second method is preferable, and would look like this:
for(i=0;i<myArray.length;i++)
{
var button = $("<button>Click me</button>")
.click(function(){
// call the actual function you want called here
});
$("#save").append(button);
}

Did you mean this:
<div id="save">
</div>
<script type="text/javascript">
function addButtons(){
for(i=0;i<myArray.length;i++)
{
var button = $('<button id="btn_'+i+'" onclick="myFunction(this);">Click me</button>')
$(button).data('details',myArray[i]).appendTo("#save");
}
}
function myFunction(element){
alert($(element).data('details'));
}
</script>

This is because you are replacing the html in the $("#save") in the loop . Try
$("#save").append("<button onclick="myFunction('"+myArray[i]+"')">Click me</button>") ;

for(i=0;i<myArray.length;i++){
//Create a new DOM button element ( as jQuery object )
// Set the current button index, and add the click action
var button = $('<button />').data('myindex', i).click(function(){
var myArrayItem = myArray[$(this).data('myindex')];
alert(myArrayItem);
}).html('My label n. '+i);
$('#save').append(button)
}

Why bothering with all the JQuery and complicated code, just use simple way to implement this
<script type="text/javascript" >
var myArray = ["New York", "Boston", "San Jose", "Los Angeles"];
var strHTML = "";
for(i=0;i<myArray.length;i++)
{
strHTML += "<button onclick='myFunction("+i+")'>Click me</button>";
}
$("#save").innerHTML = strHTML;
function myFunction(index)
{
alert(index);
// do your logic here with index
}
</script>

is there any way findout duplicate id name in the page using jquery

my script is :
$('document').ready(function () {
var position = 0;
var data = [{'id':'user1'},{'id':'user2'},{'id':'user3'},{'id':'user4'},{'id':'user5'}];
$('#add').click(function() {
var newdiv=$('<div></div>').attr('id', data[position].id).text(data[position].id);
$("#container").append(newdiv);
position++;position %= data.length;
});
});
My html is:
<html>
<body>
<button id="add">Add new div</button>
<div id="container"><div id="user3"></div></div>
</body>
</html>
when click a button i am appending new divs with some id name here before insert div i want to check all div id names if anything matches i don't want to append that div
my jsfiddle is here

$("#add").click(function() {
...
$.each(data, function(index, value) {
$("<div />").attr('id', value.id).text(value.id).appendTo("#container");
});
});
Please read the jQuery Cookbook. It'll help with the... headaches.

use array.length as the new id?
$('document').ready(function () { var data = [{'id':'user1'},{'id':'user2'},{'id':'user3'},{'id':'user4'},{'id':'user5'}];
$('#add').click(function() {
var newdiv=$('<div></div>').attr('id', data.length).text(data.length); $("#container").append(newdiv);
var newData = {};
newData.id = 'user'+data.length;
data[data.length] = newData});
});
Thanks thiefmaster ;)