HTML Form Text onChange event refreshes page? - javascript

"use strict";
var SEED = "";
function seedSubmit() {
var input_box = document.getElementById("seed-form");
SEED = input_box.elements[0].value;
}
<form id="seed-form">
<p>Seed:</p>
<input type="text" onchange="seedSubmit(); return false;">
<input type="button" onclick="seedSubmit()" value="Submit">
</form>
Here's the HTML:
<form id="seed-form">
<p>Seed:</p>
<input type="text" onchange="seedSubmit(); return false;">
<input type="button" onclick="seedSubmit()" value="Submit">
</form>
Here's the JavaScript:
"use strict";
var SEED = "";
function seedSubmit() {
var input_box = document.getElementById("seed-form");
SEED = input_box.elements[0].value;
}
I then use the SEED variable for some other stuff. Basically you type into the box and press submit. If the submit button is type="submit", it refreshes the page so it has to be a type="button" then it works fine. But I don't want a button at all I wanna type in the text and press enter. But doing so refreshes the page. How do I prevent this? I did some googling and searching on this site and found a few posts but none of those solutions seemed to work, what am I doing wrong? People say try return false; but that doesn't work for me.

You can add eventListener to "submit" and use the preventDefault method, for example:
var SEED ="";
var form = document.getElementById("seed-form");
form.addEventListener("submit", function(event){
event.preventDefault();
var input_box = document.getElementById("seed-form");
SEED = input_box.elements[0].value;
console.log(SEED);
});
<form id="seed-form">
<p>Seed:</p>
<input type="text" >
<input type="submit" value="Submit">
</form>

Related

When handling a form submission with addEventListener the action performed is reverted immediately

My webpage has a simple form with an input box and the submit button, and an empty paragraph:
<form action="" class="form" method="post" id="f">
<input type="text" name="text" id="txt" value="">
<input type="submit" name="submitButton" value="go">
</form>
<p id="p1"></p>
I'm trying to write a script that once the submit button is submitted writes the submitted text into the paragraph:
let f = document.getElementById('f')
f.addEventListener('submit', function () {
let text = document.querySelector('#txt').value
document.getElementById('p1').innerHTML = text
})
And it kinda works, meaning that it does shows the text in the paragraph but only for a split second, then it disappears. What am I missing?
You need to preventDefault
let f = document.getElementById('f');
f.addEventListener('submit', function(e) { // access the submit event
e.preventDefault(); // prevent the default behavior of the submit event
let text = document.querySelector('#txt').value
document.getElementById('p1').innerHTML = text
});
when I tried to stop people from copying my image i used a Event listener
all you need to do is change contextmenu to p1 and then change #txt to txt
you need to change input type submit to button. this will not reload page.
function callClick(){
let text = document.querySelector('#txt').value
document.getElementById('p1').innerHTML = text;
}
</script>
<form action="" class="form" method="post">
<input type="text" name="text" id="txt" value="">
<input type="button" id="f" name="submitButton" value="go" onclick="callClick()">
</form>
<p id="p1"></p>

Why will my function not return string inputted by user

I'm trying to have a user input a string or number on the page, hit submit and have console.log print the string just entered, however as much as I tried it will not print.
Am I missing something here? ( sorry for indentation)
<html>
<head>
<body>
<form>
<input id="userInput" type="text">
<input type="submit" id = "submit()">
</form>
<script>
function submit() {
var test = document.getElementById("userInput");
return console.log(test);
}
</script>
</body>
</head>
</html>
This code will give the result as you expect.you cannot return console.log in return function to get value and also dont use form so that it will always look for action in these kind of cases
function submit() {
var test = document.getElementById("userInput").value;
console.log(test);
return test;
}
<div>
<input id="userInput" type="text">
<button onclick = "submit()"> Submit</button>
</div>
You're doing a few things wrong. Just read the below code, I left explaining comments for you.
<html>
<head>
<body>
<form>
<input id="userInput" type="text">
<button type="button" id="submitBtn" onclick="submit()">Submit</button> // ID - can't be used for submitting a function
</form>
<script>
function submit() {
var test = document.getElementById("userInput");
alert(test.value); // console.log() - is like a void function and it can't be returned
}
</script>
</body>
</head>
</html>
If you look in the console you'll see it's logging a reference to the element, not the value entered in it.
This is because your variable test stores a reference to the element.
var test = document.getElementById("userInput");
You need
var test = document.getElementById("userInput").value;
use Onclick attribute for Submit button! and Also the type of input should be button to prevent the refreshing.
<form>
<input id="userInput" type="text">
<input type="button" onclick= "submit()">
</form>
in JavaScript Code add the value property.
var test = document.getElementById("userInput").value;
Please check the below code. I think this is what you want. The problem was hooking up the event
<form>
<input id="userInput" type="text">
<input id="myBtn" type="submit">
</form>
<script>
document.getElementById("myBtn").addEventListener("click", function() {
var test = document.getElementById("userInput");
console.log(test);
return false;
});
</script>

Can't go to a url in javascript

