changing page in HTML - javascript

I wanted to set up a JS when users press the button, it would redirect them to the homepage, which called index.html
<form method="confirm" style="width: 500px; height: 300px; margin-left: auto; margin-right: auto; margin-top:100px; margin-bottom: 100px; font-size: 30px; color: black;">
<fieldset id="confirm">
<legend>NOTIFICATION</legend>
<table>
<tr>
<td>
<h1>THANK YOU FOR SIGNING IN</h1>
</td>
</tr>
<td>
<input type="submit" value="Return to homepage" onclick="return return1();">
<script>
function return1()
{
window.location.href = 'index.html';
}
</script>
</td>
</tr>
</table>
</fieldset>
</form>

There are some mistakes here.
The error you get is because you use a submit input button inside a form and the button will try to evaluate your form submission. To prevent that you have to return false on your function.
<script>
function return1()
{
window.location.href = 'index.html';
return false;
}
</script>
But if you want to do a button that simply will redirect to another page you should not use a form and a submit button but just a normal input button
<input type="button" value="Return to homepage" onclick="return1();">
If you want to use the form because you want to evaluate some data you need to put your page on the <form> in the action field, without using the script
Also confirm is not accepted you should use GETor POST.
<form method="POST" action="index.html">

Add return false to the function to disable the default event on submit(page refresh)
function return1()
{
window.location.href = 'index.html';
return false;
}

The following code redirects me to index.php which sits at the same level as index.html and index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="check.php" method="post" id="re">
<fieldset id="confirm">
<legend>NOTIFICATION</legend>
<table>
<tr>
<td>
<h1>THANK YOU FOR SIGNING IN</h1>
</td>
</tr>
<td>
<input type="submit" value="Return to homepage">
</td>
</tr>
</table>
</fieldset>
</form>
<script src="index.js"></script>
</body>
</html>
The JS file
function _x(elem){
return document.getElementById(elem);
}
var x = _x("re");
x.onsubmit = function(e){
e.preventDefault();
window.location = "index.php";
}

simply change your input type submit to button
<input type="button" value="Return to homepage" onclick="return return1();">

Replace
window.location.href = 'index.html';
with:
window.open('INDEX.HTML');

You change code
<input type="submit" value="Return to homepage" onclick="return return1();">
=> Return to homepage
With you type css ".btn" see like a button
Note : In form, you should not put or to redirect without submit form.

This may help you
<script language="javascript">
function return1()
{
window.location="yourpage.html";
}
</script>

Related

Several submit buttons in a single HTML form

I'll cut to the chase. I wish to have two separate buttons that does two unique functions. However, acquiring data from the same form. The current problem that I'm facing is onSubmit() will always be executed with whatever buttons I attach to the form instead of its own function.
checkUser.js: Acquires username from the input field and tries to match it with the database (Oracle)
Update 1:
I have changed them accordingly. However, pressing Check still forwards me to StaffRegAuth.jsp instead of executing checkUser and then opening a new window.
<form action="StaffRegAuth.jsp" name="form" method="post">
...
<button onClick="return validStaffReg();">Register</button>
<button onclick="return checkUser()">Check</button>
</form>
Update 2:
Updated my checkUser.js as it seems to be the problem
StaffReg.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Staff Registration</title>
<%-- Javascript --%>
<script type="text/javascript" src="JS/validStaffReg.js"></script>
<script type="text/javascript" src="JS/preventSpace.js"></script>
<script type="text/javascript" src="JS/checkUser.js"></script>
</head>
<body>
<%response.addHeader( "Cache-Control", "no-cache"); response.addHeader( "Pragma", "no-cache"); response.addHeader( "Expires", "0"); %>
<h1 align="center"> Account Registration: </h1>
<form action="StaffRegAuth.jsp" name="form" method="post">
<div align="center">
<table style="width = 30%">
<tr>
<td>User Name:</td>
<td>
<input type="text" name="username" onKeyDown="preventSpace(this)">
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" name="password" onKeyDown="preventSpace(this)">
</td>
</tr>
<tr>
<td>User Group:</td>
<td>
<select name="userGroup">
<option value="1">Administrator
</optin>
<option value="2">Clerk
</optin>
<option value="3">Operations
</optin>
<option value="4">Sales
</optin>
</select>
</td>
</tr>
<tr>
<td>
<button onClick="return validStaffReg(form)">Register</button>
</td>
<td>
<button onClick="return checkUser(form)">Check</button>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
validStaffReg.js
// JavaScript Document
function validStaffReg(form) {
if (document.form.password.value == "" && document.form.username.value == "") {
alert("Please enter a Password and Login ID.");
document.form.password.focus();
return false;
}
if (document.form.username.value == "") {
alert("Please enter a Login ID.");
document.form.username.focus();
return false;
}
if (document.form.password.value == "") {
alert("Please enter a Password.");
document.form.password.focus();
return false;
}
return true;
}
checkUser.js
function checkUser(form) {
if (document.form.username.value != "" || document.form.username.value != null) {
var myWindow = window.open("checkUser.jsp", "MsgWindow", "width=200, height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");
document.form.username.focus();
return false;
}
return true;
}
Don’t use submit.
I.e., don’t use <input type="submit">.
Instead, make two separate buttons and call different functions onclick. Mind you that you can still get the form values.
I.e.,
<button onclick="return reqfunc()">
Use return, and now you can use the function. If you want to return to the form back without going to the next page then just return false in the JavaScript code.
Use <button onclick='YourFunction()'>Button Text</button>.
One of the tricks I use regularly is something like the following.
<form action="submit.jsp">
<button type="submit" name="submit_form" value="1" class="hiddenSubmit">Submit</button>
...
<button type="submit" name="clear_form" value="1">Clear</button>
<button type="submit" name="submit_form" value="1">Submit</button>
</form>
By giving the buttons different names, you can have the form do whatever processing is consistent and let the server manage any button-specific processing. Of course, you can also attach event handlers to the separate buttons.
Why does it have two [name="submit_form"] buttons? The first one has a class that you would style to make it active yet invisible (e.g., position: absolute; top: -1000px; left: -1000px) so that a keyboard <Enter> will fire that button instead of the other button[name="clear_form"].

