I am a new user here.
I have a HTML file with a button, that when pressed I want to display a form in the same div. I have used document.write() on the click event, but this turns the webpage entirely white and doesn't display the form in the same div the button is in.
Does anybody know what I need to do to display a form when the button is clicked?
Javascript code:
function addListeners()
{
document.getElementById('button').addEventListener("click", change_border);
function change_border()
{
document.write("form here");
}
}
window.addEventListener("load", addListeners);
HTML code:
<button id="button" style="margin-left:5%;">Change Profile Picture</button>
I do not want the page to refresh.
Do I need to learn AJAX?
This doesn't require AJAX at all.
You can place the form in the div and then use CSS on the form to make it hidden.
div form#theform {
display: none;
}
Then, you can display the form (overriding the CSS) on the click of the button.
<button onclick="showForm()">Press me</button>
And this is the JS:
function showForm() {
document.getElementById("theform").style.display = "block";
}
Zack. document.write will clear the whole page (if it has already loaded) it is a pretty old command. You could set a class on the form which will hide it and then when the button is clicked, either through Jquery or plain JS remove that class so it is visible
try to add these lines to the function,
function change_border()
{
document.getElementById("form1").style.display = "block";
}
Related
Initial situation
I have several functions within an app script
The functions are started via a sidebar - by clicking on different
buttons
I have created the sidebar with Bulma CSS
Problem
When starting the function via the sidebar, no message is shown that the function has been started - unlike when starting the function directly or via a custom menu.
This can confuse the user because he clicks and nothing happens at first.
I don't know if this is generally the case with a sidebar, that no indication of the executing function is displayed, or if this has something to do with the event that triggers the function:
<button onclick="google.script.run.myFunction()" class="button is-link"></button>
My idea
Bulma CSS also has a loading button: <button class="button is-loading">Loading</button>
My idea is that when a button is clicked and the function starts, that the button then becomes the loading button.
As long as the function is working. When the runtime of the function ends, the loading button should become a normal button again.
What is the best way to implement this?
In your situation, how about the following sample script using withSuccessHandler?
Google Apps Script side:
function myFunction() {
Utilities.sleep(1000);
return "ok";
}
HTML side:
<button onclick="run()" id="button" class="button is-link">button</button>
<script>
function run() {
const button = document.getElementById("button");
button.className = "button is-loading"
google.script.run.withSuccessHandler(e => {
console.log(e); // Here, you can see the returned value.
button.className = "button is-link";
}).myFunction();
}
</script>
In this sample, please load Bulma CSS.
When the button is clicked, the button is changed to the loading situation of button is-loading. When myFunction of Google Apps Script is finished, the button is changed to the initial situation of button is-link.
Reference:
withSuccessHandler(function)
Lets say I want to go to the previous page in Chrome and I click "<-". Can I add an EventListener or some kind of function that activates when I click the button.
function goBack() {
document.getElementsByTagName("body")[0].style.overflow = "auto";
}
So in the example above. I want to call goBack() function when user goes to previous page that changes body overflow to auto.
When I searched how to solve this problem I only found instances on how to move back using history.back().
Yes, this is possible. You could actually do this in either jQuery or plain JavaScript, based on your preference.
Here is how you would do it in jQuery:
$(window).unload(goBack);
Alternatively, here is javascript:
window.onbeforeunload = goBack;
That should do it!
Hi I am trying to achieve the hiding and showing the table. while loading the page table should be hide and when I click button it has to visible. for that I have created a table under div and created a button and created script function.
Here is table with div
//div for table
Name of Company
Address of Company
Company Phone Number
Code for button,
<asp:Button ID="AddMore_Button" runat="server" Text="Add More" class="btn btn-primary" OnclientClick="AddMore_Button"/> //button for displaying table
when I click the button nothing happens.
Here the script,
<script>
$(document).ready(function () {
$('#AddMoreDetails').hide()
$('#AddMore_Button').click(function () {
$("#AddMoreDetails").fadeToggle('fast');
});
});
</script>
While page loading table is hiding but when I click button it is not triggering. Any help..??
the code you wrote works fine: https://jsfiddle.net/n3n82epr/
$(document).ready(function () {
$('#AddMoreDetails').hide()
$('#AddMore_Button').click(function () {
$("#AddMoreDetails").fadeToggle('fast');
});
});
Maybe your HTML code has some incorrect tags inside. You can check your page with : https://validator.w3.org/
Your code should work fine. The table will be visible on page load till the scripts run. So its better to add a style display:none to table.
your code works fine, please check your id/class name that you are specifying
$(document).ready(function(){
$('p').hide();
$("button").click(function(){
$("p").fadeToggle('fast');
});
});
I am using jQuery CustomBox modal. I have it all working fine but I want the div behind it (BUT NOT THE BACKGROUND IMAGE) to disappear when modal is clicked. I have managed that, but not too sure on the code to make it reappear again after the modal is closed. At the moment I have to refresh the page in order for it to come back.
Here is the code I am using so far: http://codepen.io/doolz77/pen/esoHB/
I have not included the modal due to the amount of extra code, however, here is a link to the actual page
to make the modal appear just click on the 'joey' link.
Thanks!
EDIT: At the moment it is controlled by jQuery. The call which is placed in the footer is:
<script>
$(function () {
$('#fadein').on('click', function () {
$.fn.custombox( this {
effect: 'fadein'
});
return false;
});
});
</script>
This fades the modal in and out. Would I just need to place some code here for the #wholePageContainer div to re-appear??
You need to store the html before deleting it to retrieve later. Or you can use show/hide To reduce the pain and achieve desired functionality:
function clearBox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "none";
}
function showbox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "block";
}
Demo
Is this what you were looking for:
http://codepen.io/anon/pen/giFEL
Edited:
Explanation to the above link:
In the above link i have made the html and body tag as 100% and the div element who's content is been removed to some percentage i.e 50%, This will keep the div occupy space event if it is empty.
Next i am storing the html content to a hidden div element and restoring it back to the div when required.
Is it possible to Show Hide a button on a Webpage when a User's Javascript is turned off?
I need to show or Hide a Button element on my webpage depending on whether or not the User turns on his Javascript ON.
I know I can show content when JS is disabled using the <noscript> tag, but how could I enable/disable a button when JS is disabled. I'm basically working on an expand/collapse kind of button scenario where clicking the button would expand/collapse the content.
Are there any possibilities of achieving this?
Thanks in advance for your response.
You could initially hide your button and then display it with javascript right away onload. e.g.
<button id="btn" style="display: none;">JS Button</button>
<script type="text/javascript">
document.getElementById('btn').style.display = "block";
</script>
You can have a link or a button set like this :
<div id="buttonContent" style="display:none">
Button/Link content goes here.
</div>
Then, we show the with Javascript :
<script type=text/javascript>
window.onload = function ()
{
document.getElementById('buttonContent').style.display = 'block';
}
</script>
That way, if the user's javascript is disable, the windows doesn't show, if you want the opposite, just start showing it and then hidde it with JS.