I am a total noob to web programming (Started just now). I know C, C++ and x86-assenbly (a little bit). I wanna create my own home page for my browser. It's very basic html for the most part but I want a search bar on the top that redirects to duckduckgo with relevant results and that's where the problem arises. The code I'm trying:
<form>
<input type="text" id="query"/>
<button id="button" class="button" onclick="openInDuck()">Search</button>
</form>
<script>
function openInDuck(){
var x= "https://duckduckgo.com/?q=";
x += document.getElementById("query").value;
window.location = x;
}
</script>
And yeah, I forgot, I am using qutebrowser on archlinux if that matters. Thanks in advance.
You are missing .href on your redirect. Also you should change the button type to button instead of the default;
function openInDuck() {
var x = "https://duckduckgo.com/?q=";
x += document.getElementById("query").value;
window.location.href = x;
}
<form>
<input type="text" id="query" />
<button id="button" class="button" onclick="openInDuck()" type="button">Search</button>
</form>
Do note that it wouldn't be ideal to redirect the user if you just need to do a search through a different api.
You can use the below
function openInDuck() {
var x="https://duckduckgo.com/?q=";
x += document.getElementById("query").value;
window.open(x);
}
Problem is that your form is submitted when clicking the button, like this it works :)
<input type="text" id="query" />
<button id="button" class="button" onclick="openInDuck()">Search</button>
<script>
function openInDuck() {
var x = "https://duckduckgo.com/?q=";
x += document.getElementById("query").value;
window.location = x;
}
</script>
You are close to the solution. In the JS code, you must add .href after window.location to set the new href (URL) for the current window. In the HTML code, I suggest you use the onsubmit attribute to send the form with an input type="submit" :
function openInDuck()
{
var x = "https://duckduckgo.com/?q=";
x += document.getElementById('query').value;
window.location.href = x;
return false; // Prevent the form submission
}
<form onsubmit="return openInDuck()">
<input type="text" id="query">
<input type="submit" id="button" class="button" value="Search">
</form>

enable/disable submit button based in input field (filled/not filled)

what I am missing in this code, If I just want the input submit button to enable/disable/enable.. as long as I fill or unfill the input text?
sorry I am doing my best to learn javascript...can anyone help me fix this code?
<form name="myform" method="post">
<input onkeyup="checkFormsValidity();" id="input_id" type="text" name="input_name" value=""/>
<input type="submit" name="submit_name" value="OK" class="submit_class" id="SubmitButton"/>
</form>
<script>
var sbmtBtn = document.getElementById("SubmitButton");
sbmtBtn.disabled = true;
function checkFormsValidity(){
var myforms = document.forms["myform"];
if (myforms.checkValidity()) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
}
</script>
This is the fiddle: https://jsfiddle.net/1zfm6uck/
Am I missing declaring onLoad mode or something like this?
Thanks!
Actually - if it wasn't a jsfiddle example your code would work great:
var sbmtBtn = document.getElementById("SubmitButton");
sbmtBtn.disabled = true;
function checkFormsValidity(){
var myforms = document.forms["myform"];
if (myforms.checkValidity()) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
}
input[type='submit']:disabled{
color:red;
}
<form name="myform" method="post">
<input onkeyup="checkFormsValidity();" id="input_id" type="text" name="input_name" value="" required="required" />
<input type="submit" name="submit_name" value="OK" class="submit_class" id="SubmitButton"/>
</form>
The problem was the jsfiddle put your javascript code inside a clousure, so the checkFormsValidity function is not available in the scope of your input.
I added a required="required" to your input to make sure it's a required field (which will affect the checkValidity() of your form).
function checkFormsValidity(){
needs to be change to:
checkFormsValidity = function(){
Personally I wouldn't check validity that way, but in terms of making your code work without error, that will do it.
Edit: Also add required="required" to the input.

PHP form submit button but not leave page

I have a button that links to a php file that tracks user's email when clicked, but I don't want the user to leave the page when button is clicked, I just want to change button's value.
This is the html of the form.
<form action="mysql-query.php" method="post">
<input type="text" name="email" style="display:none;">
<input type="submit" value="Press here" id="test" onclick="Press()">
</form>
And this is the script that handles the form:
<script>
function Press() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
}
</script>
I put the display:none; because I don't want to display anything but the button and have a way to connect with my php file.
Any ideas?
You need to use ajax:
html:
<form action="mysql-query.php" method="post" onsubmit="return Press(this)">
<input type="text" name="email" style="display:none;">
<input type="submit" value="Press here" id="test">
</form>
js:
function Press(form) {
$.post($(form).attr('action'), function() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
});
return false; // prevent submitting the form
}
or better bind submit event using jQuery:
$('form').submit(function() {
$.post($(this).attr('action'), function() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
});
return false; // prevent submitting the form
});
Use:
<form action="javascript:void()">
Ok, this thing prevents the form from sending the data anywhere, unless you use "onclick" event on the submit button.
What you can do is remove the type="submit" on the button and replace it with type="button". Next you can do an ajax call to your php and do your magic.

Categories

Resources