My task is to add button dynamically to the div.. here is the code that i follow to add button dynamically but its not working please give me a solution for this
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function test() {
var r = "$('<input/>').attr({
type: "button",
id: "field"
})";
}
$("body").append(r);
</script>
</head>
<body>
<button onclick="test()">Insert after</button>
</body>
</html>
code to append button on div when page loads but its not working
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function test() {
var r=$('<input/>').attr({
type: "button",
id: "field"
});
test().append("#test");
}
</script>
</head>
<body>
<div id="test"></div>
<button id="insertAfterBtn" onclick="test()">Insert after</button>
</body>
</html>
Your append line must be in your test() function
EDIT:
Here are two versions:
Version 1: jQuery listener
$(function(){
$('button').on('click',function(){
var r= $('<input type="button" value="new button"/>');
$("body").append(r);
});
});
DEMO HERE
Version 2: With a function (like your example)
function createInput(){
var $input = $('<input type="button" value="new button" />');
$input.appendTo($("body"));
}
DEMO HERE
Note: This one can be done with either .appendTo or with .append.
To add dynamic button on the fly;
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function newButtonClickListener() {
alert("Hello World");
}
function test() {
var r = $('<input/>').attr({
type: "button",
id: "field",
value: "New Button",
onclick: "newButtonClickListener()"
});
$("body").append(r);
}
</script>
</head>
<body>
<button onclick="test()">Insert after</button><br/>
</body>
</html>
Demo link
the $("body").append(r) statement should be within the test function, also there was misplaced " in the test method
function test() {
var r=$('<input/>').attr({
type: "button",
id: "field",
value: 'new'
});
$("body").append(r);
}
Demo: Fiddle
Update
In that case try a more jQuery-ish solution
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#mybutton').one('click', function(){
var r=$('<input/>').attr({
type: "button",
id: "field",
value: 'new'
});
$("body").append(r);
})
})
</script>
</head>
<body>
<button id="mybutton">Insert after</button>
</body>
</html>
Demo: Plunker
Try this:
<script type="text/javascript">
function test()
{
if($('input#field').length==0)
{
$('<input type="button" id="field"/>').appendTo('body');
}
}
</script>
Try this
function test()
{
$("body").append("<input type='button' id='field' />");
}
Working plunk here.
To add the new input just once, use the following code:
$(document).ready(function()
{
$("#insertAfterBtn").one("click", function(e)
{
var r = $('<input/>', { type: "button", id: "field", value: "I'm a button" });
$("body").append(r);
});
});
[... source stripped here ...]
<body>
<button id="insertAfterBtn">Insert after</button>
</body>
[... source stripped here ...]
To make it work in w3 editor, copy/paste the code below into 'source code' section inside w3 editor and then hit 'Submit Code':
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button id="insertAfterBtn">Insert only one button after</button>
<div class="myClass"></div>
<div id="myId"></div>
</body>
<script type="text/javascript">
$(document).ready(function()
{
// when dom is ready, call this method to add an input to 'body' tag.
addInputTo($("body"));
// when dom is ready, call this method to add an input to a div with class=myClass
addInputTo($(".myClass"));
// when dom is ready, call this method to add an input to a div with id=myId
addInputTo($("#myId"));
$("#insertAfterBtn").one("click", function(e)
{
var r = $('<input/>', { type: "button", id: "field", value: "I'm a button" });
$("body").append(r);
});
});
function addInputTo(container)
{
var inputToAdd = $("<input/>", { type: "button", id: "field", value: "I was added on page load" });
container.append(inputToAdd);
}
</script>
</html>
Related
I would like to get value on click event from dynamically added elements but something goes wrong.
My code is:
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#myContainer").append("<div class='remove' value='myValue'>click to display value</div>");
});
$(document).on("click", ".remove" , function() {
alert($(this).val());
});
});
</script>
</head>
<body>
<button>Add new list item</button>
<div id="myContainer">
</div>
</body>
</html>
When I am clicking on the created dynamically div there is empty alert insted of myValue.
What should I change?
Try
$(document).on("click", ".remove" , function() {
alert($(this).attr('value'));
});
Instead of
$(document).on("click", ".remove" , function() {
alert($(this).val());
});
this should work for you. ↓↓
$(document).ready(function(){
$("button").click(function(){
$("#myContainer").append("<div class='remove' value='myValue'>click to display value</div>");
});
$(document).on("click", ".remove" , function() {
alert($(this).attr('value'));
});
});
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<button>Add new list item</button>
<div id="myContainer"> </div>
</body>
</html>
I tried some methods in old questions but it is not working in chrome.
Can please any one suggest me the solution.i'm using php for validation.
if i click submit button twice it through an error so restrict the issue i disable the submit button but it not working in chrome.
<script>
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
jQuery('#submit_button').attr('disabled','disabled');
});
});
</script>
You could use prop jquery method, or just set the disabled attribute to true.
$(document).ready(function(){
$('#submit').on('click', function(e){
//$(this).prop('disabled', true);
this.disabled = true;
})
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="submit">submit</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
It could be that there are multiple submit buttons on the page. You can try using this code.
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
// It is best practice to use `true` instead of
// any true-y kind of value like non-empty string.
jQuery(this).attr('disabled', true);
});
});
There are different ideas were given but the code seems working properly. Please make sure you imported the jQuery library.
The following code is the tested code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('#button').click(function () {
jQuery('#button').attr('disabled','disabled');
});
});
</script>
</head>
<body>
<input type="submit" id="button" value="If you click on me, I will be disabled."/>
</body>
</html>
Try, using the prop of element and making the attribute true, using
jQuery('selector').prop('disabled',true);
<script>
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
jQuery('#submit_button').prop('disabled',true);
});
});
</script>
how i would add disabled:
<script>
$(document).ready(function(){
$('button').click(function () {
$('<input type="button id="submit_button" disabled>').insertBefore(this);
$(this).remove();
});
});
</script>
how i would change the button back to normal:
<script>
$(document).ready(function(){
$('button').click(function () {
$('<input type="button id="submit_button" >').insertBefore(this);
$(this).remove();
});
});
</script>
you can use $('selector').prop('disabled',true);
Consider the HTML :
<html>
<head>
Something...
</head>
<body>
<script>
$('#btnviewdetails').text('Save').button("refresh");
</script>
<button id='btnviewdetails' type='button'>SET</button>
</body>
</html>
When I hit the button , the JS code is not invoked . What am I doing wrong ?
Thanks
You need to bind an event handler on the button. The function will be invoked when the button is pressed.
$('#btnviewdetails').bind('click', function() {
$(this).text('Save');
});
Complete code :
<html>
<head>
<script src="jquery-2.1.0.min.js"></script>
Something...
</head>
<body>
<button id='btnviewdetails' type='button'>SET</button>
<script>
$('#btnviewdetails').bind('click', function() {
$(this).text('Save');
});
</script>
</body>
</html>
Here the whole text inside the div get's red color. but I need only the "bar" word color to be changed
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#foo:contains('bar')").css('color','red');
});
</script>
</head>
<body>
<div id="foo">
this is a new bar
</div>
</body>
</html>
Could be done like that:
http://jsfiddle.net/PELkt/
var search = 'bar';
$(document).ready(function () {
$("div:contains('"+search+"')").each(function () {
var regex = new RegExp(search,'gi');
$(this).html($(this).text().replace(regex, "<span class='red'>"+search+"</span>"));
});
});
$("div:contains('bar')").each(function () {
$(this).html($(this).html().replace("bar", "<span class='red'>bar</span>"));
});
this will work surely
Please see Demo Here
You can use this way :
$(document).ready(function(){
// $("#foo:contains('bar')").css('color','red');
var text = 'bar' ;
var context = $("#foo").html();
$("#foo").html(context.replace(text,'<span style="color:red;">'+text+'</span>'));
});
Try this... prototype library:
<html>
<head>
<style type="text/css">
#content span {
background-color: yellow;
}
</style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
Event.observe(window,'load',function(){
var htm = $('content').innerHTML;
$('content').innerHTML = htm.sub('bar','<font color=red>bar</font>');
});
</script>
</head>
<body>
<div id="content">
this is a new bar
</div>
</body>
You can do like this.
$(document).ready(function(){
var matchingTest = 'demo';
$("#container:contains("+matchingTest+")").each(function () {
$(this).html($(this).html().replace(matchingTest, "<span class='red'>"+matchingTest+"</span>"));
});
});
.red{
background:#eada93;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
Hello this is a demo contents.
</div>
Solution with code snippet..
var text_change = 'bar';
$(document).ready(function () {
$("div:contains('"+text_change+"')").each(function () {
var regex = new RegExp(text_change,'gi');
$(this).html($(this).text().replace(regex, "<span class='red'>"+text_change+"</span>"));
});
});
.red {
color:#008000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">this is a new bar and bar.</div>
I am a newbie in jQuery and javascript, so this might seem as a trivial question. I want to use the DOM Outliner code found here in an html page that I have created.
My html page source is as follows
<!DOCTYPE html>
<html>
<head>
<h3>Dom Outlining</h3>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.dom-outline-1.0.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var myExampleClickHandler = function (element) { console.log('Clicked element:', element); }
var myDomOutline = DomOutline({ onClick: myExampleClickHandler });
// Start outline:
myDomOutline.start();
// Stop outline (also stopped on escape/backspace/delete keys):
myDomOutline.stop();
});
</script>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<div class="first class">
<p> This is a division.</p>
</div>
</body>
</html>
However, this doesn't seem to select and highlight the element as required. Can someone tell me what's missing in my code?
Because you are stoping highlighting as soon as it starts
$(document).ready(function() {
var myExampleClickHandler = function (element) { console.log('Clicked element:', element); }
var myDomOutline = DomOutline({ onClick: myExampleClickHandler });
// Start outline:
myDomOutline.start();
// Stop outline (also stopped on escape/backspace/delete keys):
//myDomOutline.stop();
});
Demo: Plunker
In ideal implementation there will be a start and stop buttons as I added in my demo.
You just need to remove myDomOutline.stop(); :)
$(document).ready(function() {
var myExampleClickHandler = function (element) { console.log('Clicked element:', element); }
var myDomOutline = DomOutline({ onClick: myExampleClickHandler });
// Start outline:
myDomOutline.start();
// Stop outline (also stopped on escape/backspace/delete keys):
// myDomOutline.stop();
});
You were starting it and then stopping it almost immediately - resulting in nothing!
Check here http://jsfiddle.net/vJYya/1/
<html>
<head>
<h3>Dom Outlining</h3>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.dom-outline-1.0.js" type="text/javascript"></script>
<script>
$(function() {
var myDomOutline = DomOutline({
onClick: function (element) {
console.log('Clicked element:', element);
}
});
$('#start').click(function(){
myDomOutline.start();
});
$('#stop').click(function(){
myDomOutline.stop();
});
});
</script>
</head>
<body>
<input id="start" type="button" value="Start outline"/>
<input id="stop" type="button" value="Stop outline"/>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<div class="first class">
<p> This is a division.</p>
</div>
</body>
</html>