Redirection error from one page to another in html and javascript?

Hi guys i have a following code in which i am trying to redirect to another ,i am using javascript html to achieve this,and i am new to html, javascript and php. It is showing test.phpbut as i click on button it does not redirect to logout_success.php.
<!DOCTYPE HTML>
<html>
<head>
<title>Sign-In</title> <link rel="stylesheet" type="text/css" href="style-sign.css">
</head>
<body id="body-color">
<div id="Sign-In">
<fieldset style="width:30%">
<legend>LOG-IN HERE</legend>
<form method="POST" action="connectivity.php">
User
<br>
<input type="text" name="user" size="40">
<br>
Password
<br>
<input type="password" name="pass" size="40"><br>
<input id="button" type="submit" name="submit" value="Log-In" onclick="document.location.href='http://localhost:8080/PortalWork/logout_success.php'">
</form>
</fieldset>
</div>
</body>
</html>
There are two ways.
(1) Submit form with AJAX, and redirect with window.location.href
$("#form1").submit(function(e){
e.preventDefault();
$.ajax({
url:'connectivity.php',
method:'POST',
success:function(rs){
if( rs == "success" )
window.location.href("logout_success.php");
},
error:function(){
alert("Error");
}
});
return false;
});
http://jsfiddle.net/hxm49uk2/
(2) Submit to server, and redirect with header("Location:page.php");
connectivity.php
header("Location:logout_success.php");
You can do it in JS like this:
<button name="button" onclick="window.location.href='http://www.google.com'">Go</button>
Instead of http://www.google.com use your desired url.
Just include the following code in connectivity.php
header("Location:logout_success.php"); // give the correct path of logout_success.php
And take off onclick from form submit button
<input id="button" type="submit" name="submit" value="Log-In">

Javascript set input value when user click button

