I am using javascript to show text on button click. When I click the button, the text appears then disappears in a flash after page reload.
This is the paragraph that contains the text after clicking the button
<p class="lead" id="class"><strong style="color: red; font-size: 15px; display: none;"></strong></p>
This is my button:
<button type="submit" class="btn btn-primary" onclick="myFunction()">Search</button>
This is my script
<script>
function myFunction() {
document.getElementById("class").innerHTML = "Class current balance total";
}
</script>
How can I make the text show and not disappear after page refresh?
PS : I am very new to javascript.
That is because of type="submit"... try <input type="button" ... /> instead.
You cannot do that with this way. That's not how JS works. In order to keep the data back to the state it was, even after refreshing the page, you need to do that with Localstorage.
Localstorage is a concept in JS, while you are displaying the data after the event happen, you are storing the value in your browser's localstorage, so since the value is already stored in browser, you should be able to retrieve that value.
it shud be something like this localstorage.setItem to save the value and localstorage.getItem to access the saved value and display it on your page.
Hope that answers your question!
I do believe that local storage would help with this problem. I have implemented a solution here for you. Local storage allows web applications to store locally within the user's browser. It is different than cookies. What I have done here is stored your text into local storage as a key/value pair. Local storage retrieves it using the "getItem" method. You can see a demo of this code here
The code:
<script>
//an immediately invoked function that checks to see if the text is in local storage already
(function(){
//if the text is in local storage, set the html
if (localStorage.currentTotal){
console.log(localStorage.currentTotal);
document.getElementById('class').innerHTML = localStorage.getItem("currentTotal");
}
})();
//function that gets called for an onclick event
function myFunction() {
// Store in local storage
localStorage.setItem("currentTotal", "Class current balance total");
//set the inner html to what is in local storage
document.getElementById("class").innerHTML = localStorage.getItem("currentTotal");
}
</script>
The form tag is causing a page reload. Remove the form tags and it should work fine.
Try changing display:none to display:block in your script.
function myFunction() {
document.getElementById("class").innerHTML = "Class current balance total";
document.getElementById("class").children.style.display = 'block';
}
issue with input value is on refresh it disappears,localstorage does not work,but you can get it to work,do setItem code,and getItem but have window.onload and inside document.getElementById("demo").innerHTML =localStorage.getItem("peanuts");you see localStorage has stored info but to display you need to retrieve it,f12 to check its stored,also i add if(typeof(Storage) !== etc., to my code when using localStorage
Related
I have a simple page, which in URL https://www.myshop.com/user/quickact, and the html looks like :
<input id="pid" />Keyin Product ID
<input id="count" />Keyin product count
<a id="addList" href="javascript:void(0);" class="buttonAction">Add to List</a>
<!--some external js file handle click event for this link-->
When user clicked hyper text [Add to List], my page will :
Get pid/count value, put into a javascript array.
Reset pid with '', reset count with 1'.
Things I'm now doing in GTM are :
When PageURL contains "user/quickact"
And user clicked link with ID "addList"
Get pid/count value, and send them into GA via GTM tag.
Here's how I read them in GTM's custom variable
function()
{
var pid=document.getElementById('pid').value;
var count=document.getElementById('count').value;
return pid+','+count;
}
My problem is, GA event did fired, but the value...my custom variable always return ',1'.
It means my GTM tag fired after page's action, so it can only read reset value, not the actual value user key-in.
Can any one gives suggestion to solve this ?
I'm not sure if there's a solution to control the order of execution of multiple events, but one workaround would be to provide the required data for GTM with the same functionality, that you are using to get the values and to reset them. This assumes, that you have control over this code.
You could do something like this:
function yourFunctionForButtonClick() {
//Your code to get pid/count value, put into a javascript array.
//new code to provide data to GTM
dataLayer.push({
event: 'newPidProvided',
pidcountvalue: pid + ',' + count
});
//Your code to reset pid with '', reset count with 1'.
}
In this case, you need to set up your GTM trigger to listen to newPidProvided event instead of clicks, while still checking for "user/quickact" to be present in the URL. (Which could also be done in the function, if no other tag or trigger uses pid+count in GTM on other pages.) You'll also have to use a dataLayer variable instead of custom JavaScript type.
i am hoping someone will help me, i am pulling out my hair for the last few hours...!
I am using asp.net web forms with c#
I have the following button in my menu , this button opens up a page that lists selected properties for realtor…
htmlCode.Append("<button type='button' class='btn btn-basic' id='btnEnquire' onclick='openEnquiryPage()'> <span class='glyphicon glyphicon-th-list'></span> View my list </button>");
function openEnquiryPage() {
location.href = "EnquiryPage.aspx";
//get the list from the storage into the hidden field
//getListOfProperties();//not in use...
}
The list is stored in localstorage as Json, I can see the correct data in the text box on the page
var retrievedData = localStorage.getItem("propertyArray");
proplist2.value = retrievedData;
declared as follows in asp.net control
<asp:TextBox ID="TextBox1" runat="server" Text="initial"></asp:TextBox>
BUT in the hidden field, the data is always = ""
<asp:HiddenField ID="txtPropList" runat="server"></asp:HiddenField>
javascript to populate the hidden field...
function getListOfProperties() {
document.getElementById("body_content_txtPropList").value = retrievedData;
var proplist2 = document.getElementById("body_content_txtPropertyList");
proplist2.value = retrievedData;
}
when I debug the following lines in the code behind ...
Page.ClientScript.RegisterStartupScript(this.GetType(),"prop", "getListOfProperties();",true);
_propertyListJson = txtPropList.Value;
propertyListJson I always = “”
Thank-you in advance.!
If you want to use the hidden field then you should use
<%=txtPropList.ClientID%>
as on when you render the page and see it in inspect element server would render the different Id so it would not store the value in hidden field simply so it is feasible to use ClientID to create the static mode. But as on when you call the javascript function from the c# code then it would call the javascript function but it would not wait for it and execute the next line of code as on at that time the value is not store in hidden field so it would return the null value.
If you want then call the function of javascript on page load event and then click the button and retrieve the value it would successfully retrieve the value but i dont think that these would be the feasible code from my opinion
I suggest to create the WebAPI which would simply get the the data from the localstorage and perform the operation
And webAPI can be easily called from javascript using ajax call
I hope this would be helpful and answer is satisfactory 😊☺
Thank You ☺🙂
I want to make a WhatsApp share button for my Android app. All is set, the only problem is that I can get the textarea value only when I click on a button:
<button onclick="GetValue ();">Get the value of the textarea!</button>
I want to GetValue(); without the onclick.
This is my WhatsApp code:
Share
I want the textarea value in the data-text attribute and I am using it like above but it doesn’t work.
This is my textarea:
<textarea id="input_output" style="width:95%;" rows="10" wrap="soft">Enter Text Here..
</textarea>
Is there any way to get the value without clicking the button?
This is my function:
GetValue () {
var area = document.getElementById ("input_output");
alert (area.value);
}
Using javascript
document.getElementById("input_output").value
Using jQuery
$('#input_output').val();
EDIT:
Probably misunderstood, but it's very hard to understand your question.
As a javascript click event always fires before the "href" sets in, you can set the value when the link is clicked.
$('a').click(function(){
$(this).attr('data-text', $('#input_output').val());
return true;
});
How do I retain the value of like count even after refreshing the page in ruby on rails?
<p>
<input type="button" value="Like" id="countButton" />(<span id="displayCount">0</span>)
<script type="text/javascript">
var count = 0;
var button = document.getElementById("countButton");
var display = document.getElementById("displayCount");
button.onclick = function() {
count++;
display.innerHTML = count;
}
</script>
</p>
The above code increments the value of like each time we hit the like button. After refreshing the page the value of count be comes 0. What to do to retain the values of like after refreshing the page?
Web pages are stateless so every time you refresh the page, any values will be lost unless you specifically save them. If you want to save them forever, you will need to create a database table that saves the number of likes. Each time the like button is clicked you will need to save the new value to the d/b.
You will need a database backed model for whatever it is that is being liked. You may want to look at the rails guides, active record and learn about REST and RESTful routing
It all depends on what you want to do with the counter.
If it is user related, you can store the value in the user's session
like this : session[:counter] = 2.
If the counter should be shared between all users, you will have to create a new field in your database to store it.
I have the following drop down list which I am able to append new listings to.
<script>
function Add()
{
var x = document.getElementById("MySelectMenu");
var opt = document.createElement("option");
opt.value= document.getElementById("url").value;
opt.innerHTML = document.getElementById("name").value; // whatever property it has
x.add(opt);
} </script>
<select id="MySelectMenu">
</select>
<button onClick="newSrc();">Load</button>
Name: <input type="text" name="name" id="name">
URL: <input type="url" name="url" id="url">
<button onclick="Add()">ADD</button>
What currently happens (for obvious reasons) is once the user closes the browser page, the list obviously returns to its previou state. How do I make it so the list remembers the appended items?
You can use cookies to save local data for the user, whenever the user adds an item to the list update the local cookie and when the page loads for the first time after a user comes back use an onLoad event to load the items from the cookie into the list.
this ofcourse will only be saved on the BROWSER level for that user, meaning if the same user opens the page in a difrent browser or on a difrent device these changes will not be saved.
to save info on a global nature you will need server side proccessing.
Since javascript or jQuery are front-end scripting languages, the changes made to a page will not be saved.
You would have to explicitly save the newly added items either in Cookies or Session using the following add-on plugins,
https://github.com/carhartl/jquery-cookie
https://github.com/AlexChittock/JQuery-Session-Plugin
And then handle the newly added elements when the page loads at a later time.