How can I make a form that allows users to enter a number and then goes to example.com/page/# where # is what the user typed in? I want this for a pagination "jump to" option.
I can only use HTML and JavaScript
<script type="text/javascript">
function goToPage(){
var page=document.getElementById('in').value; // value of input box
page=page*1; // ensures page is numeric only
location.href='http://www.example.com/page/'+page; // redirect to new url
}
</script>
<input type="text" id="in"/>
<input type="button" onclick="goToPage();"/>
<form id="jump" method="get" action="">
<input type="text" id="jump-page"/>
<input type="submit" value="Go"/>
</form>
<script type="text/javascript">
document.getElementById('jump').onsubmit= function() {
location.hash= document.getElementById('jump-page').value;
return false;
};
</script>
For page numbers you should probably prefix them like id="page-2" (to make a valid identifier) and then do location.hash= '#page-'+....
Related
I have a form defined:
<form method="post">
<label for="phone_or_uid">Enter a phone number or uid:</label>
<input type="text" name="phone_or_uid" value=""></input>
<input type="submit" name="" value="Submit"></input>
</form>
Currently, when this form is submitted I am able to work with the data and add info to the page based on the value of phone_or_uid. However, what I'd like to do is something where the form redirects to the same page but with the value of phone_or_uid appended to the end. So, if the initial page is https://myhost.com/lookup then submitting the form should bring the user to https://myhost.com/lookup/16175431234 if the value of the phone_or_uid input box is 16175431234.
Essentially, my form should then look something like this:
<form action={some code that puts the value of phone_or_uid here}>
...
</form>
Is this possible? And if so, how could I accomplish this? I don't want to create or redirect to any extra files, if possible.
I would use JavaScript. Listen for the submit event and redirect to a custom url.
this is just a really general example:
<form method="post" onsubmit="submitFunction()">
<label for="phone_or_uid">Enter a phone number or uid:</label>
<input type="text" name="phone_or_uid" id="phone_or_uid" value=""></input>
<input type="submit" name="" value="Submit"></input>
</form>
<script>
submitFunction = (event) => {
event.preventDefault();
const phoneInfo = document.getElementById('phone_or_uid').value;
fetch('http://myhost.com/lookup/' + phoneInfo, {
method: 'post'
})
.then(response => {
window.location.href = "http://myhost.com/lookup/' + phoneInfo";
});
}
</script>
I am using form twice on same page.
HTML Code
<form action="post.php" method="POST" onsubmit="return checkwebform();">
<input id="codetext" maxlength="5" name="codetext" type="text" value="" placeholder="Enter here" />
<input class="button" type="submit" value="SUMBIT" />
</form>
It's working fine with one form but when i add same form again then it stop working. The second form start showing error popup alert but even i enter text in form field.
JS Code
function checkwebform()
{
var codecheck = jQuery('#codetext').val();
if(codecheck.length != 5)
{
alert('Invalid Entry');
} else {
showhidediv('div-info');
}
return false;
}
How can i make it to validate other forms on page using same function?
As I commented, you can't have more than one element with the same id. It's against HTML specification and jQuery id selector only returns the first one (even if you have multiple).
As if you're using jQuery, I might suggest another approach to accomplish your goal.
First of all, get rid of the codetext id. Then, instead of using inline events (they are considered bad practice, as pointed in the MDN documentation), like you did, you can specify an event handler with jQuery using the .on() method.
Then, in the callback function, you can reference the form itself with $(this) and use the method find() to locate a child with the name codetext.
And, if you call e.preventDefault(), you cancel the form submission.
My suggestion:
HTML form (can repeat as long as you want):
<form action="post.php" method="POST">
<input maxlength="5" name="codetext" type="text" value="" placeholder="Enter here" />
<input class="button" type="submit" value="SUMBIT" />
</form>
JS:
$(document).ready(function() {
//this way, you can create your forms dynamically (don't know if it's the case)
$(document).on("submit", "form", function(e) {
//find the input element of this form with name 'codetext'
var inputCodeText = $(this).find("input[name='codetext']");
if(inputCodeText.val().length != 5) {
alert('Invalid Entry');
e.preventDefault(); //cancel the default behavior (form submit)
return; //exit the function
}
//when reaches here, that's because all validation is fine
showhidediv('div-info');
//the form will be submited here, but if you don't want this never, just move e.preventDefault() from outside that condition to here; return false will do the trick, too
});
});
Working demo: https://jsfiddle.net/mrlew/8kb9rzvv/
Problem, that you will have multiple id codetext.
You need to change your code like that:
<form action="post.php" method="POST">
<input maxlength="5" name="codetext" type="text" value="" placeholder="Enter here" />
<input class="button" type="submit" value="SUMBIT" />
</form>
<form action="post.php" method="POST">
<input maxlength="5" name="codetext" type="text" value="" placeholder="Enter here" />
<input class="button" type="submit" value="SUMBIT" />
</form>
And your JS:
$(document).ready(function(){
$('form').submit(function(){
var codecheck = $(this).find('input[name=codetext]').val();
if(codecheck.length != 5)
{
alert('Invalid Entry');
} else {
showhidediv('div-info');
}
return false;
})
})
I have created a form in HTML and have use onblur event on each and every field and it is working very fine. The problem is when i click on submit button(which will send data to a servlet) the data is submitted even if it is invalid. Here is an example.
<html>
<head>
<script>
function check()
{
if(checkName()==true)
return true;
else{
alert('vhvh');
return false;
}
}
function checkName()
{
var uname=document.enq.Name.value;
var letters = /^[A-Za-z, ]+$/;
if(uname.match(letters))
{
document.getElementById('Name').style.borderColor = "black";
return true;
}
else
{
document.getElementById('Name').style.borderColor = "red";
//alert('Username must have alphabet characters only');
//uname.focus();
return false;
}
}
</script>
</head>
<body>
<form name="enq" method="post" action="Enquiry" onsubmit="check()">
<input class="textbox" id="Name"style="margin-top:10px;font-size:16px;" type="text" name="Name" placeholder="Full Name" onblur="checkName()" required /><br><br>
<input class="button" type="submit">
</form>
</body>
</html>
How can i resolve this issue?
use
<input class="button" type="button">
and put a onclick event like this:
<input class="button" type="button" onclick="this.submit()">
so you can manipulate data before you subimit it.
There is an "onsubmit" event that allows you to control form submission. Use it to call your validation functions, and only then decide if you want to allow the user to submit the form.
http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html
You have to use it in the following way if you want it to prevent the form submission:
<form onsubmit="return check()">
How to fix? I've been struggling with this all day - looking at other posts and trying different methods. Any help is much appreciated... ~ newbie
The setTimeout() on this line of javascript breaks the code - causing a null value that is passed on for the custom URL.
The plan is
The user types a value in the text field.
The value is displayed on the webpage.
After a 4 second pause the user is automatically redirected to a new webpage based on the value they typed into the text field... this value being passed into the URL from submitting the form.
... Stuck at #3. The page pauses for 4 seconds, but no value is passed to the URL and it redirects to the home directory.
the code in question:
<form id="type_form" action="html-echo.php" method="post" onsubmit="setTimeout(function() { location.href='http://localhost:8888/vanity/site/' + document.getElementById('nav').value; return false; }, 4000);">
<input id="nav" maxlength="10" type="text" name="nav" autofocus placeholder="TYPE YOUR CHOICE... (spelling counts)">
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("nav").focus();
}
</script>
<button class="send" type="submit">SEND</button></form>
Thank you!
Try it more like this
<form id="type_form" action="html-echo.php" method="post">
<input id="nav" maxlength="10" type="text" name="nav" placeholder="TYPE YOUR CHOICE... (spelling counts)" autofocus />
<button class="send" type="submit">SEND</button>
</form>
<script type="text/javascript">
if (!( document.activeElement.id || document.activeElement.id == 'nav')) {
document.getElementById("nav").focus();
}
document.getElementById('type_form').onsubmit = function() {
setTimeout(function() {
document.location.href = 'http://localhost:8888/vanity/site/' + document.getElementById('nav').value;
}, 4000);
return false;
}
</script>
Also, returning false in the timeOut does not prevent the form from submitting, you have to return false rigth away.
You could try this:
<form id="type_form"
action="html-echo.php" method="post"
onsubmit="var redir='http://localhost:8888/vanity/site/'
+ document.getElementById('nav').value;
setTimeout(function() { location.href=redir; }, 4000);">
ok so, second question here, let me start by saying I know NOTHING about javascript yet, everything I use is just cut and paste from here and there, so go easy on me :-p.
I have a customer who wants to set up a search box and if someone types in a certain pre defined keyword it goes to a specific page. I grabbed this code off of here to accomplish that part:
<form id='formName' name='formName' onsubmit='redirect();return false;'>
<input type='text' id='userInput' name='userInput' value=''>
<input type='submit' name='submit' value='Submit'>
</form>
<script type='text/javascript'>
function redirect() {
var input = document.getElementById('userInput').value.toLowerCase();
switch(input) {
case 'keyword1':
window.location.replace('page1.html');
break;
case 'keyword2':
window.location.replace('page2.html');
break;
default:
window.location.replace('error.html');
break;
}
}
</script>
Now I am also using the sphider php search script, which I have using this embedded form:
<form action="search/search.php" method="get">
<input type="text" name="query" id="query" value="SEARCH" columns="2"
autocomplete="off" delay="1500"
onfocus="if(this.value==this.defaultValue)this.value=''"
onblur="if(this.value=='')this.value=this.defaultValue" >
<input type="submit" value="" id="submit">
<input type="hidden" name="search" value="1">
</form>
Is there any way I can combine the two so that if they search for the predefined keyword they get directed to the correct page but then if their search doesn't contain a predefined keyword it searches with sphider?
Sorry if this question is ludicrous, like I said, I'm new :-p
Thanks
Update : Ok so the problem was just that you had to do a return redirect(); to ensure the false returns correctly. I made a fiddle here : http://jsfiddle.net/3UbLa/1/
I'm don't know anything about sphider search but from what you posted you should be able to combine the two like below:
Your JS will change like this:
<script type='text/javascript'>
function redirect() {
//look for text inside the NEW textbox
var input = document.getElementById('query').value.toLowerCase();
switch(input) {
case 'keyword1':
//put this to see if this code runs
//alert("Test");// UNCOMMENT THIS
window.location.replace('page1.html');
break;
case 'keyword2':
window.location.replace('page2.html');
break;
default://no keyword detected so we submit the form.
return true;
break;
}
return false;//don't let the form submit
}
</script>
Your html will change to :
<form action="search/search.php" method="get"
onsubmit='return redirect();'>
<!-- pretty much the same thing except you remove the return false !-->
<input type="text" name="query" id="query" value="SEARCH" columns="2"
autocomplete="off" delay="1500"
onfocus="if(this.value==this.defaultValue)this.value=''"
onblur="if(this.value=='')this.value=this.defaultValue" >
<input type="submit" value="" id="submit">
<input type="hidden" name="search" value="1">
</form>