Text modified by innerHTML won't stay visible - javascript

I have a function that is supposed to display a message in a P element if conditions are met. The function runs fine but the text that is sent to 'output1' appears briefly when you press the button and then disappears. I have tried putting the JS in the head and in the body but it doesn't seem to make a difference. Any ideas? Thanks.
HTML:
<p id="output1"><p>
Javascript:
<script>
function logicProcess() {
// alert('function launched');
if(document.getElementById('q1Y').checked || document.getElementById('q2Y').checked || document.getElementById('q3Y').checked) {
document.getElementById("output1").innerHTML = "Sorry, you don't qualify for our shared ownership properties";
}
else {
document.getElementById("output1").innerHTML = "You may qualify for our shared ownership scheme. Please complete the registration form.";
}
}
</script>

The reason the innerHTML is not staying visible is because there is some type of onclick method that is resetting the form. If that is true edit your onclick method like so:
onClick="function();return false;"
The change in here is the ;return false;

You haven't show us how you are calling that function, but the odds are that you are doing so in response to a form's submit button being pressed.
This will modify the DOM, and then submit the form, which will cause a new page to be loaded.
You need to cancel the default behaviour of the form to stop it being submitted.
function logicProcess(evt) {
// All your other code
evt.preventDefault();
}
document.getElementById('myForm').addEventListener('submit', logicProcess);

I think you are using input type submit, so the meaning of submit button is to submit the form and reload it, that's why your output is not holding your inner html.
change it to
<input type="button" />

Related

javascript confirm box before leaving inside HTML

I want to use confirm() box to check whether users want to exit the current page or not when they click cancle.
My goal is if the user clicks yes, then it will go to the previous page, if the user clicks no, then it will stay in the current page.
Inside the html file, the input field has onclick function like below.
<input action="action" id="cancle" onclick="return DeleteFunction()" type="submit" value="Cancel"/>
And inside the script field, I implemented the function like below:
function DeleteFunction(){
var result = confirm("Really leaving?");
if(result){
window.history.go(-1);
}
else{
return false;
}
}
However, when I click yes, then it goes to the page where it submits the form, which means window.history.go(-1) does not work.
Is there any possible ways to make it work as I desired?
You can also use window.history.back(); if it is not working but it works there is no issue with the line. However, you do not need else condition here, please remove it. Try this piece of code:
let res = confirm("Really leaving?");
console.log(res);
if(res){
// window.history.back();
window.history.go(-1);
}

Buttons linked to functions not working in html

I have a button that is linked to an event listener. When the button is clicked, it is supposed to change the text of a paragraph from 'Hello' to a confirmation message. However, when I click the button, nothing happens. I checked the console log, but there aren't any errors. The script is contained in the head (in a tag), while the paragraph and button is contained in the body.
The function:
document.getElementById("sendForm").addEventListener("click", function() {
document.getElementById("formMessage").innerHTML = "Thank you for your feedback! We'll try to respond to your message promptly.";
});
The button:
<input type="submit" value="Send" id="sendForm">
The location that is supposed to be changed:
<p id="formMessage">Hello</p>
If the input tag is inside a form tag, the button is meant to submit the form so basically the page reloads after submission. In such a case you prevent the default action of the element like so. Also if the script is inside the head tag make sure it is wrapped by a window.onload function so the bindings are set after the window is loaded.
window.onload = function(){
document.getElementById("sendForm").addEventListener("click", function(e) {
e.preventDefault();
document.getElementById("formMessage").innerHTML = "Thank you for your feedback! We'll try to respond to your message promptly.";
});
}
Here's some HTML wisdom: Use the 'button' tag it will make your life a WHOLE lot easier.
<button onclick="func()">Hello</button>
function func()
{
document.getElementById("formMessage").innerHTML = "Thank you for your feedback! We'll try to respond to your message promptly.";
}
I just noticed you are using a "submit" input. You can also do this if you are using a form:
<form onsubmit="func()">
<input type="submit" value="Submit" />
</form>
function func()
{
document.getElementById("formMessage").innerHTML = "Thank you for your feedback! We'll try to respond to your message promptly.";
}
It also could be because of inproper placement of the "addeventlistener" line. If that line runs before the DOM is loaded it won't work. I recommend adding one of these to your application:
window.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("sendForm").addEventListener("click", func());
});
OR
<body onload="functionYouWantToCallOncePageIsLoaded()">

JavaScript method not working in HTML

