I have one print button & on click of that button I want to print other pdf as per the link will provide not the same page. but for now print functionality is working on page load not on button click
function print (doc) {
var objFra = document.createElement('iframe');
objFra.style.visibility = 'hidden';
objFra.src = doc;
document.body.appendChild(objFra);
objFra.contentWindow.focus();
objFra.contentWindow.print();
}
print();
<input type="button" id="bt" onClick="print()" value="Print PDF"/>
Your print method is getting invoked on button click, but since it's visibility is set to hidden, it is not visible. You also have print method invoked on the page load.
function print (doc) {
var objFra = document.createElement('iframe');
//objFra.style.visibility = 'hidden';
objFra.src = doc;
document.body.appendChild(objFra);
objFra.contentWindow.focus();
objFra.contentWindow.print();
}
print('path');
<input type="button" id="bt" onClick="print('somePath')" value="Print PDF"/>
You may call your print function on $(document).ready(function(){}) function.
Related
I want my webpage to auto click a button when the page is loaded. This is my button:
<button class="configure-product configure-product-simple elementor-button" type="button" data-price="95" data-product_id="1934">Stel samen!</button>
I think this button calls a JS function of a wordpress plugin, so that you open the product configurator. If i copy this button html on another page tho it wont work. It will only work on the product page.
Im very new to developing, so i could really use some help. Does anyone have any ideas how to implement this?
window.onload = function() {
document.getElementById("my-button").click();
}
<button id="my-button" class="configure-product configure-product-simple elementor-button" type="button" data-price="95" data-product_id="1934">Stel samen!</button>
this is how to do it in jQuery
$(document).ready(function(){ //on document loads (you could change to window also)
$('#click').click(); // click
})
$(document).ready(function(){
$('#click').click();
})
$('#click').click(()=>{
console.log('thanks!');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="click"> Click Meeh </button>
another shorter way to do it in vanilla js
document.onload = document.querySelector('#click').click();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="click" onclick="console.log('hi')"> Click Meeh </button>
other ways to do it
https://stackoverflow.com/a/38517365/18001301
window.onload vs document.onload
document.getElementById("input").click();
I've build an express app and its working perfectly, in the final stage I want to add some alert messages to pop when some button are clicked. But my alerts are poping without even clicking, the moment page containing the button is loaded pop up shows
In my index.js file I have a form button for deleting
<form
action="/grades/<%=grade._id%>?_method=DELETE"
method="POST"
class="delete-form"
>
<input
type="submit"
class="btn btn-danger mt-3"
value="Delete Class"
id="delBtn"
>
</form>
I've given ID delBtn for the button,
and inside my main.js I have
var delBtn = document.querySelector('#delBtn');
delBtn.addEventListener('click', alert('Button Clicked'));
How can I get this to work properly..
This line is the problem. You call alert immediatelly.
delBtn.addEventListener('click', alert('Button Clicked'));
it will behave just like this
alert('Button Clicked');
delBtn.addEventListener('click', undefined);
The addEventListener function expects a string and a function but you are not passing in a function but undefined since that is what alert function returns.
So all you need is this
delBtn.addEventListener('click', function(){
alert('Button Clicked');
});
I think you missed callback function in event listener
delBtn.addEventListener('click', function(){alert('Button Clicked')});
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
I have a button which when i click it i would like it to click a hidden action link.
The click on the action link is not doing anything. but if i click the action link my self it works, just not when i make jquery click it?
function myClickFunction() {
$('#CloseLink').click();
//$(document).on("CloseLink", "click", function())
}
<input id="btnClose" type="button" value=" Close " onclick="myClickFunction()"/>
<div style="visibility:hidden">
#Html.ActionLink("Close", "APClientIndex", "Home", null, new { id="CloseLink", #class = "btn btn-primary niceButton" })
</div>
Plain html:
<input id="btnClose" type="button" value=" Close " onclick="myClickFunction()">
<div style="visibility:hidden">
<a class="btn btn-primary niceButton" href="/Home/APClientIndex" id="CloseLink">Close</a>
</div>
If what you want is to simulate the user clicking an anchor tag, I don't think that is possible with javascript
What you can do is read the anchor tag's href attribute and change the window location manually:
function myClickFunction() {
var href = $('#CloseLink').attr("href");
window.location.href = href;
}
If I understand what you are trying to do is to fire the click action by javascript?
With $('#CloseLink').click(); you are not firing the click event, you are binding an action to the click, but you don't have any function inside like $('#CloseLink').click(function(){...});
So if you want to fire the click event you need to do $('#CloseLink').trigger('click');
$('#CloseLink')[0].click()
Is what i used as suggested by tewathia in the comments section.
The jQuery click method fires the onclick event of that element. In order to simulate a click on an anchor a tag, you need to run the click method of the DOM element itself.
I have an iframe like
<iframe id="Frame1" name="Frame1" style="width: 810px;overflow:hidden;height:525px;border:none;"src="templates/template1.html">
</iframe>
When I click generate button
the generate function will call.In generate function i changed the src of the iframe to template2.html.
<input type="button" id="btngenerate" onclick="Generate();"/>
<a id="print" onclick="OnPrint();">Print</a>
When I click on the print link after clicking the generate button,I want to print the iframe.
function generate()
{
var billPath = "templates/template2.html";
$("#Frame1").attr("src", billPath);
}
function onPrint()
{
window.frames["Frame1"].window.focus();
window.frames["Frame1"].window.print();
}
It works in Firefox. But not in chrome.
In chrome the template1.html will be printed.I want to print template2.html.
When I call window.print(); it will print the whole page.
Please help me...
Is it possible for you to use a separate window to print your content (like I described here https://stackoverflow.com/a/23281929/701869) ?