Below is my code where I am creating dynamic element on click of ADD button.
And i want to fadeOut element onclick of buttton only not on click of div
here is my code
<head>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#new").append("<div>New li <button>X</button></div>");
})
$("#new").on('click','div',function(){
$(this).fadeOut();
})
})
</script>
<input type="button" name="btn" id="btn" value="ADD">
<div id="new">
</ul>
this just fadeout on click of div and I don't want this behaviour
try this
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#new").append("<div class='ParentDiv'>New li <button>X</button></div>");
});
$("#new").on('click','button',function(){
$(this).closest(".ParentDiv").fadeOut();
});
});
</script>
<input type="button" name="btn" id="btn" value="ADD">
<div id="new">
</div>
Related
Currently I use
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#output").load("https://somesite.com/Search.html");
});
});
</script>
<body>
<div class="formClass">
<div id="output">
</div>
<button type="button">Search</button>
</div>
to implement an offsite html into my current page.
Howevee this way, the visitor is required to press the "Search" button to reveal the content.
Is there a way to 'automatically' load this, without user interaction ?
(I know a way to trigger the button at siteload, but I'd rather have the button not be there in the first place)
Move the load call out of the click event listener:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#output").load("https://somesite.com/Search.html");
});
</script>
<body>
<div class="formClass">
<div id="output">
</div>
<button type="button">Search</button>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<button value="">Button 1</button>
<button value="">Button 2</button>
<button value="">Button 3</button>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
Below is code in custom.js
$(':button').on('click',function(){
alert('Hello');
});
and when I changed the code in custom.js to
$('button').on('click',function(){
alert('Hello');
});
They do the same work that is display alert on click,But I want to know the difference between 'button' and ':button'
Using only button will select only <button></button> elements, while :button will select <button></button> and <input type="button" />
See https://api.jquery.com/button-selector/ for more information.
button only selects the button elements, whereas :button also selects the input type="button"
$(':button') selects <button> tags or <input /> tags with type="button"
$('button') selects only <button> tags
$(':button').on('click',function(){
alert('You clicked a tag of type: ' + $(this).prop('tagName'));
});
$('button').on('click',function(){
alert('Hello from ' + ($(this).html() || $(this).val()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value="">Button 1</button>
<button value="">Button 2</button>
<button value="">Button 3</button>
<input type="button" value="Input Button" />
$(":button") : selects both "button" tag and "input type=button" as well
while $("button") : only selects
I am new to javascript and I was following a tutorial where based on the code below, the button content was supposed to change to adding before displaying the alert but my code is not working
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form class="form-item">
<div class="cart">
<input type="submit" value="Add to Cart" />
</div>
</form>
<script>
$(document).ready(function(){
$("button").click(function(){
button_content.html('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
});
});
</script>
How can I solve this problem ?
$("button") is not the right selector. That will look for <button> elements, and you don't have one.
You'll want $("input[type=submit]"), or better yet, give it an ID and use the selector on that: $("#mybutton").
Keep in mind that this will still submit the form back to the server - it'll just wait until the alert to do so.
Give this code a try for a few reasons.
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form class="form-item">
<div class="cart">
<!--<input type="submit" value="Add to Cart" />-->
<!-- First use a button not an input and give it an ID -->
<button id="btn_add" type="submit">Add to Cart</button>
</div>
</form>
<script>
// You can shorten up the ready statement
//$(document).ready(function(){
$(function(){
// Now bind a click handler with button's ID
// This is an older way of binding in jQuery
// $("#btn_add").click(function(){
// Use jQuery's on() instead.
$("#btn_add").on("click", function(){
// Change the HTML of the button by getting it by it's new ID
// button_content.html('Adding...'); //Loading button text
$("#btn_add").html('Adding...');
alert("Item added to Cart!"); //alert user
});
});
</script>
Use an ID anywhere that you can. Feel free to shorten up your ready statement. Use jQuery's on handler instead of click.
You don't have a tag to select it with jquery. Your html has to look like this for it to work:
<form class="form-item">
<button class="cart">Add to Cart</button>
</form>
Your problem is in the jquery selector and in the function reference
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form class="form-item">
<div class="cart">
<input type="submit" value="Add to Cart" />
</div>
</form>
<script>
$(document).ready(function(){
$("input[type=submit]).click(function(){
$(this).html('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
});
});
</script>
<button name="submit" value="Add to Cart" id="sendFeed">Add to card</button>
<script>
$(document).ready(function(){
$("button").click(function(){
button_content.html('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
return false;
});
});
You do not have a button element in your code. If you are targeting the input element, then you need to use the selector tag for input and then use .val() option to display the text.
$(document).ready(function(){
$("input").click(function(){
$(this).val('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
});
});
Example : https://jsfiddle.net/fz66qdv4/
Try it :
<html>
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form class="form-item">
<div class="cart">
<input type="submit" value="Add to Cart" />
</div>
</form>
<script>
$(document).ready(function(){
$("input[type=submit]").click(function(){
$(this).val('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
});
});
</script>
</body>
</html>
I have multiple divs inside a form tag.
<form id="RegdForm">
#Html.Partial("../Partials/_PatientEdit")
The partial view,
<div id="zafar"> <h3>Zafar</h3> </div>
When I try to hide all the divs its working like below
<script type="text/javascript">
$('Div').hide();
</script>
But when I try to hide specific Div it's not hiding at all.
<script type="text/javascript">
$('#zafar').hide();
</script>
I am using ASP.Net MVC 5 with Razor.
Any help appreciated.
Try this
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="zafar">
<h3>Zafar</h3>
</div>
<div class="well well-sm">
<button class="btn btn-success" type="submit">Save</button>
<button class="btn btn-primary" type="button" data-bind="click: printPatient">Print</button>
<button class="btn btn-danger" type="button" data-bind="click: resetForm">Reset</button>
</div>
<button id="hide">Hide</button>
<button id="hideAll">Hide All</button>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$('#zafar').hide();
});
$("#hideAll").click(function(){
$('Div').hide();
});
});
</script>
</body>
</html>
Here is your answer:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#zafar").hide();
});
</script>
Add your respective function inside this.
$(function() {
$('#zafar').hide();
})
After a long googling I found out one solution to this.
As the div was inside the form tag, the way accesing the div can be done as,
<script type="text/javascript">
$('#RegdForm #zafar').hide();
It helped me to achieve the task.
I have a problem adding bootstrap class to button with a function. I want to add the disable class to #eng.
My code:
<li>
<div class="btnLang">
<form id="formLang1">
<button id="slo" class="btn btn-mini disabled">slo</button>
</form>
<form id="formLang2" onsubmit='return eng_clicked()'>
<button id="eng" class="btn btn-mini">eng</button>
</form>
</div>
</li>
<script type="text/javascript">
function eng_clicked(){
$('#eng').addClass("disabled");
}
</script>
you forgot the script tag
<script type="Text/javascript">
//scripts
</script>
Anyway I have better solution for you using jQuery, just remove "onsubmit='return eng_clicked()'" and and replace the codes below instead of your codes:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$("#formLang2").click(function() {
$('#eng').addClass("disabled");
});
</script>
have you add the script tag?
<script type="text/javascript">
function eng_clicked(){
$('#eng').addClass("disabled");
}
</script>