Buttons linked to functions not working in html - javascript

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()">

Related

How to make a p:commandButton submit a form (JavaScript submit action not called)

I am developping several GUIs using primefaces and I would like to warn the user before leaving the website. I found a perfectly working solution here:
How to detect unsaved data in form when user leaves the page?
Here's the JavaScript code I am using (found in the link)
$(function() {
// Set the unload message whenever any input element get changed.
$(':input').on('change', function() {
setConfirmUnload(true);
});
// Turn off the unload message whenever a form get submitted properly.
$('form').on('submit', function() {
alert('I am here');
setConfirmUnload(false);
});
});
function setConfirmUnload(on) {
var message = "You have unsaved data. Are you sure to leave the page?";
window.onbeforeunload = (on) ? function() {
return message;
} : null;
}
My problem is that my primefaces save button is ajax and doesn't call the 'submit' action. And the user will be alerted that he is leaving the website also after saving the page.
The code of the commandButton is the following:
<p:commandButton value="save" id="saveButton" validateClient="true" actionListener="#{myView.save}" update="description name" style="float:right"> </p:commandButton>
I tried to add an "execute form" in a ajax call:
<p:commandButton value="save" id="saveButton" validateClient="true" actionListener="#{myView.save}" update="description name" style="float:right">
<p:ajax execute="#form">
</p:commandButton>
but it also did not work.
If the button is set as $ajax="false"$ everything works fine, but I would like to avoid it.
Can anyone help?
Thanks a lot!
add this function in your script.
function save(){
alert('I am here');
setConfirmUnload(true);
}
and insert onclick="save();" in your commandButton
Isn't it possible to give your button the additional attribute type="submit"?
Don't know if that works in primefaces, works in other frameworks though :)

Javascript displaying form

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";
}

Submit Form in DNN, typical answer not working

I am trying to submit a mailchimp form from within my DNN (DotNetNuke) site. Typically, you just remove the form tags and put some javascript in the onclick event of the submit button...like here. This works and you can see as such here.
But, I am using this popup module, as I want this form to pop up when someone comes to the site. And in this configuration it does not work. It will submit the form to the designated URL, but no form data is passed. This page is here.
A couple of observations:
When you view the page source, the popup form is within the form tags, yet a this.form returns null in the script.
When you inspect the submit button element in Chrome, you see that the html form is then OUTSIDE the form tags.
So maybe there is some javascript with this popup module that is moving the DOM element on page load???
I created a js function to call on the input button submit; code is as follows:
function submitSubscription(clickedElement){
$form = $('body').find('form');
$form.attr('action', 'http://InciteResults.us2.list-manage1.com/subscribe/post?u=6d82b6a028c94cc75005eb4fe&id=1c7ceabac4');
$form.submit();
}
Note: in this function clickedElement.form is returning null.
Because your content is not in a <form>, you're going to put it inside a <form> in order for your script to work. You can either dynamically create a <form> element, or move your content back inside the main <form> when you submit. Try something like this:
function submitSubscription(clickedElement){
var $form = $('<form></form>', { action: 'http://InciteResults.us2.list-manage1.com/subscribe/post?u=6d82b6a028c94cc75005eb4fe&id=1c7ceabac4' });
$('#mc_embed_signup').wrap($form);
$form.submit();
}

Text modified by innerHTML won't stay visible

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" />

HTML Form and Javascript Confirmation

I'm having a problem with submitting a form and Javascript confirmation. Basically, the following Javascript is called when the "submit" button is pressed.
function confirmation() {
var answer = confirm("Are you sure you wish to edit?")
if (answer)
{
window.location = "#editform2";
}
}
However, when I hit the cancel instead of ok, the Javascript executes correctly, because I watch the address bar and it doesn't update to #editform2. The form, however, still submits. It seems to refresh the page. Here's the relevant parts from the form:
//Form is encoded in PHP
<form method=\"post\">
//Form is in here
<input type=\"submit\" value=\"Edit\" onclick=\"confirmation()\">
So the form doesn't know where it's going, it just refreshes the page, and the page happens to be the processor as well. So it's processing even though I clicked cancel and the Javascript should keep it on the same page. Besides moving the processing to a different page, what are my solutions?
It works like this because it's a sumbit button and the form is submitted in every case. Assign an id to the form and change the input type:
<form method="post" id="formid">
<input type="button" value="Edit" onclick="confirmation()">
and call this function on click:
function confirmation() {
var answer = confirm("Are you sure you wish to edit?")
if (answer)
{
document.getElementById("formid").submit();
}
}
Don't use the onclick event of the submit button, use the onsubmit event of your form:
document.forms[0].onsubmit = function () {
return confirm("Are you sure you wish to edit?");
}
You may want to add a id attribute to your form to identify it.
Keeping event binding on JavaScript code; not on inline attributes on your HTML, makes your code more maintanable and easy to debug.
try:
return answer;
at the end of the function and make sure the onclick method returns this. Like so:
<input type="submit" value="Edit" onclick="return confirmation()">
This would make the function return false and have the form not be posted.

Categories