Develop Reference

How do i make a js code that redirects to a certain html page with a certain input?

let me explain this better, i would like to know how it's possible to create a js code that checks if an html input is correct and in case it is it redirects you to another page, here is what i tried based on what i managed to find out.
html part:
<form name="access" onsubmit="return validate()">
<input
type="text"
id="inputbox"
value="Password"
pattern="idkwhatishoouldwriteinhere"
/>
<input type="submit" value="Submit" />
</form>
js part:
function validate() {
if (document.access.Password.value != "idkwhatishoouldwriteinhere") {
alert("Wrong password");
document.access.Password.focus();
return false;
} else {
window.open("index.html");
}
}
in case you are wondering why i put the "answer" in the patter is because this is supposed to be a little easter egg and i feel like looking directly at the js is meaningless becuase it contains the link you should be redirected to.
enter code here

You need to give your input the name Password, otherwise document.access.Password is undefined.
function validate() {
if (document.access.Password.value != "idkwhatishoouldwriteinhere") {
alert("Wrong password");
document.access.Password.focus();
return false;
} else {
window.open("index.html")
}
}
<form name="access" onsubmit="return validate()">
<input type="text" id="inputbox" value="Password" name="Password" />
<input type="submit" value="Submit" />
</form>
<!-- password is "idkwhatishoouldwriteinhere" -->

You want this.
You had some issues with the id of the field and name etc
I also changed your inline code to eventListener which is the recommended method
Password is fred
window.addEventListener("load", function() {
document.getElementById("access").addEventListener("submit", function(e) {
const inputbox = document.getElementById("inputbox");
if (inputbox.value != "fred") {
alert("Wrong password");
inputbox.focus();
e.preventDefault(); // cancel submit
} else location.replace("index.html")
});
})
<form id="access">
<input type="password" id="inputbox" value="" placeholder="Password" />
<input type="submit" value="Submit" />
</form>

If you want to keep your code close to what you already have, I would adjust it like this. I would suggest storing your class names and ids as variables and then accessing them from the variable. Also there is no need to return false in your if. There are other good solutions on here but this one will keep your code pretty close. This will also ensure that you don't end up with a null value when accessing the value in your password field.
const passwordField = document.getElementById('inputbox');
function validate() {
if(passwordField.value != "idkwhatishoouldwriteinhere") {
alert( "Wrong password" );
passwordField.focus() ;
}
else {
window.open("index.html")
}
}
<form name="access" onsubmit="validate()" href="javascript:void(0)">
<input type="text" id="inputbox" value="Password" />
<input type="submit" value="Submit" />
</form>

Two button submit form issue

Hi successfully made a form where there are two submit buttons.
I needed two buttons because I need each button to take the form to a different place, while get/post the information in the first form.
This is how I did it
Javascript:
function submitForm(action) {
var form = document.getElementById('form1');
form.action = action;
form.submit();
}
<form id="form1" method="post" >
<div class="f-row">
<label for="pick">Pick-Up Address</label>
<input type="text" input name="pick" required value="<?php echo isset($_POST['pick']) ? $_POST['pick'] : ''; ?>"/>
</div>
<input type="button" onclick="submitForm('page2.php')" class="btn small color left" value="ADD ANOTHER STOP" />
<input type="button" onclick="submitForm('page3.php')" class="btn medium color right" value="Continue" />
</form>
It works, both buttons submits to the relevant pages.
But now there is one problem I can't seem to fix, previously if the form was not filled, and i clicked submit, it would ask me to fill up the required fields, now it does not anymore.
If required fields are not filled up, it still submits the form.
I need button 1 to not require required fields to be filled up, and button 2 to require it as button 2 submits the form, while button 1 brings it to a new form to fill up with other details before they submit from there.
Anyone know of a way I can sort this?

You can try this: <input type="text" name="pick" id="pick" required/> and in the javascript
function submitForm(action) {
var form = document.getElementById('form1');
form.action = action;
if (document.getElementById('pick').value) {
form.submit();
}}
else{
alert('Please fill the required field!');}

