Develop Reference

On submit and o'clock not working together

I have read previous posts on this and have tried to apply the onsubmit on my form element in HTML but still doesn't seem to work. I have it as follows:
<form class="button" id="arrow" onsubmit='return hotelList()'>
<input type='submit' value='Submit'/>
</form>
and js:
const hotelList = () => window.location.href = './ochome.html';
Any suggestions? Thank you
Full code:
New Question: my required field does not seem to be working, and the sends me to the other page regardless....
enter code here
<form action="/user-details.html" class='login'>
<!-- is this GET or POST?? -->
<label for="username" >Username</label><br>
<input class="whitebox" type="text" id='username' required/>
<label for="pass" id='pass'>Password</label><br>
<input class="whitebox" type='password' id='passBox' required/>
<input type="submit" id='arrow' value="> Submit">
</form>

the form contains all the input you want to submit and the action is like: action="/file.js" and it has to be a file which handles the data
the code:
<form action="/user-details.html">
<label for="fname">First name:</label><br>
<input class="whitebox" type="text" id='username' required/>
<label for="lname">Last name:</label><br>
<input class="whitebox" type='password' id='passBox' required/>
<input type="submit" value="Submit"/>
</form>

required field not working inside div

I Am trying to implement default required field into HTML5 form but it is not working if I have it inside a div.
Not working code:
<form>
<div class="form-phone">
<label for="phone" id="lphone">Phone no:</label><br>
<input type="number" id="phone" name="phone" placeholder="Phone-Number" required/><br>
</div>
<div id="confirmDetails">
<input id="submitbtn" type="submit" value="Call Me!" />
</div>
</form>
Working code:
$('#confirmDetails').on('click', 'input', function(e) {
alert(test);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-phone">
<label for="phone" id="lphone">Phone no:</label><br>
<input type="number" id="phone" name="phone" placeholder="Phone-Number" required/><br>
</div>
<input id="submitbtn" type="submit" value="Call Me!" />
</form>

Add an id to the form:
<form id="myForm">
<div class="form-phone">
<label for="phone" id="lphone">Phone no:</label><br>
<input type="number" id="phone" name="phone" placeholder="Phone-Number" required/><br>
</div>
<div id="confirmDetails">
<input id="submitbtn" type="submit" value="Call Me!" />
</div>
</form>
And listen for the event "submit" of the form:
$('#myForm').on('submit',function (e) {
alert(test);
})
This way you leave the navigator to make the validation. And don't forget to add validation on the server side
Hope this helps

You have wrong logic with js.
Add click event to the submit button, not the div
use this
$('#submitbtn').on('click', 'input',function (e) {
alert(test);
})

Two forms with submit buttons two different functions. One button to run a javascript

Form1 has the action to link to an external .aspx file. But once I added Form2 and the javascript file, contact-us/js/app.js, to the page. The javascript now controlls both form submit buttons. How do I link the javascript file to only run when Form2 button is submitted?
Form1
<div id="guestLogin">
<form id="frmguestlogin" name="frmguestlogin" method="post" action="AutoLogin.aspx" >
<input type="hidden" name="username" class="text" id="username" onfocus="this.value='';" tabindex="30" value="guest" />
<input type="hidden" name="password" class="text" id="password" onfocus="this.value='';" tabindex="40" value="guest" />
<input type="submit" width="80" height="20" border="0" name="submit" id="submit" value="Guest Login" tabindex="50" />
</form>
</div>
Form2 code. The last script is controlling both submit buttons on the page. How do I only have it control Form2 submit button?
Form2
<div id="form-wrapper">
<div class="inner cover">
<form class="form-signin" id="form-signin" >
<h4 class="sendMsg">Send us a message</h4>
<input type="text" id="first" class="form-control" placeholder="First Name" required>
<input type="text" id="last" class="form-control" placeholder="Last Name" required >
<input type="text" id="company" class="form-control" placeholder="Company" required >
<input type="text" id="phone" class="form-control" placeholder="Phone" required >
<input type="email" id="email" class="form-control" placeholder="Email" required >
<p> Tell us how we can help you</p>
<textarea id="comments" style="font-family: Arial, Helvetica, sans-serif" class="form-control" cols="45" rows="5" required ></textarea>
<button class="btn btn-lg btn-primary btn-block" type="submit">Send Your Message</button>
<input id="subject" name="subject" type="hidden" value="Contact Us" />
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="contact-us/js/bootstrap.min.js"></script>
<script src="contact-us/js/ie10-viewport-bug-workaround.js"></script>
<script src="contact-us/js/app.js"></script>
app.js code to control form2 only:
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault();
//Submit Form
var first = $("input#first").val();
var last = $("input#last").val();
var company = $("input#company").val();
var phone = $("input#phone").val();
var email = $("input#email").val();
var comments = $("textarea#comments").val();
var subject = $("input#subject").val();
$.ajax({
type: "POST",
url: "contact-us.asp",
data: { first : first,
last : last,
company : company,
phone : phone,
email : email,
comments : comments,
subject : subject },
cache : false,
contentType:"application/x-www-form-urlencoded; charset=UTF-8",
success: function() {
$('.form-signin').hide();
$('.cover').fadeIn('slow').html('<h2>Thank You, '+first+' '+last+'</h2>');
}
});
});
});