Im developing chrome extension. I want to change input value(username) to some text when user click button. But my solution not working. Need advise.
My code is shown below:
<!DOCTYPE html>
<html>
<head>
<META http-equiv=content-type content=text/html;charset=utf8>
<META http-equiv=content-type content=text/html;charset=windows-1254>
<META http-equiv=content-type content=text/html;charset=x-mac-turkish>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>
<script>
$('#target').submit(function() {
alert('something');
return false;
$('#UserName').value('test');
});
</script>
</head>
<body>
<form id="target">
<table>
<tr>
<td>UserName:</td>
<td>
<input type="text" id="UserName" size="20" />
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" id="Password" />
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Login" id="Login" /></td>
</tr>
</table>
</form>
</body>
</html>
Change your submit button from type button to submit from:
<input type="button" value="Giriş" id="Login" />
to:
<input type="submit" value="Giriş" id="Login" />
Also change your JS code from:
$('#target').submit(function() {
alert('uyarı');
return false;
$('#UserName').value('deneme');
to:
$('#target').submit(function() {
alert('uyarı');
$('#UserName').val('deneme');
return false;
Your submit button needs to be of type 'submit'.
So this:
<input type="button" value="Login" id="Login" />
should be:
<input type="submit" value="Login" id="Login" />
Also, the appropriate jQuery function for getting/setting input values is .val().
Lastly, you don't want to return false until the end of the function.
$('#target').submit(function() {
alert('something');
$('#UserName').val('test');
return false;
});
See this working Fiddle.
This is working fine
$('input#Login').click(function() {
$('#UserName').val('test');
return false;
});
jQuery uses the VAL rather than VALUE
in other words
<script>
$('#target').submit(function() {
alert('something');
return false;
$('#UserName').val('test');
});
</script>
and also the FORM is not submitado change the type of input and submit to the adciona FORM METHOD = "POST"
Guys thank you very much. I found. The problem is when you are developing google chrome application you must seperate javascript code from html. Otherwise javascript not work.

Unable to set breakpoint in Chrome

I have written a simple javaScript function to validate required userName field using JS for my learning purposes.
I am facing two issues -
In submit button, onclick event handler does not invoke
checkRequired method, and form is posted back.
I am not able to set breakpoint in chrome debugger.
Even using debugger exclusively in code does not bring the control
to debugger breakpoint.
TaskManager.js
function checkRequired() {
debugger;
var userName = document.getElementById("txtUserName");
if (userName.length == 0) {
alert("username is required attribute");
return false;
}
return true;
}
AddNewUser:
<html>
<head>
<title>Add new User</title>
<style type="text/css" media="all">
button {
width: 65px;
}
</style>
<script src="TaskManager.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="AddNewUser.html" style="width: 560px; height: 850px; margin-left: 10px; margin-top: 10px">
<fieldset>
<legend>New User</legend>
<table>
<tr>
<td>
<label>User Name:</label></td>
<td>
<input type="text" id="txtUserName" name="User Name" maxlength="10" /></td>
</tr>
<tr>
<td>
<button id="btnSubmit" type="submit" onclick="checkRequired()">Add User</button>
</td>
<td>
<button id="btnCancel">Cancel</button>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Thank you for any help to resolve the issue.
If your breakpoint is not reached then the function is somehow not accessible and you should get an error in the console. Is the function in the global scope?
Here's your code, to which I made a couple of changes to let it work.
First of all the result of your handler has to be taken into account:
<button id="btnSubmit" type="submit" onclick="javaScript:return checkRequired();">
Then you have to check against .value.length inside the textbox you're trying to validate:
var userName = document.getElementById("txtUserName");
if (userName.value.length === 0) {[...]
Anyway I would advise you to use an unobtrusive approach if possible, and bind the event directly in your javascript code, instead of defining it in the markup:
var submitBtn = document.getElementById("btnSubmit");
submitBtn.onclick = function checkRequired() {
console.log('aho');
var userName = document.getElementById("txtUserName");
[...]
Check if the script file is being loaded. Put an alert at the top of the file outside the function definition.
If the alert does not display check carefully the name of your script file. Is it the same as referenced in the script tag? Is it in the same directory?

How to submit 2 forms in one page with a single submit button

I've created a php page with two forms but I would like to have only one submit button for both forms. the forms have the ids firstform & secondform. I have tried other scripts but they don't really work.
Here is my code below:
<script language="javascript">
submitForms = function(){
document.getElementById("firstform").submit();
document.getElementById("secondform").submit();
}
</script>
<input type="image" src="images/order-button.png" name="button" value="Submit" onclick="submitForms()"/>
You have SEVERAL issues
input type=image IS a submit button so you are trying to submit something from a non-existing form, likely the same page you are on
when you submit form1, it replaces the current page, if you manage to submit form2 as well, it is VERY likely to interfere with the submission of form1
Here is what you can TRY (plain javascript):
<script language="javascript">
function submitForms() {
document.getElementById("firstform").submit();
document.getElementById("secondform").submit();
}
</script>
<form id="firstform" target="iframe1">
</form><iframe name="iframe1" style="display:none"></iframe>
<form id="secondform" target="iframe2">
</form><iframe name="iframe1" style="display:none"></iframe>
<button typ"button" onclick="submitForms()"><img src="images/order-button.png" "/></button>
Alternatively AJAX the forms one at a time (assumes jQuery loaded)
DEMO HERE
$(document).ready(function() {
$("#subbut").click(function(e) {
e.preventDefault(); // or make the button type=button
$.post($("#firstform").attr("action"), $("#firstform").serialize(), function() {
$.post($("#secondform").attr("action"), $("#secondform").serialize(),
function() {
alert('Both forms submitted');
});
});
});
});
UPDATE: If you want two form's content to be submitted to one action, just add the serialises:
$(document).ready(function() {
$("#subbut").click(function(e) {
e.preventDefault(); // or make the button type=button
$.post($("#firstform").attr("action"), $("#firstform").serialize() + $("#secondform").serialize(), function() {
alert('Both forms submitted');
});
});
});
PS: The PHP in the demo is just echoing back what you post. There is no special action needed on the server.
Set the "target" attribute on the first form to "_blank"
Set the "action" attribute on the first form to "#close" (replace "close" with whatever you want.
Have a script on the page that checks if the document.location.hash is "close" if it is window.close()
Here's the jsfiddle to demonstrate.
http://jsfiddle.net/TqhPr/18/
HTML
<form id="f1" name="f1" target="_blank" method="POST" action="#close">
<input type="hidden" value="1" />
<input type="submit" id="s1" value="11" />
</form>
<hr/>
<form id="f2" name="f2" method="POST" action="#second_form">
<input type="hidden" value="2" />
<input type="submit" id="s2" value="22" />
</form>
<hr/>
<input type="button" id="both" value="Submit Both Forms" />
JavaScript
$(document).ready(function() {
$("#both").click(function() {
document.getElementById("f1").submit();
document.getElementById("f2").submit();
});
if(document.location.hash == "#close") {
alert("closing the window caused by posting the first form");
window.close();
}
if(document.location.hash) {
alert(document.location.hash);
}
});
I used this for a similar problem. I wanted to create a single page to query multiple sites and review their results side-by-side:WordLookup.html (main/home/frame entry point):
<html>
<head>
<title>Word Lookup</title>
</head>
<frameset cols="33%,34%,33%">
<frame src="" name="DIC">
<frameset rows="21,*">
<frame src="frame.html" name="PRF">
<frame src="" name="MW">
</frameset>
<frame src="" name="TFD">
</frameset>
</html>
and then this for frame.html (javascript method):
<html>
<head>
<style>
body { margin: 0; background-color: #AAAAAA; }
table, td { padding: 0; border-collapse: collapse; margin-left: auto; margin-right: auto; }
form { padding: 0; margin: 0; }
</style>
<script>
function submitForms(){
var x = document.getElementById("search3").value;
document.getElementById("fr1").setAttribute("value", x);
document.getElementById("DIC").submit();
document.getElementById("fr2").setAttribute("value", x);
document.getElementById("MW").submit();
document.getElementById("fr3").setAttribute("value", x);
document.getElementById("TFD").submit();
document.getElementById("search3").value = "";
}
</script>
</head>
<body>
<table>
<tr>
<td>
<input id="search3" type="text" placeholder="3x Search" onclick="value=''" onkeydown="if (event.keyCode == 13)
{submitForms()}" autofocus="1">
</td>
<td>
<form action="http://www.dictionary.com/dic" target="DIC" id="DIC">
<input id="fr1" name="q" type="hidden" placeholder="Dictionary" onclick="value=''">
</form>
</td>
<td>
<form action="https://www.merriam-webster.com/dictionary" target="MW" id="MW">
<input id="fr2" name="s" type="hidden" placeholder="Merriam-Webster" onclick="value=''">
</form>
</td>
<td>
<form action="//www.thefreedictionary.com/_/search.aspx" target="TFD" id="TFD">
<input id="fr3" name="word" type="hidden" placeholder="TheFreeDictionary" onclick="value=''">
</form>
</td>
</tr>
</table>
</body>
</html>
Sorry if this is a little wordy but it's a working example (in chrome 56ish).
This code successfully posted 2 forms data with single submit button.
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
/* Collect all forms in document to one and post it */
function submitAllDocumentForms() {
var arrDocForms = document.getElementsByTagName('form');
var formCollector = document.createElement("form");
with(formCollector)
{
method = "post";
action = "test.php";
name = "formCollector";
id = "formCollector";
}
for(var ix = 0 ; ix < arrDocForms.length ; ix++) {
appendFormVals2Form(arrDocForms[ix], formCollector);
}
document.body.appendChild(formCollector);
formCollector.submit();
}
/* Function: add all elements from frmCollectFrom and append them to
frmCollector before returning frmCollector*/
function appendFormVals2Form(frmCollectFrom, frmCollector) {
var frm = frmCollectFrom.elements;
for(var ix = 0 ; ix < frm.length ; ix++)
frmCollector.appendChild(frm[ix]);
return frmCollector;
}
</SCRIPT>
<FORM METHOD=POST ACTION="test.php" NAME="form1" id="form1">
<INPUT TYPE="text" NAME="box1" size="20" >
</FORM>
FORM2:
<FORM METHOD=POST ACTION="test.php" NAME="form2" id="form2">
<INPUT TYPE="text" NAME="box2" size="20" >
</FORM>
<INPUT TYPE="button" value="Submit Form 1 & 2" onClick="submitAllDocumentForms()">

Categories

Resources