This might be an easy fix I am just not seeing, but I am trying to setup a basic delivery zone function. If you are in delivery zone, after you submit your zipcode an alert says you are in our zone and when you click ok, it takes you to the booking page. Else, say they are outside of the zone. I can't seem to get an onclick demand for the alert to take to the booking page. (P.S. All javacript brought into Squarespace)
<script type="text/javascript">
function IsValidZipCode() {
var zip = document.getElementById('txtZip').value;
var ZipArray = ["60543", "60188"];
var isValid = ZipArray.indexOf(zip); ;
(isValid );
if (isValid >= 0){
alert ('Nice! go ahead and book!')
// NEED TO LINK TO NEW WEBPAGE
return true;
}
else {
alert('Sorry, we do not offer delivery here at this time');
return false;
}
}
</script>
<form>
Please Enter Zip Code: <input id="txtZip" name="zip" type="number" />
<input onclick="IsValidZipCode()" id="Button" type="submit" value="Submit"/>
</form>
From the comments, it sounds like your problem is the submit button refreshing the page on click. You need to use e.preventDefault to prevent this.
<input onclick="IsValidZipCode(event)" id="Button" type="submit" value="Submit"/>
function IsValidZipCode(event) {
if (isValid >= 0){
event.preventDefault;
alert ('Nice! go ahead and book!')
window.location.href = 'yoururl.com'
}
}
Here's a good reference: preventDefault inside onclick attribute of a tag
https://jsfiddle.net/yLyvt30y/
Related
I have this email form, with "Sender, "Subject" and "Message".
But i haven't linked it to make sure they have written something, so if someone press the "Send" button without typing anyting, i get a blank email. So i want it to abort the email sending if the textbox is empty, and send it if it contains any text.
code for the send button:
<input type="submit" name="submit" value="Submit" class="submit-button" />
ID for the textbox is: textbox_text
You can use jquery to validate the form like this-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
Sender
<input type="text">
<br/>Subject
<input type="text">
<br/>Message
<input type="text" id="txtMessage">
<br/>
<input type="submit" value="Send" name="btnSend">
</form>
<script type="text/javascript">
$(document).ready(function() {
$("input[name=btnSend]").click(function() {
var msg = $("#txtMessage").val();
if (msg == "") {
alert("Please enter the message");
return false;
}
});
});
</script>
Java Script function
<script type="text/javascript">
function IsEmpty()
{
if(document.forms['frm'].textbox_text.value == "")
{
alert('Message body is empty');
return false;
}
return true;
}
</script>
HTML
<form name="frm">
<input type="submit" name="submit" onclick="return IsEmpty();" value="Submit" class="submit-button" />
</form>
EDIT Check textbox2 in if condition
if(document.forms['frm'].textbox1.value == "" && document.forms['frm'].textbox2.value == "")
I dont know this is your exact answer but it will helps you to validate:
$('#checkSubmit').click(function(){
var chec=$("#textContent").val();
if(chec=="")
alert("Please add your content");
else
alert("successfully submitted");
});
check out this fiddle:
http://jsfiddle.net/0t3oovoa/
You need to check that on server side (with php) and you can also check it on client side(Javascript).
Client side test is good if you want the user to get fast response, but you still need to check it on server side because javascript on your website can ALWAYS be changed by user.
You could also just add "required" on your input elements.
for server side check with php:
<?php
//Check if variables exist
if(isset($_POST['sender']) && isset($_POST['subject']) && isset($_POST['message'])){
//Check if sender value is empty
if(empty($_POST['sender'])){
//If empty, go back to form.Display error with $_GET['error'] in your form page
header('location: backToFormPage.php?error=send');
}
//...
}
//Variables doesn't exist
else{
//Redirect to page or other action
}
?>
You can achieve it two ways:
1. Client Side( Which i recommend) use the form validation to validate the form data if it is empty tell them to fill it. You chose the submit button to trigger validation that is not recommended instead validation is triggered on form submission or on change of input elements(for real-time validation). Anyways below is an example for validation using the click event on submit button.
var validateTextBox = function(textBox) {
var val = textBox.value;
if(val=="") { // Check for empty textbox
return false;
}
return true;
}
documnet.querySelector('#SubmitButton').onclick(function () {
var textbox = document.querySelector("#SubjectORMessage").value;
if(validateTextBox(textbox)){
// Do something to let page know that form is valid
} else {
// Let the user know that he has done something wrong
alert("Please fill the content");
}
})
2. Server Side if unfortunately empty data is send to the server, then use server side validation (Server side validation requires a little more thing to do at more than one place, i.e., html, php/python/perl)
I am brand new to Javascript and am just using it to make a simple website for fun. I have tried searching the web but am still stuck, so if you could help me or redirect me towards other help, that would be great.
I am trying to use Javascript to send a user to another html page in my site if their input matches my criteria. So I wanted to use an if/else statement to do this: if the text input equals ODQHVHMJKD, it would send them to page3.html. However when I try this on the browser, nothing happens--it just takes me to an identical page with ?codebox1=f&button1=Submit at the end of the address.
Here is my script section:
<script type="text/javascript">
function testResults (form) {
if (form.codebox1.value == ODQHVHMJKD) {
window.location.pathname = 'page3.html';
}
else {
window.alert("Try again!");
}
};
</script>
Here are my form elements:
<form name="form1" method="GET">
<input name="codebox1" type="text" />
<input name="button1" type="submit" value="Submit" onClick="testResults(this.form)"/>
</form>
Can you help me so that I can get this to work? It's more than likely I've done everything completely wrong--any help is appreciated!
Try this,
function testResults (form) {
if (form.codebox1.value == "ODQHVHMJKD") {
window.location = 'page3.html';
}
else {
window.alert("Try again!");
}
return false;
};
You need to prevent the default action of the form. In the submit event, call e.preventDefault(); or return false In addition, you need quotation marks around ODQHVHMJKD
Js Fiddle: http://jsfiddle.net/prankol57/Ht45t/
Maybe this can help you.
<form name="form" onsubmit="Results()">
<input type="text" name="fname" id="val">
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
function Results() {
var val = document.getElementById('val').value;
if (val == "ODQHVHMJKD") {
window.location = 'page3.html';
} else {
window.alert("Try again!");
}
};
</script>
What I am trying to do is redirect to a new page if the "yes" button is clicked. I already have a prompt set up if they click "no". However, there is a form (name and email) that needs to be filled out for this to work. If they do not fill out these details, I want a prompt to arise telling the user that they need to fill them out before they can proceed.
I am fairly new to javascript so any tips or explanations would be greatly appreciated.
Below is the html code
<input type="radio" name="radio" id="yes"><strong>Yes, I agree.</strong>
<br>
<input type="radio" name="radio" id="no" checked="checked"><strong>No, I do not agree. </strong><br>
<br>
If you agree, please enter your full name and email address in the spaces below and press submit.
<br>
<form> Full Name:<input type="text" name="fullname"></form>
<br>
<form> Email Address:<input type="text" name="email"></form>
<br>
<br>
<form action="endPage.jsp" id="form">
<input type="submit" id="submit" value="Submit" name="submit" />
</form>
And the javascript code
var submitBtn = document.getElementById("submit");
var termsChk = document.getElementById("yes");
var formFrm = document.getElementById("emailField");
var formFrm = document.getElementById("nameField");
submitBtn.addEventListener("click", function() {
if (termsChk.checked === true && formFrm)
{
alert("Checked!");
formFrm.submit();
} else {
alert("Please Contact Spearhead Mining Corporation: projects#spearheadmining.com to discuss your options for project submittal!");
}
return false;
});
Use window.confirm() with the spcific message to user and use window.location() to redirect to the new url.
result = window.confirm("Message to user");
if(result) {
window.location = "new url";
} else {
//do the rest of logic
}
For a more specific answer it might help if you posted the code for yes and no buttons, as well as the HTML code for the form. That being said the way you would generally handle this is in the code for the yes button you run whatever client side validations you need to run, in this case checking if the name and email fields aren't empty, then displaying your error message instead of redirecting if everything is not valid.
For instance in your yes handler
if(document.getElementById('emailField').value == null || document.getElementById('namefield') == null){
/*error handling code goes here*/
return
}
else{
/*redirection code goes here*/
}
I am checking the textbox value in javascript. and saving to database. where as my save is of submit type. I want if textbox value is greater than 100 then it should alert. and after alert , page should not submit.
Firstly, bind the click event of that button to a function. Secondly, use event.prevent default to stop that button from submitting the form. Thirdly, validate the value you want. If validated, use form id to submit the form. Something like this:
$("#ButtonId").on("click", function(event) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
if ($("#InputBoxID").val() < 100) {
$("#FormId").submit();
}
else {
alert("your message");
}
});
Above code is in jQuery, so do not forget to add the reference to jQuery.
I think you're looking for something like:
<form id="myForm" onsubmit="return validateForm();">
<input type="text" id="textfield"/>
<button type="submit">submit</button>
</form>
<script>
function validateForm(){
var value=parseInt(document.getElementById('textfield').value);
if(value>100){
alert('value is no good. larger then 100');
return false;
}
}
</script>
If you can show me your code I'd be happy to help you implementing such a feature.
Here you have an example of how to do it. I used a limit of 10 characters to make the test easier: Try if yourself
HTML:
<input type="text" id="myTextBox" onkeyup="checkValue(this)" maxlength="10"></input>
<input id="sendButton" type="submit" value="SEND"></inpu
JAVASCRIPT:
function checkValue(textbox) {
if (textbox.value.length > 10) {
alert("TEXT TOO LONG");
document.getElementById("sendButton").disabled = true;
}
else
document.getElementById("sendButton").disabled = false;
}
The below code is a simple number guessing game.
The function guess() is getting called twice. I am at loss of logic why it's happening.
<!DOCTYPTE html>
<html>
<head><title>Number Guessing Game version 1.0</title></head>
<body>
<form onsubmit="guess();return false;">
<p><h2>I am your host, human. I am thinking of a number between 0 and 100, including both</h2></p>
<p><input type="text" id="inputId" autocomplete="off"></input><button id="submitButton" onclick="guess()">Guess!!</button></p>
<p><span id="msgId"></span></p>
<p>Guesses Remaining:<span id="guessId"></span></p>
</body>
</form>
<script language="javascript">
var doubleRandom = Math.random();
var guessesLeft = parseInt("10");
var intRandom = Math.round((doubleRandom*100));
var spanObj = document.getElementById("msgId");
var guessObj = document.getElementById("guessId");
guessObj.innerHTML=guessesLeft;
function guess()
{
var guessedNumber = document.getElementById("inputId").value;
alert(23);
if(guessedNumber==null || guessedNumber.trim()==''){
spanObj.innerHTML="Type something, human";
return;
}
if(isNaN(guessedNumber)){
spanObj.innerHTML="That better be a number, Human.";
return;
}else{
if(guessedNumber>100){
spanObj.innerHTML="That better be a number between 0 and 100, Human.";
return;
}else{
spanObj.innerHTML="";
}
}
var accurateAnswer = Math.round(guessedNumber);
var difference = guessedNumber-intRandom;
if(difference>45){
spanObj.innerHTML="That's way too high, Human";
return;
}else if(difference<-45){
spanObj.innerHTML="That's way too low, Human";
}else if(difference<=45 && difference>0){
spanObj.innerHTML="That's high, Human";
}else if(difference>=-45 && difference<0 ){
spanObj.innerHTML="That's low, Human";
}else{
spanObj.innerHTML="Bingo!! You got it!! Refresh to play agin.";
}
if(guessesLeft<=0){
spanObj.innerHTML="You have exhausted your number of guesses. Try again. Refreshing game....";
setTimeout("location.reload(true)", 3000);
}
guessesLeft=guessesLeft-1;
guessObj.innerHTML=guessesLeft;
}
</script>
</html>
That's because you are calling it twice: Once in the button's onclick event, and once in the form's onsubmit event. Delete one of them.
Change
<button id="submitButton" onclick="guess()">Guess!!</button>
to
<input type="submit" id="submitButton" value="Guess!!" />
This way, irrespective of if you click the button, hit enter, or use some other method to submit the form, your event will fire, once.
When you are hit the enter button the form is submitted. On form submit you have the function triggering.
What you could do is to make the button submit the form when clicked.
<button onclick="form[0].submit()">guess</button>
If the button is clicked the form is submitted, therefore the function in from submission is called on button click. This works on hitting enter as well. Both way the function is triggered only once.