So I have a button that calls the AllEntered() javascript method when it is clicked and as you can see in the final if/else, it should either got to submission.html or admin.html but instead of going to either of those it just reloads the current page that I am on. This is all inside a form by the way and its purpose is to check if all checkbox inputs are checked. Also the alert doesn't i put for loop-number doesn't generate either.
zbutton onclick="AllEntered()" class="myButton">Submit</button>
<script>
function AllEntered()
{
var ids = {"freshSoph", "participate", "respect", "leave", "illegal", "alcohol", "typeName"};
var loopNumber = 0;
for(var i = 0; i < ids.length - 1; i++)
{
if(document.getElementById(ids[i]).checked)
{
loopNumber++;
alert(loopNumber.value);
}
}
if(loopNumber = ids.length)
{
window.open("submission.html");
}
else
{
window.open("admin.html");
}
}
</script>
Open your browser developer tools. Read the error message.
You have a typo. An array is created with [], not {}.
(And of course it reloads the page, that is what clicking a submit button inside a form does).
In your form, below this button, add one more button as a hidden input of type submit like so:
<button hidden type="Submit">
Your problem could be caused by the fact that you are missing a submit type button.
When a form has no button of type Submit ( which on click will submit the form to its target or TO ITS SELF if no target is specified. This is what we call postback, as in posting back to your self ) it will use any buttons click as a submit event raiser.
By adding an actual submit button you remove this default behaviour, while also ensuring the user cant click on it, as the control is not active when its hidden.

Reading form value fails - Javascript

I`m trying to read the value from an input and fill it in one empty div.However , the value is being read but when I click the button submit , the value appears for like 0.2 seconds on the empty div , and then , disappears ... any suggestions why?
HTML :
<div id="vuvedenaSuma">
</div>
<form action="">
<input type="text" id="suma" required="required" placeholder="Въведи сума" name="Suma" />
<button id="submit">Submit!</button>
</form>
Javascript:
function valueRead(){
var vuvedenaSuma = document.getElementById('suma').value;
document.getElementById('vuvedenaSuma').innerHTML = vuvedenaSuma;
}
document.getElementById('submit').addEventListener('click',valueRead);
I want to make it withe eventListener , not onclick attribute on the button.
Your form is being submitted right after the execution of the function.
You can prevent the default event(form submission) to be called with event.preventDefault() like this:
function valueRead(e){
var vuvedenaSuma = document.getElementById('suma').value;
document.getElementById('vuvedenaSuma').innerHTML = vuvedenaSuma;
e.preventDefault();
}
https://jsfiddle.net/ez0qchyq/
Your event is firing, then the page is likely reloading because of the form firing. Try using
event.preventDefault()
and it will prevent the form from submitting.
Edit: Also, the comment below me is absolutely correct. Remember to pass the event into the function.
The default way that a form "submits" is to send a new page request to the server, using the given inputs as parameters. From there, a serverside language like PHP might save them. Often, this would churn out an "Operation successful!" page or similar.
In your case, your form's action is blank, meaning it will "submit" to the page it's on. Since your page is pretty basic, it will reload without any of the sent information appearing in it.
As John Kossa suggested, you could intercept this by adding an argument, let's say, "evt", to the parentheses of the valueRead function, and then calling evt.preventDefault().
When you click the button then you send the form and the page is automatically refreshed. To prevent this behavior try this solution
function valueRead(e){
e.preventDefault();
var vuvedenaSuma = document.getElementById('suma').value;
document.getElementById('vuvedenaSuma').innerHTML = vuvedenaSuma;
}
Also, you might want to use the event listener on submit:
document.getElementById('formName').addEventListener('submit', valueRead);

Check the value of hidden field - Stay on page or Proceed to Next Page

I want to check the value of a hidden field triggered by a "h ref onClick" javascript function. If it is"empty", I want to prompt the user to rate my page using a ratings form (thereby staying on the same page and ignoring the h ref target page. If the value is "rated", I want to simply allow the user progress to their intended page.
Here is some code I've developed so far but doesn't really work that well:
function ratings_prompt(){
var checkIfRated = document.getElementById("hidden_rating");
if (checkIfRated.value == "empty")
{
alert("The Field is set to empty - please rate the form!");
checkIfRated.value=="rated";
}
}
Edit: Sorry but I cannot seem to get all the code into the codeblock.
GF
can't really help out all that much w/out seeing more code and also you didn't really say what the problem is..."doesn't really work that well" is kind of vague...but basically you would have in your link onclick your function call, and you should pass a "this" reference to the function, and you should have return false; in your onclick as well. Then in your function, if the hidden field is not empty, do like location.href = that.href
link
<script type='text/javascript'>
function yourFunction(that) {
if (document.getElementById("hidden_rating").value != "empty") {
location.href = that.href;
} else {
// didn't rate
}
}
</script>

Categories