When a user puts in some text into my form and clicks the button, I want to hide the form and show a "thanks" message to the user to let them know I got their text.
By the way, this is for embedding into a Chrome extension pop-up.
Here's what I have:
<!doctype html>
<html>
<head>
<title>Extension</title>
<style>
body {
min-width:200px;
min-height:75px;
overflow-x:hidden;
}
img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
.visible{
display:block;
}
.invisible{
display: none;
}
</style>
<script>
var PopupController = function () {
this.button_ = document.getElementById('button');
this.form_ = document.getElementById('userIdForm');
this.userId_ = document.getElementsByName('userID')[0];
this.submitThanks_ = document.getElementById('submitThanks');
this.addListeners_();
};
PopupController.prototype = {
button_: null,
form_: null,
userId_: null,
submitThanks_: null,
addListeners_: function () {
this.button_.addEventListener('click', this.handleClick_.bind(this));
},
handleClick_: function () {
console.log("Submit button clicked");
var userId = this.userId_.value;
// Hide the form
this.form_.classList.add('invisible');
this.submitThanks_.classList.remove('invisible');
}
};
</script>
</head>
<body onload="window.controller = new PopupController()">
<h2 class="invisible" id="submitThanks">Thanks!</h2>
<div id="userIdForm">
<form>
<input type="text" name="userID" placeholder="User ID" required/>
<button id="button" type="submit">Submit</button>
</form>
</div>
</body>
</html>
The problem is that the form reappears after the button is clicked. I have noticed that the functionality slightly changes when I put in the required attribute into the input field.
I'm using the latest version of Chrome for Mac.
This is because your button is a "submit" button. So when you click on it, it does its standard behavior, which is to submit the form. It makes an HTTP request and your page is refreshed.
If you don't want this to happen, just change the button type to "button".
The form is reloading because the page is reloading, try returning false from your submit.
<button id="button" type="submit" onclick="return false;">Submit</button>
Edit
Ah, sorry about that. So the page isn't reloading?
Perhaps try this instead:
handleClick_: function () {
console.log("Submit button clicked");
var userId = this.userId_.value;
// Hide the form
this.form_.className = "invisible";
this.submitThanks_.className = "visible";
Related
I was wondering if I can create a text input where users can type some text and then immediately display them on page, same as twitter. I know about alert window or prompt window but I need something different, a text input on website.
Hope it can be done in JavaScript.
Use .keyup() for the input field then replace the content of the output div.
$(".div-input").keyup(function() {
$(".output").html($(this).val());
});
.output {
margin-top: 20px;
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="div-input" />
<div class="output">
</div>
If you want to display the input on submit, you could attach a .submit() event on a form tag then use appendTo on the div if you want to insert multiple elements;
$(".form-input").submit(function(e) {
e.preventDefault();
var value = $(".div-input").val();
$("<div class='outputs'>" + value + "</div>").appendTo($(".output"));
});
.output {
margin-top: 20px;
}
.outputs {
padding: 20px;
font-size: 2em;
border: 1px solid black;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-input">
<input class="div-input">
<button type="submit">Submit</button>
</form>
<div class="output"></div>
you can use this to show your text anywhere on page
<input id="input-name" oninput="outputname.value = this.value">
<output id="outputname" name="outputname" for="input-name"></output>
You can test it here
If you add an eventlistener to the input, you can use that to change the text in your output area on the page. Like this:
const input = document.getElementById('input');
const output = document.getElementById('output');
input.addEventListener('input', (e) => {
output.innerHTML = input.value;
});
<div id="output"></div>
<input type="text" id="input">
HTML:
<p>Input:</p><input id="input" type="text">
<p>Output:<span id="output"></span></p>
Javascript:
// Function To Select Element
function $(element) {
return document.querySelector(element);
}
// We will get the input when calling this function
function getInput() {
return $('#input').value;
}
// The output will be displayed
function output() {
$('#output').innerHTML = getInput();
}
// This function will start our code
function init() {
output();
}
// On keyup our code will initiate
$('#input').addEventListener('keyup', init);
You can test it here: https://codepen.io/anon/pen/ReyGaO?editors=1111
People are downvoting you because this can be done with very basic JavaScript, and questions like this are very unusual because anyone doing a basic JavaScipt course will probably be able to do this.
Theoretically speaking: you can put an input element and a button on the html page, plus an empty div. You can set an event for the button or even for the input for live updating while typing, and write an event handler function to change the content of the empty div. You can either set its content or add a new child to it, so that the previous content still remains.
Practical example: (The code below is live at https://codepen.io/bradib0y/pen/YJLGrb )
<!DOCTYPE html>
<html>
<body>
<p>Click the button to add a new post.</p>
<input id="NewPostField" type="text" value="Some text">
<button onclick="myFunction()">Add new post</button>
<div id="Posts"></div>
<script>
function myFunction() {
var NewPostField = document.getElementById("NewPostField");
var newPost = document.createElement("p");
newPost.innerHTML = NewPostField.value;
var Posts = document.getElementById("Posts");
Posts.appendChild(newPost);
}
</script>
</body>
</html>
you can do it by this
<input id="mainInput" oninput="output.value = this.value">
<output id="output" name="output" for="input-name"></output>
click here to view in jsFiddle
I want to show a spinner div element on my page when user clicks submit button. There seems to be a bug in my code as I checked multiple answers and suggestions here for similar problems and nothing seems to work - on click console message is shown and the page starts reloading without showing the div element.
HTML:
<form action="/uploader" id="upload_form" method="POST" enctype="multipart/form-data" runat="server">
...
<div class="form-group">
<input type = "submit" id="upload_button" class="btn btn-primary btn-lg" />
</div>
</form>
Jquery:
$(document).ready(function(){
$('#upload_form').on('submit', function(e) {
e.preventDefault();
$('.sk-cube-grid').show();
console.log('Upload button was clicked');
this.submit();
});
});
I also tried without success :
$('#upload_button').on('click', function(e) {
console.log('Clicked on upload form');
$('.sk-cube-grid').show();
});
EDIT: when I remove this.submit(); the spinner is shown after click but the form is not submitted - so CSS seems to be fine. Also, upload takes several seconds before page is reloaded so I have time to see the messages on console and verify that no spinner is shown...
The code works. But the message quickly disappear becouse a new page is rendered.
$('.sk-cube-grid').hide();
$('#upload_form').on('submit', function(e) {
e.preventDefault();
$('.sk-cube-grid').show();
console.log('Upload button was clicked');
var form = this;
setTimeout( function () {
form.submit();
}, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/7914637" id="upload_form" method="GET">
<p>...</p>
<div class="form-group">
<input type = "submit" id="upload_button" class="btn btn-primary btn-lg" />
</div>
</form>
<div class="sk-cube-grid">My hide message</div>
I think that you should make an additional submit button that is hidden and is being pressed automatically by JavaScript after an interval that the spinner should have been shown.
Code:
<form action="/uploader" method="POST">
<input type="button" value="Submit" onclick="showSpinner()">
<div id="loading"></div>
<input type="submit" style="visibility: hidden" id="submit">
<script>
function showSpinner() {
document.getElementById("loading").style = "background: blue";
document.getElementById("animation").innerHTML =
'#keyframes loading {
100% { background: red; }
}';
setTimeout(redirect, 2000)
}
function redirect() {
document.getElementById("submit").click();
}
</script>
<style>
#loading {
height: 50px;
width: 50px;
animation: loading 2s linear infinite;
</style>
<style id="animation"></style>
You can increase the setTimeout to fit your spinner, or if you use percentage, make it redirect when it's 100%.
You need to make a check before confirmation like:
$(function() {
$('#upload_button').on('click', function(e) {
if (confirm("Click OK to continue?")){
$('form').submit();
}
else
{
e.preventDefault();
}});
});
Hope it will help you.
In my html file, I have a file input that is hidden behind an image, so that when an image is clicked, the window where you search for images shows. The problem is with the submit part, I need a submit button, but I don't want it to show unless the image is clicked.
Then when the button is clicked, I want to reload the page, now with the button not showing (unless the image is clicked again, of course).
Here's my html code:
<form>
<input id="file-input" type="file" file-model="formData.img" style="display: none;"/>
<br>
<button class="btn btn-booking" id = "uploadButton" ng-click = "changeImage(user._id)" style = "display:block; margin: 0 auto; "> Upload </button>
</form>
You can use the CSS display property to hide the form until the image is clicked, then hide the image until the form is submitted, like so:
var hiderImg = document.getElementById('hiderImg');
hiderImg.addEventListener('click', function() {
// hide image, show form
document.forms[0].style.display = "inline";
hiderImg.style.display = "none";
});
document.getElementById('uploadButton').addEventListener('click', function() {
// show image, hide form
hiderImg.style.display = "inline-block";
document.forms[0].style.display = "none";
});
#hiderImg {
height: 200px;
width: 200px;
}
#hiddenForm {
display: none;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/7/74/White_domesticated_duck%2C_stretching.jpg" id="hiderImg" />
<form id="hiddenForm" onsubmit="javascript: return false;">
<input id="file-input" type="file" file-model="formData.img" />
<br>
<button class="btn btn-booking" id = "uploadButton" ng-click = "changeImage(user._id)" style = "display:block; margin: 0 auto; "> Upload </button>
</form>
Note: I added onsubmit="javascript: return false;" to the form just so that it won't try to submit in this example; you can remove that.
Another note: If you want the upload button to display under the Browse bar, remove the display:block; setting from the button.
First of All put this directive to the your image:
ng-show="fileExist"
After that put this in the your controller:
var uplader = angular.element(document.getElementById("file-input"));
uplader.bind("change", function(){
if(uplader.val()){
$scope.fileExist =true;
}else{
$scope.fileExist =false;
}
});
it's kind of watch in the your input file that handle visibilty of your image.
When I fill in my form and send it the fancybox is not coming up.
Here is the code i am using for the fancybox:
<div class="hidden" id="fancybox-popup-form">
(your Fancybox content goes in here)
</div>
<style>
.hidden { display: none; }
</style>
This is the confirmtation text i filled in at the plugin Gravity forms
<script type='text/javascript'>
$('#gform_submit_button_2').click(function () {
$#gform_submit_button_2([
{ href : '#fancybox-popup-form' }
]);
});
</script>
And this is the HTML for the button where i need to click on the fire the function
<input type="submit" id="gform_submit_button_2" class="button gform_button" value="Verzenden" tabindex="6" onclick="if(window["gf_submitting_2"]){return false;} window["gf_submitting_2"]=true; ">
Thanks for your time!
When I fill in my form and send it the fancybox is not coming up.
When you send it the page will be refreshed by the submit so your fancybox will not shown, so try to prevent the default action (submit) using preventDefault() :
$('#gform_submit_button_2').click(function (e) {
e.preventDefault();
//Your code
})
Hope his helps.
it changes for about a second and returns to the previous text.The "Loading..." line has to change into "hi, Please click the next text box to see more instructions!".
I have tried it latest chrome and Edge browsers.
function greetMe() {
var yourName = document.getElementById("textbox").value;
info1 = "hi, Please click the next text box to see more instructions!"
document.getElementById("textToChange").innerHTML = info1
}
#myForm {
float: left;
width: 30%
}
#myformInfo {
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>HEllO ThERE!</h1>
<div id="myForm"><form >
<input id="textbox" placeholder="Your name">
<button onclick="greetMe()">click!</button>
<br><br>
<input id="">
</div></form>
<div id="myFormSteps">
<p id="textToChange">
<script>var info1 = "Loading..."
document.write(info1)
</script>
</p>
</div>
</body>
</html>
It's probably because you haven't set the type attribute for your button. A button's default type is submit. Try adding the attribute type="button" to your <button>.
When you click the button your form is submitting and the page is reloading - that's why it returning to its initial state. To stop this happening pass in event as a parameter to the function and then use that argument in the function with preventDefault():
HTML
<button onclick="greetMe(event);">click!</button>
JS
function greetMe(e) {
e.preventDefault();
// ...
}
As an aside it's better is to remove your inline JS and use an event listener instead.
var button = document.querySelector('button');
button.addEventListener('click', greetMe, false);