I am a beginner in JavaScript and HTML. I am trying to prevent buttons from submitting forms. It is not working with my below code. It is working when I remove the type:button and return false in the code but if I remove it is always submitting the form.
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<button type="button" onclick="myFunction1();return false;" style="font-size:24px">Button <i class="fa fa-info-circle"></i></button>
<script type="text/javascript">
function myFunction1(){
}
</body>
</html>
JQUERY
You should be able to do:
$('#formid').submit(false);
or
$('#formid').submit(function(e){ e.preventDefault(); });
To use the jquery library visit the official website
http://jquery.com/download/
PURE JS
document.getElementById('formid').addEventListener('submit', function(e) {
e.preventDefault();
});
here is your example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
function countRabbits() {
for(var i=1; i<=3; i++) {
alert("Rabbit number " + i);
}
return false;
}
</script>
</head>
<body>
<input type="button" onclick="countRabbits()" value="Count rabbits"/>
</body>
</html>
First of all, take care about closed pair tags. In your snippet you have unclosed script tag. Don't use button where it isn't necessary, but use the input type button instead.
Related
Here I'm trying to set index to my button id, for example if I have button id like unique , second button should have unique0, and third button should have unique1 like this. actually button in each loop so that i am same id with all buttons anyone pls let me know how to achieve it
note: i need button id's like unique0, unique1, unique2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<button id="unique" type="button" class="btn btn-primary">Primary</button>
</div>
<script>
$(function() {
var index = $("#unique").index(this);
$("#unique").append(index);
)};
</script>
</body>
</html>
Use a loop to change all the IDs.
$(".btn").each(function(i) {
this.id = 'unique' + i;
this.innerText += i;
});
I'm learning jQuery & JavaScript from scratch and cannot wrap my head around why css cannot be added with jQuery. Basically, I'm trying to see whether the the sentence bolds when the user clicks on the first sentence. I have been referencing w3school and external resources, but not sure why there is an error.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question 3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<h3>Click on this heading to update below paragraph </h3>
<p id="pText">this is a paragrah</p>
<script>
$(document).ready(function() {
$("h3").click(function() {
$('pText').css("font-weight", "bold");
document.getElementById('pText').innerHTML = "this is updated paragraph";
});
});
</script>
</body>
</html>
You have missed to prefix the id symbol (#) in the selector:
$('#pText').css("font-weight", "bold");
I will also suggest you not mix up vanilla JS and jQuery unnecessarily.
You can replace
document.getElementById('pText').innerHTML = "this is updated paragraph";
with the following equivalent jQuery:
$('#pText').html("this is updated paragraph");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<h3>Click on this heading to update below paragraph </h3>
<p id="pText">this is a paragrah</p>
<script>
$(document).ready(function () {
$("h3").click(function () {
$('#pText').css("font-weight", "bold");
$('#pText').html("this is updated paragraph"); // you can use jQuery here
});
});
</script>
</body>
How do I use a alert to stop a link from going to the page? I've been trying to figure it out but it's sending me to the link anyways
<!DOCTYPE HTML>
<html>
<head>
<title>Do Not Click</title>
<meta charset="UTF-8" />
</head>
<body>
<script type="text/javascript">
function confirm_alert(node) {
return confirm("STOP CLICKING THE LINK");
}
</script>
Don't click link
</body>
</html>
Just return false from the confirm_alert function.
<!DOCTYPE HTML>
<html>
<head>
<title>Do Not Click</title>
<meta charset="UTF-8" />
</head>
<body>
<script type="text/javascript">
function confirm_alert(node) {
confirm("STOP CLICKING THE LINK");
return false;
}
</script>
Don't click link
</body>
</html>
You can pass the param event and execute the function .preventDefault()
<!DOCTYPE HTML>
<html>
<head>
<title>Do Not Click</title>
<meta charset="UTF-8" />
</head>
<body>
<script type="text/javascript">
function confirm_alert(node, e) {
e.preventDefault();
return confirm("STOP CLICKING THE LINK");
}
</script>
Don't click link
</body>
</html>
A better approach is binding the event click:
document.querySelector('a').addEventListener('click', confirm_alert);
function confirm_alert(e) {
e.preventDefault();
return confirm("STOP CLICKING THE LINK");
}
Don't click link
Put the redirect in the js function. Put a check in it for showing the alert or for going to the url.
Something like this:
window.location.href = "http://stackoverflow.com";
Not sure tho. Not tested it.
How can I pass argument to function redirect in JavaScript
Here is my code:
<script type="text/javascript">
<!--
function redirectlink(text){
window.location = "index.php?keyName="+ text;
}
//-->
</script>
<form>
<button type="button" id="butt_1" onclick="redirectlink(KEY_POWER)"> 1 </button>
Thank you in advance.
This can be done either by using getElementById and addEventListener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo">Click</button>
<script type="text/javascript">
document.getElementById("foo").addEventListener("click", function(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
})
</script>
</body>
</html>
either onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo" onclick="action()">Click</button>
<script type="text/javascript">
function action(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
}
</script>
</body>
</html>
Using onclick is deprecated.
With just only JavaScript (without jQuery / Angular etc.) you can use addEventListener on click event.
for example:
var btn = document.getElementById('butt_1');
btn.addEventListener('click', function(e) {
// your code
});
In this function you can for example get value/txt from this button element and something else which you want.
I am trying to find a way to show a pop up message when user is trying to highlight and copy text from a paragraph. I've searched around the net for possible solutions but I could not find any that will trigger pop up message when text or random part of the paragraph is selected.
I've looked at this. But it seems that it uses div block rather than pop up.
It seems that #Nishit Maheta answer solved my issue. Shortly I will update the post with my solution.
Try this:
tinyMCE.init({
mode: "exact",
elements: "test",
skin: "o2k7",
skin_variant: "red",
setup: function (ed) {
ed.onMouseUp.add(function (ed, e) {
var x = tinyMCE.activeEditor.selection.getContent();
if(x)
alert(x);
});
}
});
JSFIDDLE DEMO
Try Bootstrap Popover. Following is a sample code,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
<p data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</p>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
It works well for me, hope it will resolve your issue.
$("#myDiv").mousedown(function(){
$("#myDiv").mouseup(function(){
$("#myPopUp").show();
});
});
#myPopUp
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
hello please select the text and see
</div>
<div id="myPopUp">
popover message
</div>