I am trying to create a very simple form with a little bit of extra code to get the results as described below: the problem is I don't know how to go about doing it.
What I am trying to achieve:
I have a form which has one text input box with the name 'url'. I want the user to be able to input a number into the box. When the user submits the form they should be redirected to a new website. The new website's URL will be based on the number inputted into the form.
The first part of the URL will always be: http://name.com/
Then the number that the user inputted will be attached to the end. So if 123456 is entered into the form then on submission of the form the user would be taken to http://name.com/123456
How can I get this working? I am guessing it will require JavaScript or something.
<script>
function process()
{
var url = "http://name.com/" + document.getElementById("url").value;
location.href = url;
return false;
}
</script>
<form onSubmit="return process();">
URL: <input type="text" name="url" id="url">
<input type="submit" value="go">
</form>
You can add onsubmit="this.action='http://google.com/'+this.fieldName.value;" to your tag.
This should do it:
<script type="text/javascript">
function goToPage() {
var page = document.getElementById('page').value;
window.location = "http://name.com/" + page;
}
</script>
<input type="text" id="page" />
<input type="submit" value="submit" onclick="goToPage();" />
Related
I am writing a search box in HTML that takes the user input and append it to the URL as a parameter. The code of the form looks like this.
<form name="form" action="" method="get">
<input type="text" name="id" id="idresponse">
<input type="submit" value="Submit">
</form>
This will bring the user from example.com/test.html to example.com/test.html?id=12345678 assuming they entered 12345678 at the text box.
However, if the user inputted nothing and clicked Submit, they will be brought to example.com/test.html?id=, which I don't want. How can I modify the code so that the form knows that a certain field is left blank and do not send the parameter with the URL? In this case, the desired URL would be example.com/test.html.
edit 20210405 2057 changed the id of the input from idresposne to idresponse to avoid confusion
The so-called URL parameters is the querystring of the URL.
The following code does not use jQuery, but achieves a similar effect. (written by RobG)
<form name="form" onsubmit="disableEmptyInputs(this)" action="" method="get">
<input type="text" name="id" id="idresponse">
<input type="submit" value="Submit">
</form>
<script>
function disableEmptyInputs(form) {
var controls = form.elements;
for (var i=0, iLen=controls.length; i<iLen; i++) {
if (controls[i].value == '') controls[i].disabled = true;
}
}
<script>
This will remove all the parameters but the ? will still trail the URL. i.e. the URL will be example.com/test.html? instead. However, this does not matter because they both point to the same address.
Refer to these links (kindly provided by Progman) for other ways of doing this, including using jQuery.
Delete empty values from form's params before submitting it
Delete empty values from form's params before submitting it
How can I remove empty fields from my form in the querystring?
Thanks.
So I am making a VERY simple Chrome extension which allows someone to click it, then type in a French word, it will then take the word and redirect you to a french dictionary.
Here is the relevant code:
<div id="pattern" class="pattern">
<form action="http://www.wordreference.com/fren/" method="get" class="f" target="_blank">
<input type="search" name="query" placeholder="Search Videos.." />
<input type="submit" class="btn search-submit" value="Search">
</form>
However this does not work, when I enter in a word, instead of taking me to
www.wordreference.com/fren/Bonjour
It takes me to
http://www.wordreference.com/fren/?query=Bonjour
Thanks in advance guys!
Should be noted changing the text query to 'a' will take me to
http://www.wordreference.com/fren/?a=Bonjour
Use POST method in form.
<form id="my_form" class="f">....</form>
target="_blank" is for a tag (not in form):
Test url
If you want to change the output URL.
Try to use redirect method (script) like:
window.location.href = custom_url+'?'+form.serialize();
Sample script for Form submit:
<script type="text/javascript">
$(document).readY(function(){
$("form#my_form").on("submit", function(event){
event.preventDefault();
var parameters = $(this).serialize();
window.location.href = "?a=" + parameters;
});
});
</script>
Modify the url as you wish.
I got an URL in a html tag, so in a GET format :
http://toto.fr/grc/start.swe?SWECmd=ExecuteLogin&SWEAC=SWECmd=InvokeMethod&SWEMethod=GotoView&SWEService=GRC+Debranchement+Generique&BusObject=Contact&BusComp=Contact&ViewName=GRC+Contact+Synthetic+View&SWEUserName=titi&SWEPassword=toto&ValeurChamp=35925436&Champ=Person UId
I want to call it in POST. Is there a way to do this easily ?
You need to create an HTML form with all the URL parameters as hidden variables.
e.g.
<form action="http://toto.fr/grc/start.swe" method="POST">
<input type="hidden" name="SWECmd" value="ExecuteLogin" />
<!--- repeat for all other parameters --->
</form>
Replace the <form method="GET"> to <form method="POST">
if this doesn't work, could you post your code?
I've just been thinking about this again and if you really do need to have a link submit a POST request then it may be possible by giving the form an id attribute, create your link with an id attribute and then you can add a click event handler which will submit the form in Javascript.
See the mock-up code below (syntax may not be perfect!)...
HTML.
<form id="loginForm" action="http://toto.fr/grc/start.swe" method="POST">
<input type="hidden" name="SWECmd" value="ExecuteLogin" />
<!--- repeat for all other parameters --->
</form>
<a id="LoginLink" href="#">Login</a>
Javascript.
<script type="text/javascript">
var loginForm = document.getElementById('loginForm');
var loginLink = document.getElementById('loginLink');
loginLink.addEventListener('click', login);
var login = function() {
loginForm.submit();
}
</script>
I want to have a box in HTML such as this one:
Particular thing, I need to do this using only HTML (no PHP or particular langage requiring server, or particular installation).
The reason for this is that it is meant to be used for HTML pages that will be opened from a USB key, not a website, and it has to be usable by any non-expert person. So no web-server configuration or installation required, such as what would be required for PHP, if I am right.
Think about not using a Form, but just using a Javascript function.
I'm not sure if this probably is not possible due to security reasons, but it could be a solution...
function redirect() {
var input = document.getElementById("stuff");
window.location = input.value;
}
<span>NOM:</span>
<input type="text" id="stuff"></input>
<br>
<input type="button" onclick="redirect()" value="Submit"></input>
I managed to do what I needed thanks to Anders Anderson's answer. Here is the code for those interested in doing similar thing. First, for the Javascript
function redirect() {
var answergiven = document.getElementById("answergiven");
var realanswer = document.getElementById("realanswer");
var nextpage = document.getElementById("nextpage");
if(answergiven.value.toLowerCase() == realanswer.value.toLowerCase()){
window.location = nextpage.value;
}
else{
alert('Wrong answer, please try again.');
}
return false; // prevent further bubbling of event
}
And for the HTML part, there are two hidden variables that determine the real answer, and the next page to go to, and the text field for the answer
<form name="myform" onSubmit="return redirect()">
<span>Réponse:</span>
<input type="text" id="answergiven" />
<input name="tosubmit" type="submit" value="Submit" />
<input type="hidden" id="realanswer" value="theanswer" />
<input type="hidden" id="nextpage" value="thenextpage.html" />
</form>
I have the following code to submit a form. If I use the event listener function name as submit, the form does not get submitted. If I use any other name, it will. Should not I use any HTML5 keyword like submit in JavaScript as function name? In this case submit is a HTML5 keyword which can be used as a type of any INPUT element.
<form onsubmit="submit()">
<input type="email" name="email" />
<input type="submit"/>
</form>
function submit() {
var f = $('form').serialize();
alert(f);
}
You're already using jQuery here so a more elegant solution to the whole problem would be:
// HTML
<form name="my-form">
<input type="email" name="email" />
<input type="submit"/>
</form>
Then have a separate JS file:
//Js
$(document).ready(function(){
$('form[name="my-form"]').submit(function(e){
var f=$(this).serialize();
alert(f);
});
});
This also gives you extra options to prevent the form from submitting cleanly; add this at the end of the submit(){ } function.
e.preventDefault();
Update
As the OP pointed out the original question was whether the function name submit() can be used as the onsubmit attribute in a form.
This answer suggests that it cannot, as carrying out the following:
document.form['my-form'].submit();
Would be a valid way to trigger submission of the form; thus that method name can't then be included in the HTML. I am searching now for a better source to confirm this for sure I have found a similar source on Mozilla Developer Network which confirms the code above but doesn't explicitly define that the keyword submit cannot be used.
You know, there is another way to do this. You could separate your html from javascript enritelly.
<form id="form">
<input type="email" name="email" />
<input type="submit"/>
</form>
//Rest of your code
<script>
$(function() {
$('#form').submit(function() {
var f = $('#form').serialize();
// do your stuff
return true; // return false to cancel form action
});
});
</script>