JavaScript
$("#btn").on('click', function(){
$("#result").append("<button type='button' id='btnid'
data-id='show' //this is what I want to get
class='close pull-right' aria-hidden='true'>some text here</button>");
});
HTML
<button id="btn">CLICK HERE</button>
<div id='result'></div>
<button id="submit">SUBMIT HERE</button>
I want to display the data-id='show' from the appended button after i click the button with an id="submit". As you can see, the div with id="result" is just like an container of all the appended text.
So far, this is what I have,
JavaScript
$('#submit').click(function(){
$( "#result" ).each(function( index ) {
console.log( index + ": " +$(this).text());
});
});
But with this code, i can only retrieve the text, "some text here". But what i needed is the data-id of my appended button.
I also tried the code below, but it is not working.
JavaScript
$('#submit').click(function(){
$( "#result" ).each(function( index ) {
console.log( index + ": " + $( this ).html($(this).html($(this).attr("data-id"))));
});
});
To get the data-id of the buttons you have in the #result element, you may do this :
$('#submit').click(function(){
$('#result button').each(function(i){
console.log(i, ':', $(this).data('id'));
});
});
try this
$('#submit').click(function(){
console.log($("#result").find("button").data('id'));
});
make sure you id is unique.... each with ids does not make sense
If the user clicks the #btn "CLICK HERE" button more than once you will end up with multiple new buttons appended within #result (which would be invalid html given that you'd then have duplicate id values), so you'd need to loop through those buttons with .each() rather than trying to loop through #result with .each():
$('#submit').click(function(){
$("#result").find("button").each(function(index ) {
console.log( index + ": " + $(this).attr("data-id"));
});
});
Demo: http://jsfiddle.net/NXU9e/
NOTE: The markup for your #result element is missing the / in the closing </div> tag.
Related
I want to add a new a element when I click the button but it doesnt work
<div id="add-container">
<input type="text"> <button>add</button>
<div id="megobrebi">
<a>Levani</a>
<a>Markozi</a>
<a>Zuka</a>
<a>Sandro</a>
</div>
</div>
$(document).ready(function() {
$('#add-container').on('click', 'button', function(){
var value = $('#add-container input').val;
var html = '<a>' + value + '</a>'
$('$megobrebi').prepend(html);
})
})
You have two errors in the handler for the click event on the button.
First, you need to call the jQuery val method in order to get the value of the input.
Second, the selector for the DOM element where you want to prepend is not right.
Therefore, the code should be:
$('#add-container').on('click', 'button', function(){
var value = $('#add-container input').val();
var html = '<a>' + value + '</a>'
$('#megobrebi').prepend(html);
})
The last line should be
$('#megobrebi').prepend(html);
Change your script code to
$(document).ready(function() {
$('#add-container button').on('click', function(e){
e.preventDefault(); // You may use this line if you wish to disable the default functionality button.
var value = $('#add-container input').val();
var html = '<a>' + value + '</a>';
$('#megobrebi').prepend(html);
});
});
why that my button only give me the value of my first column inside a table when i clicked the other button it give me the same output as the first column.
here is the code in showing the item inside the table
try {
while($row=$query->fetch(PDO::FETCH_NUM))
{
echo
'<tr>
<td ><div id="studID">'.$row[0].'</div></td>
<td>'.$row[1].'</td>
<td>'.$row[2].'</td>
<td>'.$row[3].'</td>
<td>
<button class="button active"
name="button"value="'.$row[0].'">view</button>
</td>
</tr>';
}
echo '</table>';
} catch(PDOException $e ){
echo "Error: ".$e;
}
and here is the coded when i clicked the button
<script type="text/javascript">
$(".button").click(function(){
var id =$('.button').val();
alert (id);
});
</script>>
thanks in advance.
Use this object like below:
<script type="text/javascript">
$(".button").click(function(){
var id =$(this).val();
alert (id);
});
</script>>
Click event always get first matching element from dom. If you want to get all buttons get then by for() loop , each loop, map function, or you can follow underscore library.
Don't give your button the value, instead in your click function do
$("td").each(function() {
var id = $('td').val();
alert(id);
});
This way it will iterate over each of your td elements and produce an alert with the value of it. Or you can do this:
var valueArray
$("td").each(function() {
var id = $('td').val();
valueArray.push(id);
});
alert(valueArray);
Which should hopefully do an alert with all the values in it.
and for your button do:
<button class="button active" name="button">view</button>
But bear in mind that this will do it for all td elements on your page so if you have more than one table this will do an alert for every td in every table you have. To avoid this give the table an id and replace $("td") with $("#tableID td").
You need to iterate through all the classes available using jQuery.each() function. While here you are only fetching the first element value.
You can try something like below:
<script type="text/javascript">
$(".button").click(function(){
$( ".button" ).each(function( index ) {
alert( $( this ).val() );
});
});
</script>
I'm wanting to write into a textarea from buttons clicked by users using Javascript or jQuery
Like so:
<html>
<head></head>
<body>
<button>Q</button>
<button>W</button>
<button>E</button>
<button>R</button>
<button>T</button>
<button>Y</button>
<br/><br/>
<textarea></textarea>
</body>
</html>
So a user can click one of the "QWERTY" buttons here and it will be pasted into the box below. Is there a relatively simple way to do this? I've looked up some examples online, but they all go overboard for a novice like me.
It would also be great if we could write text to the textarea characters that aren't on the button
I can't seem to get this to work
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>$('button').click(function(){
$('textarea').text($('textarea').text() + $(this).text());
//$('input:text').val($('textarea').text() );
$('input:text').val($('input:text').val() + ' ' + $(this).data('stuff'));
});
</script>
</head>
<body>
<button data-stuff='stuff_Q'>Q</button>
<button data-stuff='stuff_W'>W</button>
<button data-stuff='stuff_E'>E</button>
<button data-stuff='stuff_R'>R</button>
<button data-stuff='stuff_T'>T</button>
<button data-stuff='stuff_Y'>Y</button>
<br/><br/>
<input type='text'/>
<br/><br/>
<textarea></textarea>
</body>
</html>
If you want to just append to the end of the textarea then use
$('button').on('click', function(){
var letter = $(this).text();
$('textarea')[0].value += letter;
});
Full demo
$(function() {
$('button').on('click', function() {
var letter = $(this).text();
$('textarea')[0].value += letter;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Q</button>
<button>W</button>
<button>E</button>
<button>R</button>
<button>T</button>
<button>Y</button>
<br/>
<br/>
<textarea></textarea>
JS
$('button').click(function(){
$('textarea').text($('textarea').text() + $(this).text());
//$('input:text').val($('textarea').text() );
$('input:text').val($('input:text').val() + ' ' + $(this).data('stuff'));
});
HTML
<button data-stuff='stuff_Q'>Q</button>
<button data-stuff='stuff_W'>W</button>
<button data-stuff='stuff_E'>E</button>
<button data-stuff='stuff_R'>R</button>
<button data-stuff='stuff_T'>T</button>
<button data-stuff='stuff_Y'>Y</button>
<br/><br/>
<input type='text'/>
<br/><br/>
<textarea></textarea>
Updated per OP needs additional appending values after all the button clicked.
Updated again per OP asking "write into the textbox a letter that is different from the button tag says". I would like to store some data for each button using data() to get it.
FIDDLE
How about this:
$('button').click(function(){
$('textarea').text( $(this).text() );
});
jsFiddle Demo
If you want to take this example a bit futher, we can make it so the letters are appended to the textarea, rather than overwriting what was there previously:
var ta = $('textarea'); //cache selector for re-use (see note at bottom)
$('button').click(function(){
ta.text( ta.text() + $(this).text() );
});
Now, let's add a button to erase the textarea. Here we assign an ID to one specific button and check for it:
var ta = $('textarea');
$('button').click(function(){
if (this.id == "eraseit"){
ta.text('');
}else{
ta.text( ta.text() + $(this).text() );
}
});
jsFiddle Demo #2
Notes:
In the 2nd and 3rd examples, we cached the selector (saved the reference into a variable) for speed.
Each time the code $('textarea') is hit, the DOM is searched for that selector. Caching the selector eliminates all but the initial search. Not at all important in this simple example, but very useful on a large project.
IDs and Classes are extremely important. They are used similarly by css and by javascript/jQuery, for identifying/selecting elements.
The same class name can be applied to multiple elements (e.g. several buttons can have the class), but no two elements are allowed to have the same ID.
In response to your question:
var ta = $('textarea');
$('button').click(function(){
if (this.id == "eraseit"){
ta.text('');
}else{
if ( $(this).hasClass('bob') ) {
ta.text( ta.text() + ' bob' );
}else if ( $(this).hasClass('x') ) {
var ans = prompt('What is your name?');
ta.text( ta.text() + ans );
}else{
ta.text( ta.text() + $(this).text() );
}
}
});
jsFiddle Demo #3
i'm working on a small html form with 1 textbox input, after the user enters any text and he presses a button on the end of the page i want the to change to a normal plain html text(so the whole page can be copy pasted into a word file including the written down text in the textbox).
as an example:
<input type="text" id="fileserver">
<button onclick="disable_all();">click!</button>
after the button is pressed i want the textbox to be converted to plain html text with no more textbox like this:
this is an example text after pressing the button!
click!
i have been searching around and have not found a working solution yet, hope someone can help me out
$('button').click(function(){
$('body *').replaceWith(function(){
return this.value || this.innerHTML;
});
});
http://jsfiddle.net/pYw9P/
This should do it I think.
function disable_all() {
var fs = $("#fileserver"), span = $( "<span>" + fs.val() + "</span>");
span.insertAfter(fs);
fs.remove(); // or fs.hide(); in case you want it later.
}
Try:
HTML:
<input type="text" id="fileserver">
<button id="but">click!</button>
JS:
$( "#but" ).click(function() {
var text=$( "#fileserver" ).val();
$( "body" ).html(text);
});
DEMO
This should be helpful to you -
There are several way to achieve your task :
Solutions 1 -
function disable_all()
{
$('#content').remove();
$('#fileserver, button').hide();
$('body').append("<div id='content'>" + $('#fileserver').val() + "</div>")
}
Working Fiddle
Solution 2 -
function disable_all()
{
$("body").html($("#fileserver").val());
}
Working Fiddle
you can do this hiding the textbox
<input type="text" id="fileserver">
<div id="result"></div>
<button id="btn" >click!</button>
and
$(document).ready(function(){
$("#result").hide();
$("#btn").click(function(){
$("#result").text($("#fileserver").val());
$("#fileserver").hide();
$("#result").show();
});
});
demo
The first "non-jQuery" answer...
your HTML:
<input type="text" id="fileserver">
<div style="display: none;" id="fileserver_text"></div>
<button id="btn">click!</button>
your Javascript:
document.getElementById('btn').onclick = disable_all;
function disable_all() {
var input = document.getElementById('fileserver');
var disp = document.getElementById('fileserver_text')
disp.innerHTML = input.value; // get the text from the input and set the div text
disp.style.display = 'block'; // show the div
input.style.display = 'none'; // hide the input
}
JSFiddle
If you are using jQUery, this will help you,
http://jsfiddle.net/DCak6/
function save(){
$('input,textarea').each(function(){
var $this = $(this);
$this.after('<span class="value">' + $this.val() + '</span>');
$this.remove();
})
}
You may be better off with taking the text from the text field, copying the value and putting it into another div
<div id="textToCopy"></div>
<input type="text" id="fileserver">
<button onclick="disable_all();">click!</button>
<script type="text/javascript">
function disable_all() {
$('#textToCopy').html($('#fileserver').val());
$('#fileserver').hide();
}
</script>
I have a very simple function to render the value of an input "text" into the html.
<form>
<input type="text" class='test'><input type='submit' value='send'>
</form>
<div class='test2'> </div>
<script>
$("form").submit(function() {
var value = $('.test').val();
$('.test2').html(value);
});
</script>
The thing is that everytime we press "send", the new value replace the old one. I would like to display the new message without deleting the old ones, on top of them.
i.e I would like to add a 'DIV' or a 'P' each time I click on the button send.
Thank you for your help.
Try it like this
$("form").submit(function() {
var value = $('.test').val();
$('.test2').append('<p>' + value + '</p>');
});
jsBin demo
$("form").submit(function(e) {
e.preventDefault();
$('<div>',{ text: $('.test').val() }).appendTo('.test2');
$('form').get(0).reset();
});