This question already has answers here:
Stop form refreshing page on submit
(20 answers)
Closed 4 years ago.
I did this JS component but in some pages as codepen it crashes when I click submit because the the button adds a "?#" to the URL (running locally) and is like it changes to another page, this happens the first time I post a message, can be avoided? or is a normal thing of submit?
<div id = "typeSection">
<label for="message">Message:</label>
<form action="#" id="typeForm">
<label for="message"></label>
<textarea id= "character">0/280.</p>
<input type="submit" id = "addButton" value="Submit">
This is the component running in CodePen:
https://codepen.io/LeonAGA/pen/vroRBB
when you add 'action="#"' in the form tag below:
<form action="#" id="typeForm">
it redirects the page to the current url with a "#" appended on to the end. If you put:
<form action="" id="typeForm">
you shouldn't have to worry about the "#" anymore.
<form action="#" id="typeForm">
Action value might be the reason why adding # after the URL, try assign "" instead of # symbol
Related
This question already has answers here:
HTML form action and onsubmit issues
(3 answers)
Closed 3 years ago.
i know there are other questions like mine but before you mark it as a duplicate could you please read it.
i am trying to validate my html form using javascript.
i have done this before in another web page and it worked correctly however i am trying to use the same code for my new page but it does not work.
this is the code:
function validateForm(form) {
var valid = true;
if (!form.title.value.length)
{
valid = false;
document.getElementById('titleRequired').style.display = "inline-block";
}
else
{
document.getElementById('titleRequired').style.display = "none";
}
}
<form id="form" action="register.php" method="post" onsubmit="return validateForm(this)">
<h2> create profile: </h2>
<div>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="Given Name">
<span class="error" id="fNameRequired">first name required</span>
<span class="error" id="capitalRequired">first letter must be capital</span>
</div>
<div>
<input type="submit" value="Submit" name="submit" >
</div>
</form>
i have more inputs for this form however i am doing it step by step and not sure where i am going wrong.
i have this exact same code on another project i worked on with more inputs and it works fine.
the output i am currently getting is: it submits the form as normal even when no text is entered.
You're not returning the result of the validation. Add return valid; before the last curly brace to return false or true so the submit handler knows what to do.
This question already has answers here:
How do you disable browser autocomplete on web form field / input tags?
(101 answers)
Closed 4 years ago.
I'm using this code:
<form action="https://google.com/search" method="get">
<input type="text" name="q" />
To allow me to search using google from a custom homepage. But after every search it seems to be caching my search terms.
When I return to the HTML page when I click on the form it has my previous searches as auto fill drop-down box.
I'd like to disable this function and stop the page from caching.
Thank You
It should be as easy as adding autocomplete="off" to your form element.
<form action="https://google.com/search" method="get" autocomplete="off"></form>
This question already has answers here:
What is the default form HTTP method?
(5 answers)
Closed 4 years ago.
I saw the below code in w3school. I was wondering is this considered a POST request or a GET request. I only changed the action location to go to a java servlet rather than php.
<!DOCTYPE html>
<html>
<body>
<form id="myForm" action="/action">
First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</body>
</html>
<form>'s default method is GET.
So it is considered as a GET request. You'll see all the parameters are being binded to the URL once the form is submitted.
EDIT (answering this comment):
Easiest way to change the method of the form is to mention it in method attribute in the <form> tag.
<form method='POST' id="myForm">
Or you can use javascript as below,
document.getElementById("myForm").method = "POST";
This question already has answers here:
Remove query string "?" in HTML form method GET
(2 answers)
Closed 4 years ago.
I have a simple image search form that open in a new window:
HTML
<input type="radio" id="google" name="image" onclick="googleImages();" checked/>
<label for="google">Google Images</label>
<input type="radio" id="unsplash" name="image" onclick="poly();"/>
<label for="unsplash">Poly</label>
<form id="form" method="GET" action="https://www.google.com/search?q=">
<input id="input" type="text" name="q" value="" required>
<input id="button" type="submit" value="Search" onclick="this.form.target='_blank';">
<input id="helper" type="hidden" name="tbm" value="isch">
</form>
JS
var
form = document.getElementById("form"),
input = document.getElementById("input"),
button = document.getElementById("button"),
helper = document.getElementById("helper");
function googleImages() {
form.action="https://www.google.com/search?q=";
input.name="q";
helper.name="tbm";
helper.value="isch";
}
function poly() {
form.action="https://poly.google.com/search/";
input.name="";
helper.name="";
helper.value="";
}
Code working here
PROBLEM
When I change to Poly in my search form, query string continue set "?" in URL output, generating an error on search results page.
Google Images use some URL parameters like google.com/search?q=lion&tbm=isch that I can reproduce in the form. However, Poly not use query string (?) or parameters (param=value) they just use the "URL/value" like poly.google.com/search/lion
QUESTION
How create a function that when I select Poly the query string "?" is removed generating an output "URL/value" on submit? In other words, pass the search term (value) as part of the URL without any query or parameters.
It looks like for the poly you are just navigating to a different url. You don’t want or need this to be a form submission. Instead of submitting a form call window.location.href= in the JavaScript.
This question already has answers here:
How do I redirect to another webpage?
(58 answers)
Closed 5 years ago.
I am creating a website and I am creating a form in it. In this form, I wanted to make it redirect to a URL (www.google.pt, for example) only if a keyword is written in the form when submitted (for example, "google"). Can anyone help me please? Here is the HTML code I've written to create the form:
<form action="/action_page.php" method="post">
<input type="text">
<br><br>
<button type="submit">SUBMETER</button>
</form>
$(form).submit(function(e){
e.preventDefault();
if($(input).val().indexOf('yourWord') !== -1){
window.location = 'http://www.google.pt';
}
});