To route it with a certain script (without a form submit) I would use a normal button type.
<input type="button" value="Submit" onclick="myFunction()">
The onclick calls the JavaScript function that contains what you want it to do.
Edited - Added notes:
Also this calls just a form in general
$("form").submit
It doesn't specify what form it is, use an ID to find the 2nd form
Code:
$(document).ready(function(){
$("#form2").submit(function(){
alert("Submitted");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Form 1</h1>
Form one goes to aspx.
<form action="AutoLogin.aspx">
First name: <input type="text" name="FirstName"><br>
Last name: <input type="text" name="LastName"><br>
<input type="submit" value="Submit">
</form>
<h1>Form 2</h1>
Form two goes to the JQuery based off of the form ID (this works with external files as well)
<form id="form2">
First name: <input type="text" name="FirstName"><br>
Last name: <input type="text" name="LastName"><br>
<input type="submit" value="Submit">
</form>

Hijacking from submit to redirect page (Javascript)

So we're using an online service to handle webinars on our site.
I have full control of the HTML for the registration page but don't have control of the PHP file used in the registration. Currently, the registration form looks like this:
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>
This submits the values from the form to "notify.php". notify.php apparently has code to force the iframe this code is hosted inside of, to redirect to another page. I don't want this to happen.
I want the form to submit, but then I want to send the user to my own ThankYou page. I'm thinking that the best way to do this is by "hijacking" the submission and sending them to the page I want.
I thought that maybe calling a custom javascript function using onsubmit might work. Here's what I have right now:
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST" onsubmit="return doRedirect();">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>
<script language="javascript" type="text/javascript">
function doRedirect()
{
window.location.replace("http://stackoverflow.com");
return true;
}
</script>
For some reason it's not working though. The iframe continues to redirect to the page I don't want, and the window itself isn't being redirected.
Am I doing this right or is there a better way of achieving this?
Thank you in advance for your help!
Jason
UPDATE: I've confirmed that the javascript is never executing. I added: window.alert("JAVASCRIPT EXECUTED"); and the pop-up never happens so this appears to be an issue with onSubmit rather than the javascript itself. Why won't the javascript execute in onSubmit? I tried changing it to onSubmit="JavaScript:doRedirect();" and that didn't work either.

This should do the trick:
<input type="submit" name="go" onclick="doRedirect();" value="Sign Up for Webinar!" />
If you are looking to completely remove the interaction with the php form, remove the action from the <form> tag
<form accept-charset="UTF-8" name="regform" id="regform" class="infusion-form" method="POST">

If you are willing to try AJAX:
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
jQuery(function($) {
$('#regform').submit( function(e){
$.ajax({
type: 'post',
data: $(this).serialize(),
url: $(this).attr("action")
})
.done(function (data){
$(location).attr('href', 'http://stackoverflow.com');
});
e.preventDefault();
});
});
</script>
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>

Password validation (2 Textboxes, comparision)

before you blame me, yes I was looking for something similar for about a hour, but sadly I couldn't find my error, atleast the Questions I was looking for in stackoverflow didn't gave me a correct answere, as I have almost exactly the same thing (not Copy and Paste).
However could someone explain me, why my code (javascript) isn't working?
I am playing around with it for some hours now but I can't find it.
<html>
<head>
<title>Anmeldung/Login</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script>
function abc(){
var a = document.getElementById('pw').value;
var b = document.getElementById('repw').value;
if(a==b){
alert(yes)
}
}
</script>
</head>
<body>
<div id="banner">
<p>NAME/ÜBERSCHRIFT</p>
</div>
<form id="loginpanel">
<fieldset>
<legend>LOGIN</legend>
<p class="textinput">Benutzername: <input name="id" type="text" size="30" maxlength="30"></p>
<p class="textinput">Passwort: <input name="pw" type="password" size="30" maxlength="15"></p>
<input class="button" type="button" name="login" value="Anmelden"/>
</fieldset>
</form>
<p id="option"> ...oder Registrieren!</p>
<form id="registerpanel">
<fieldset>
<legend>REGISTER</legend>
<p class="textinput">Benutzername: <input name="id" type="text" size="30" maxlength="30"></p>
<p class="textinput">eMail: <input name="email" type="text" size="30" maxlength="30"></p>
<p class="textinput">Passwort: <input name="pw" type="password" size="30" maxlength="30"></p>
<p class="textinput">Passwort wiederholen: <input name="repw" type="password" size="30" maxlength="30"></p>
<input class="button" type="button" onclick="abc()" name="register" value="Registrieren"/>
</fieldset>
</form>
</body>
I would be happy if someone can give me an answere!
Thank you for taking your time :)!

You must have inputs with id attribute with values pw+repw. Having only a name attribute will not work
example: <input name="repw" id="repw" type="password" size="30" maxlength="30">
Corrected version (only relevant parts):
<script>
window.abc = function(){
var a = document.getElementById('pw').value;
var b = document.getElementById('repw').value;
if(a==b){
alert("yes")
}
}
</script>
...
<form id="registerpanel">
<fieldset>
<legend>REGISTER</legend>
<p class="textinput">Benutzername: <input name="id" type="text" size="30" maxlength="30"></p>
<p class="textinput">eMail: <input name="email" type="text" size="30" maxlength="30"></p>
<p class="textinput">Passwort: <input name="pw" id="register-pw" type="password" size="30" maxlength="30"></p>
<p class="textinput">Passwort wiederholen: <input name="repw" id="register-repw" type="password" size="30" maxlength="30"></p>
<input class="button" type="button" onclick="abc()" name="register" value="Registrieren"/>
</fieldset>
</form>
Note the added IDs. I didn't do pw and repw because having plain pw in login made more sense to me (11684) (don't forget to add that in the login form). Because I'd do register-pw I went for consistency and did register-repw. But it doesn't matter what these IDs are as long as they are unique.
And I changed the typo alert(yes) into alert("yes") because obviously the first throws a reference error.
A working JSFiddle: http://jsfiddle.net/7NZUc/