You just need to use jquery to validate the form when the first button is clicked and you can use formaction attribute on the button to specify where the button should go when it's clicked.
$('document').ready(function(){
$('#btn1').on('click',function(){
var pick = $('input[type="text"][name="pick"]').val();
if(pick == ""){
alert("enter pick");
return false;
}else{
$(this).submit();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" >
<div class="f-row">
<label for="pick">Pick-Up Address</label>
<input type="text" name="pick" value="your value">
</div>
<button type="submit" formaction="page2.php" class="btn small color left" id="btn1">ADD ANOTHER STOP</button>
<button type="submit" formaction="page3.php" class="btn medium color right">Continue</button>
</form>

You could use jQuery for this.
if ($('#something').length)
This will check if there exist an element with the id 'something', but not if it is empty or which value it has.
To check this you can use:
if($('#something').val().length>0)
or
if($('#something').val() != "")
Do with it what ever is needed.
You could even add this check within your submitForm function just above the current code.

Try this:
<script>
function submitForm(action) {
var a = $("input[name=pick]").val();
if(a) {
var form = document.getElementById('form1');
form.action = action;
form.submit();
} else {
alert('please fill the required field');
return false;
}
}
</script>

Using this way(simple way):--
<form id="myForm" name="myForm" onSubmit="encriptar_rc4();return false;">
<input type="submit" name="submitOne" value="submitOne" class="submitButton" />
<input type="submit" name="submitTwo" value="submitTwo" class="submitButton" />
</form>
<script>
$(function(){
$(".submitButton").click(function(e){
alert($(this).attr("name"));
});
encriptar_rc4();{
alert('hola');
}
});
</script>

JavaScript: Stopping form from refreshing? [duplicate]

This question already has answers here:
Using JQuery - preventing form from submitting
(15 answers)
Closed 5 years ago.
I am trying to get my form to stop refreshing on submit and instead I would like to make an ajax call, I haven't done the ajax part yet but its still refreshing?
What have you tried?
I have took suggestions on the forum and added 'return false;' after the function is called onSubmit?
$('#message_form').submit(function() {
postMessage();
return false;
});
function postMessage() {
var isValid = true;
var username = document.forms["post_message_form"]["username"].value;
var message = document.forms["post_message_form"]["message"].value;
var errorMessage = "Something went wrong, try again!";
if (isEmpty(username) || isEmpty(message)) {
errorMessage = "You can't post with an empty name or message.";
isValid = false;
}
if (!isValid) {
alert(errorMessage);
}
else {
alert("Your message has been posted.");
}
return false;
}
function isEmpty(field) {
return field == null || field == "";
}
Form:
<form id="message_form" name="post_message_form" method="post">
<input type="text" class="form-control" placeholder="Whats your name?" name="username">
<textarea class="form-control" placeholder="Whats your message?" name="message"></textarea>
<input type="submit" class="btn btn-info" name="message_form" value="Submit Message">
</form>

Try this:
<form id="message_form" name="post_message_form" method="post" onsubmit="return postMessage();">
<input type="text" class="form-control" placeholder="Whats your name?" name="username">
<textarea class="form-control" placeholder="Whats your message?" name="message"></textarea>
<input type="submit" class="btn btn-info" name="message_form" value="Submit Message">
</form>

Try this code added onsubmit="return postMessage()
<form id="message_form" name="post_message_form" method="post" onsubmit="return postMessage()">
<input type="text" class="form-control" placeholder="Whats your name?" name="username">
<textarea class="form-control" placeholder="Whats your message?" name="message"></textarea>
<input type="submit" class="btn btn-info" name="message_form" value="Submit Message">
</form>

EDIT: Updated
There can be certain reasons regarding this kind of issue
postMessage is not accessible
There may be chances that this message is not globally declared
There may be other error in javascript code
Some some piece of code does not work due to error in other parts of javascript code
There may be chances that you have not loaded jquery core library file
If have not include jquery.min.js file your above code will not work (your case - See comments)
Since return false and event.preventDefault(); do the same work in this example you can use one of them
$('#message_form').submit(function(event) {
event.preventDefault();
postMessage();
// return false;
});
To debug the code and find the error you can open developer tools in browser by pressing f12 or select option inspect element by clicking right click on the page

use preventDefault instead return false;
$('#message_form').submit(function(event) {
console.log(123);
event.preventDefault();
});
https://codepen.io/animhotep/pen/bRBmxm?editors=1011
like in official maual ;) https://api.jquery.com/submit/

Construct GET url from java script and submit

On click of search button in my form, i want to set some param to url and submit it.
Below is my javascript
function validateSubmitSearch(form) {
if(form.elements["iAccept"].checked == true) {
form.query.value=form.search_query.value;
form.action = "vendor/search";
form.method = "GET";
form.submit();
}
}
This javascript is returning url as
http://localhost:8080/Project/vendor/search?query=xxx&search_query=xxx&search=Search
Instead i need it as
http://localhost:8080/Project/vendor/search?query=xxx
How this can be done ?
EDIT:
I cannot remove form elements search_query and search
Here is HTML code
<form class="searchform" onSubmit="validateSubmitSearch(this)">
<input name="query" type="hidden" />
<input name="search_query" class="textbox" type="text" />
<input type="checkbox" id="iAccept" name="iAccept" value="I ACCEPT">
<input name="search" class="button" value="Search" type="submit" /></td>
</form>

When you submit a form with `method="GET", all the input fields in the form will be included as URL parameters. If you want some of them to be left out, you need to remove those inputs from the form.
function validateSubmitSearch(form){
if(form.elements["iAccept"].checked == true)
{
form.query.value=form.search_query.value;
form.action = "vendor/search";
form.method = "GET";
form.seach_query.parentNode.removeChild(form.search_query);
form.search.parentNode.removeChild(form.search);
form.submit();
}
}
}
Also, you should disable the default form submission by returning false from the onsubmit code.
<form class="searchform" onsubmit="validateSubmitSearch(this); return false;">

Validate all form data before submitting

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()">