I'm trying to invoke a JavaScript function (that have some php code ) when clicking a button..
but the function doesn't work in first time!! I should click two times to make it start.
here is my code...
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function f1(id)
{
document.getElementById("hiddenVal").value = id;
window.alert("the function is started");
window.alert(id);
f2();
}
function f2()
{
<?php
$Biid=$_POST["hiddenVal1"];
?>
window.alert("<?php echo $Biid; ?>");
}
</script>
</head>
<body>
<form method="post">
<button id="2" onclick="f1(this.id)"> click me </button>
<input type="text" name="hiddenVal1" id="hiddenVal" /> </div>
</form>
</body>
</html>
the problem is that the default behavior of a button inside a form is to submit that form
So you can add a type attribute to the button so it won't submit the form or use a event listener with a "preventDefault" function just like this:
Option 1:
<button id="2" type="button" onclick="f1(this.id)"> click me </button>
Option 2:
document.addEventListener('submit', function(event){
event.preventDefault();
f1(event.target.id);
});
Related
I am trying to create an alert function using the getElementById and it is not working. This is a very simple button i am trying to create but obviously its not simple for a noob like me. Thank you for all your help in advance. This is what i currently have:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>alert</title>
</head>
<body>
<button onclick= "click()" style="color:green;" >click</button>
<script>
function click() {
document.getElementById("alerting").innerHTML = "I am an alert";
}
</script>
</body>
</html>
You need to add an element with id="alerting" where your text will appear. Otherwise document.getElementById("alerting") will return null and calling innerHTML on it will throw error.
<body>
<button onclick= "myFunction()" style="font-size:25px;" >click</button>
<p id="alerting">element with alerting id. value will change here</p>
<script>
function myFunction() {
document.getElementById("alerting").innerHTML = "Hello World";
}
</script>
</body>
You dont have any html elements with id="alerting" into which you can set the innerHTML.
If you want a popup alert instead of doing the innerHTML thing... just do:
alert("I am an alert");
Also of note... some browsers wont like functions named: "click".
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>alert</title>
</head>
<body>
<button onclick="someFunction()" style="color:green;" >Click Me</button>
<script>
function someFunction()
{
alert("I am an alert");
}
</script>
</body>
</html>
How do I activate a javascript button as if a user clicked it? Could I run javascript code
to activate the button? (supposing I did not already know the code in the button, and I am on a random website where I can not change existing code)
<!DOCTYPE html>
<html>
<body>
<form action="aaa.php">
<input type="text" />
<input id="button" type="submit" />
</form>
<script>
var btn = document.getElementById("button");
//is there anything like: btn.click?
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<button id="button"onclick="myFunction()">b</button>
<!--creates the button-->
<script>
var btn = document.getElementById("button");
btn.click();
function myFunction(){
alert('working');
}
</script>
</html>
Here's one way you can handle it, call a specific function from your onClick
<!DOCTYPE html>
<html>
<button id="button" onclick="clickButton()">b</button>
<!--creates the button-->
<script>
function clickButton() {
alert("hello!");
}
</script>
</html>
To answer your question more directly, this is one way you can do it
document.getElementById('button').onclick=function(){/* some code */}
As mentioned, You can separate out HTML and javascript.
Sample.
<!DOCTYPE html>
<html>
<body>
<button id="button">Click Here</button>
<button onclick="onClickBtn(this)">Click Here 2</button>
<!--creates the button-->
<script>
var btn = document.getElementById("button");
btn.addEventListener("click", (event) => {
alert("Hi")
})
function onClickBtn(event) {
alert("Btn 2")
}
</script>
</body>
</html>
I have a simple request for you brainies today. What i am trying to do is to activate a pop-up inside PHP tags. I have tested to see if the pop-up works by itself, and it does. My problem is the button, i have used the same setup elsewhere, but this time no cigar. I have also tried echoing the button inside the PHP tags but nothing happens.
My code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<button type=" button" class="LeButton"> Clicky Clicky!</button>
<?php
if(isset($_POST['LeButton'])){
echo'<script> $(function() { $( "#dialog" ).dialog(); }); </script>';
echo'<div id="dialog" title="Basic dialog">';
echo'<p>Image:</p>'; </div>';}
?>
</body>
</html>
I tried specifying it as a function aswell and added onclick() to the button to call that function, nothing happend either. Mind that this is the first time i am ever using Javascript/jQuery.
I (kindly) lauched a bit about the echo <script> part.
Allow me to write you a piece of code, with explanation and documentation:
HTML button:
<button type="button" id="LeButton" class="LeButton"> Clicky Clicky! </button>
&
<div id="dialog" title="Basic dialog" style="visibility:hidden"><p>Image:</p> <img src="http://placehold.it/50x50" alt="Placeholder Image" /></div>
Explanation:
Your button needs an id value. Which is called 'LeButton' in this example.
Documentation:
https://www.w3schools.com/tags/att_id.asp
jQuery part:
<script>
jQuery(document).ready(function() {
/**
* #version 1.0.0.
*
* Do magic on button click 'LeButton'
*/
$("#LeButton").click(function() {
$("#dialog").css("visibility", 'visible'); // make the div visible.
$("#dialog").dialog(); // Post here your code on forexample poping up your modal.
});
});
</script>
Explanation:
Your tag can be placed on the bottom of your page. Your browser will 'read' the whole page. By saying '(document).ready', your script will be executed once the page has been red by your browser.
For the '.click' part it's a jQuery function you can use. So which
means: once id attribute 'LeButton' (#) is clicked, jQuery will
execute a function, which will alert text in this case.
Documentation:
https://api.jquery.com/click/
Note: Make sure you have jQuery included/enabled.
Link:
https://jquery.com/download/
Note from Simon Jensen:
You should elaborate that the Class-attribute is for styling and the
Id-attribute can be for whatever code or identifying purposes and are
unique. Therefore should people be careful with styling with the
Id-attribute as things might conflict at some point. The ID-attribute
is used to interact with the "#LeButton" attribute.
The PHP can't be run from the client. If you want the dialog to be shown onclick of the button, you must send the element before it's clicked, at the moment when it is sent to the client. You should have the dialog element hidden until the user clicks the button. It could be something like:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<button type=" button" class="LeButton" onclick="$('#dialog').dialog()"> Clicky Clicky!</button>
<div id="dialog" title="Basic dialog" style="display:none">
<p>Image:</p>
</div>
</body>
</html>
You could also change the onclick attribute to a script in the head like this:
<script>
$(function() {
$(".LeButton").click(function() {
$('#dialog').dialog();
});
});
</script>
I recommend you to change the class of the button for an id, and then using #LeButton instead of .LeButton
You can handle this on the client-side without the need to use PHP to do so you need to give your button a unique identifier so whenever the button is clicked you can open the dialog using a simple evenlisener like so:
var dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
close: function() {
// do stuff here whenever you close your dialog
}
});
document.getElementById('my-button').addEventListener('click', function () {
dialog.dialog('open');
});
#dialog-form {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button type=" button" id="my-button" class="LeButton"> Clicky Clicky!</button>
<div id="dialog-form">
Name: <input><br/>
Password: <input type="passowrd">
</div>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<form action="index.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="LeButton" value="an_arbitraty_value">
<input type="submit" class="LeButton">
</form>
<?php
if(isset($_POST['LeButton'])){
echo'<div id="dialog" title="Basic dialog">';
echo'<p>Image:</p></div>';
}
?>
</body>
</html>
When you load the html page $_POST['LeButton'] is not set. Therefore the intended dialog box wil not be generated in the page. In order to have $_POST['LeButton'] set, you should pass it to the html page first, hence the form I added.
Alternatively you could go for a full javascript solution like so:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.hidden { display: none }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button type=" button" class="LeButton" onclick="showDialog();">
Clicky Clicky!
</button>
<div id="dialog" title="Basic dialog" class="hidden">
<p>
This is the default dialog which is useful for displaying information.
The dialog window can be moved, resized and closed with the 'x' icon.
</p>
</div>
<script>
function showDialog() {
$( "#dialog" ).dialog();
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<button onclick="demo()" name="btn">click here</button>
</form>
<script type="text/javascript">
function demo()
{
location.href="http://www.google.com";
}
</script>
</body>
</html>
if the button is placed without the form tag it is working properly. If it is placed inside the tags its not getting redirected when clicked on it.
Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.
If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.
<form>
<button type="button" onclick="demo()" name="btn">Click Here</button>
<!-- or you can use input element -->
<input type="button" onclick="demo()" value="Click Here" />
</form>
<script>
function demo() {
window.location.href = "http://www.google.com"
}
</script>
<html>
<head>
<title></title>
</head>
<body>
<form>
<button onclick="return demo()" name="btn">click here</button>
</form>
<script type="text/javascript">
function demo()
{
location.href="http://www.google.com";
return false;
}
</script>
</body>
</html>
This modification prevent the default action of clicking on a button inside a form (which is submitting it) and relocate to google.
If you don't need the form do not use it.
It should be look like this.
<form>
<button onclick="demo(event)" name="btn">click here</button>
<script type="text/javascript">
function demo(e) {
e.preventDefault();
window.location.href = "http://www.google.com";
}
</script>
</form>
or you can try this also
<form>
<button onclick="demo(event)" name="btn">click here</button>
</form>
<script type="text/javascript">
function demo(e) {
e.preventDefault();
window.location.href = "http://www.google.com";
}
</script>
all! I am having a problem using the a simple onclick method. Kindly please help me out. Here is that code... When i click on the button nothing really happens.
window.onload=initall();
var xhr = false;
function initall(){
var btn=document.getElementById('btn');
btn.onclick=alert('hi');
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="testjs.js"></script>
</head>
<body>
<input type="text" required name="id">
<input type="button" id="btn" value="send">
<div id="result"></div>
</body>
</html>
Onclick should be a function, not a statement. Try
btn.onclick=function(){
alert('hi');
}
window.onload=initall();
calls the function initall and assigns the return value of initall as event handler. That is, initall is executed immediately and not when the load event is triggered.
Similar for btn.onclick=alert('hi');. But in both cases, the return value is not a function.
You have to assign functions to those properties, which are then being called when the event occurs.
function initall(){
var btn = document.getElementById('btn');
btn.onclick = function() { // creates and assigns the function at once
alert('hi');
};
}
window.onload = initall; // assign the function reference, no `()`.
I recommend to read the excellent tutorials at quirksmode.org to learn about event handling and of course the MDN JavaScript Guide for the JavaScript basics.
Try this for onclick javascript function call
function initall(){
var btn=document.getElementById('btn');
btn.onclick=alert('hi');
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="testjs.js"></script>
</head>
<body>
<input type="text" required name="id">
<input type="button" id="btn" value="send" onclick="javascript:initall();">
<div id="result"></div>
</body>
</html>
Try this: http://jsfiddle.net/uxfD4/
the onclick assignment accepts a function. What your code did was evaluate alert('hi'), returning null.