How do I add a cookie onclick of a button in Drupal7? - javascript

I have an article (Full Html) and I have a button. I want, when the button is clicked, to create a cookie and remember that the button is clicked. This is the code I currently have:
<button id="test" value="test" onclick="Press()">Press</button>
<script>
function Press() { text
}
</script>
How should I create the press function? This is the HTML of the article

function Press() {
document.cookie="button=pressed";
}
document.cookie will create a cookie..

Related

How to Auto Click in HTML Button

<h1>Welcome to My Page!</h1>
<h2>My name is Bob.</h2>
<h3>I hope you like it here.</h3>
<embed src="MY WEBSITE LINK" style="width:500px; height: 300px;">
<input type="checkbox" id="btd" onmouseover="myFunction()" onclick="alert('clicked')">
<script>
jQuery(function(){
jQuery('#btd').click();
});
</script>
I have the code. But didn't Work.
http://www.imagebam.com/image/31ac1b820717083
How to Auto Click Button Continue, from Image?
We can't do auto click in HTML, but we can call any function that the button does with Jquery.
To work Jquery code, you want to add this to your code
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
Actually when we click any button, it calls a function, that may be our own function or built in one.
Here Javascript can easily call any function without any button
Like this
//define the function
function alertsomething(){
alert("Hey, This is an alert inside that function");
}
//function works when button clicks
$("#btd").click(function(){
alertsomething();
})
//function automatically when page loads
$(document).ready(function(){
alertsomething();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btd" >Click me</button>
Here are the two ways to call a function. One is when you click the button and another one is when your page loads, that function will call automatically...
Thanks
<script> setInterval(function(){ document.getElementById('btn').click() }, 10000); </script>
Its working script for me
Send "data" from FORM 'POST' to refresh HTML page whith PHP code

Redirecting to site from an existing button being clicked

I'm quite new to coding. I have a button with the ID='test'. I want to run a line of code in javascript or HTML to redirect users to a site when that button is clicked.
Button:
<button id="test" type="submit" onclick="setNick(document.getElementById('nick').value); return false; return false" class="btn btn-play-guest btn-success btn-needs-server primaryButton" data-itr="play_as_guest">
I tried running this:
<script>
document.getElementById("test").onclick = window.location='http://www.google.com/'
</script>
However, this would redirect straight away. I want it to redirect only when the button is clicked. Please help me fix this.
Many thanks.
You are assigning the redirect to the button where you need to assign it to a function.
You can try something like this:
document.getElementById("test").onclick = function(){
window.location='http://www.google.com/';
}
I would suggest use onclick on button, for example
your button will look like this
<button id="test" onclick="redirect()">Redirect</button>
Now in the script write the redirect function as
<script>
function redirect() {
window.location.href = "http://www.google.com/";
}
</script>

On click of button reload page and change button text

I'd like to have a click on a button reload the page and change the text inside the button.
For reload I got:
Javascript:
function reloadPage(){
window.parent.location = window.parent.location.href;}
HTML:
<button type="button" onClick="reloadPage()">Start</button>
<script src="reloadpage.js"></script>
After click, the text in the button must change from "Start" to "Try Again!"
How can I do this?
Thank you.
You could do this by adding a query string on reload, and then have a script that detects the query string and changes the text of the button onload.
JavaScript:
function reloadPage(){
window.parent.location = window.parent.location.href+"reload=true";}
function checkQString(){
// get query strings and store reload qstring in variable
if (reload) {
document.getElementById('btn').innerHTML = 'Try Again!';
}
HTML
<button id='btn' type="button" onLoad='checkQString();' onClick="reloadPage()">Start</button>
<script src="reloadpage.js"></script>
You can use Cookies. With js you can use https://plugins.jquery.com/cookie/ Or can use server side cookies

Drupal 7, execute mySQL query oncick of a button

I have a local Drupal 7 website and an article with a button in it.
I want, when the button is clicked to run a MySQL query and save username and email of the user who clicked the button.
Can I do this with JavaScript? This is the html of the button and the js script I have created at the bottom of the article edit:
<button id="test" value="test" onclick="Press()">Press Here</button>
<script>
function Press() {
var test= document.getElementById("test");
test.innerHTML="Thank you";
localStorage.value=("ok");
}
</script>

Add more button not working on my admin panel

This code is working but by clicking on the button then the page reload automatically.So, the new div is not appeared.
I can't find out what is the problem. Can you help me please.
<script src="jquery.min.js"></script>
<script>
function newJacky()
{
var new1= "<p>one more added</p>";
$(".apn").append(new1);
}
</script>
<button onclick="newJacky()">Add New</button>
<div id="apn" class="apn"></div>
This code is working but by clicking on the button then the page reload automatically (...)
From the above, I suspect that the <button> is placed inside a <form> element. That would explain why your page is reloaded after clicking the button.
An example using your code with button placed inside form. This would not happen if the button is placed outside the form - example
Solutions:
You can add a type=button attribute to the button (type=submit is by default if the attribute is not specified):
<button type="button" onclick="newJacky()">Add New</button>
DEMO 1
type attribute of <Button> element. Possible values are:
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values.
button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
Reference
Prevent default form submission using event.preventDefault() (add "my-btn" class to the button):
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".my-btn").click(function(event){
event.preventDefault();
var new1= "<p>one more added</p>";
$("#apn").append(new1);
});
});
</script>
<button class="my-btn">Add New</button>
<div id="apn" class="apn"></div>
DEMO 2
What you are getting from the page using jquery is not specified as an elements class or div. Like below:
$("apn").append(new1);
This should either be $(".apn").append(new1); where you are getting an element with class apn, or $("#apn").append(new1); where you are getting an element with div apn.
try that
If you are using jquery, I'd recommend using the on click functionality it provides:
<script src="jquery.min.js"></script>
<script>
$(function() {
$('.addNewBtn').click(function() {
var new1 = '<p>one more added</p>';
$('#apn').append(new1);
});
});
</script>
<button class="addNewBtn">Add New</button>
<div id="apn" class="apn"></div>
Just make sure to add the class to the button.
Fiddle

Categories