I am trying to re-direct my code to another page but for some reason It wont allow me too. I have the exact page name but it will not re-direct to that page or any page for that matter. My code is dependant on a user select a radio button that displays either yes or no. Please advise on what my errors are. Thanks
<script type="text/javascript">
function idForm()
{
if(document.getElementById('No').checked) {
alert("Please book a meeting room, before organising catering.");
}
if (document.getElementById('Yes').checked)
{
window.location.href = "homePage.php";
}
}
</script>
<body>
<div id=""> <img src="" alt="" style="">
</div>
<div class="verify" style="margin:0 auto;">
<form name="form1" action="" onsubmit="idForm()" method="post">
<!-- Booking Filter -->
<h1>HAVE YOU BOOKED A MEETING ROOM PRIOR TO ORGANISING CATERING?</h1>
<input type="radio" id="Yes" name="agree" value="Yes"> Yes
<input type="radio" id="No" name="agree" value="No"> No<br> <br> <br>
<input type="submit" class="space" name="Submit" value="Submit">
</form>
</div>
window.location.href is a property not a method. just assign it.
window.location.href = "homePage.php";
Related
I have two forms on my page, one for submitting a comment and another for voting in a poll. These two functions are just a couple dozen lines apart but only the one for #comment-form actually prevents the default. The #poll-form submit button refreshes the page which is not what I want it to do.
$("#comment-form").submit(function(event){
event.preventDefault();
addComment();
});
//ajax stuff for adding the comment, addComment() etc.
$("#poll-form").submit(function(event){
event.preventDefault();
castVote();
});
HTML looks like:
<div class="add-comment">
<form id="comment-form">
<textarea id="comment-content" name="comment" placeholder="Leave a comment"></textarea>
<br>
<button type="submit">Submit</button>
</form>
</div>
<div class="poll">
<h1 class="title">Poll</h1>
<h3>Poll Question</h3>
<form id="poll-form">
<input type="radio" name="vote" value="0">
Choice 1
<br>
<input type="radio" name="vote" value="1">
Choice 2
<br>
<input type="radio" name="vote" value="2">
Choice 3
<br>
<input type="radio" name="vote" value="3">
Choice 4
<br>
<button type="submit">Submit</button>
</form>
</div>
I can't see the difference or figure out why the #poll-form submit won't prevent default.
You can try this also for stop form submit,
$("#poll-form").submit(function(e){
e.preventDefault();
alert('it works!');
return false;
});
I am working on validating forms am not sure if I am making it more complicated than it needs to be. I have a variable that i'm comparing the element to and then on success replacing a img src with a check for success or x for failure. It is supposed to run my validateData function once the field is unfocused. Here is the js. My img src src does not change when I test the first field by putting in numbers to trigger the redx.png src change.
function validateData() {
var letters = /^[A-Za-z]+$/;
var image1=document.getElementsById("image1");
if (document.forms["quiz_form"]["last_name"].value.match(letters) && document.forms["quiz_form"]["last_name"].value!="")
{
image1.src="check.png";
}
else{
image1.src="redx.png";
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="author" content="Kenneth Dunn" />
<meta name="description" content="" />
<script src="quiz.js"></script>
<link rel="stylesheet" href="quiz.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="logo">
<h1>Overwatch</h1>
</div>
<div id="content">
<h2>Overwatch Quiz</h2>
<p>
Hi there!
This quiz is dedicated to one of my favorite games Overwatch!
</p>
<form action="quiz.js" method="post" name="quiz_form">
<p><br>
<input name "first_name" type="text" placeholder="First Name" onblur="this.placeholder='First Name'" onfocus="this.placeholder='Use only letters'" onblur="validateData()"/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image1" class="image1"/>
</p>
<p><br>
<input name="last_name" type="text" placeholder="Last Name" onblur="this.placeholder='Last Name'" onfocus="this.placeholder='Use only Letters'" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image2" class="image2"/>
</p>
<p><br>
<input name="email" type="text" placeholder="Email" onblur="this.placeholder='Email'" onfocus="this.placeholder='Must contain # '" onblur="validateData()"/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image3" class="image3"/>
</p>
<p><br>
<input name="number" type="text" placeholder="Phone Number" onblur="this.placeholder='Phone Number'" onfocus="this.placeholder='Must follow xxx-xxx-xxx '" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image4" class="image4"/>
</p>
<p><br>
<input name="sulley" type="text" placeholder="Sulley Email" onblur="this.placeholder='Sulley Email Address'" onfocus="this.placeholder='Must contain ~ and https:// '" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image5" class="image5"/>
</p>
<br>
<br>
<p>
<h2>Find out which Overwatch character you are most like!</h2>
<p>If you could pick what form to take in a fictional universe with magic and cool science what would you want to be?</p>
<input type="radio" name="exist" value="1">Male(Human).<br>
<input type="radio" name="exist" value="2">Female(Human).<br>
<input type="radio" name="exist" value="3">An Animal or something crazy.
<p>What is your preferred weapon to take on bad guys and defend yourself?</p>
<input type="radio" name="weapon" value="1">Twin Shotguns for close range.<br>
<input type="radio" name="weapon" value="2">Twin pistols medium range.<br>
<input type="radio" name="weapon" value="3">An electro gun that schocks enemies into submission.
<p>Which motivations most align with your own?<p>
<input type="radio" name="idea" value="1">To become more powerful and to defeat those who would oppose me.<br>
<input type="radio" name="idea" value="2">To explore the world and discover the unknown.<br>
<input type="radio" name="idea" value="3">To protect my friends and those I care about.
<p>What do you look like?</p>
<input type="radio" name="look" value="1">Dark and mysterious black-hooded figure ,very edgy, like people in the Matix.<br>
<input type="radio" name="look" value="2">Short and spunky British airforce pilot who can travel back in time.<br>
<input type="radio" name="look" value="3">I'm a large gorilla who likes to eat bananas and peanut butter and can sheild my friends from harm.
<br>
<br>
<input type="submit" name="submit" id="submit" value="submit" />
<input type="reset" name="reset" id="reset" value="Reset" />
</p>
</form>
<br>
<br>
<br>
<br>
<div id="footer">
<h2 align="center" >Created by </h2>
</p>
</div>
</div>
</div>
</body>
</html>
You can't just simply set the action to your JS script, you will need to use the onsubmit event handler.
<form onsubmit="validateData">
This will trigger the validateData method once the form is submitted. This won't stop the form from performing as usual though, you will need to stop that in your validateData method like so:
function validateData (event) {
// prevent the form from actually submitting
event.preventDefault();
}
There are multiple problems here; some have been mentioned by others. One of the main problems is you had getElementsById instead of getElementById. If you haven't figured out how to pull up the developer console and see what errors you're getting, now would be a good time.
Form validation can get pretty complicated and normally I use a library that does the heavy lifting. You might look into that.
Here is a working version of what I'm guessing you're trying to do. It's far from optimal but it's what I was quickly able to come up with.
https://jsfiddle.net/ec2L08vf/1/
I currently have a code, that is loaded dynamicly, so I can not tweak it much.
But now I want to trigger the submit when clicking the entire <form>.
How can I achive that?
My current code:
<form action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<input type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>
Okay man, i will answer this, but on the next time you need to post your javascript code.
This is your markup:
<!-- add a id here -->
<form id="form" action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<!-- add a id here -->
<input id="submit" type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>
With your markup set now is time for the JS:
<script type="text/javascript">
//call a anonymous function
$(document).ready(function(){
//Event On click of the form
$('#form').click(function(){
$('#submit').trigger('click');
})
})
</script>
Obs: submit the form on click in his body dont makes sense to me, please explain this.
Edit:
You can learn basic JS and JQuery on www.codecademy.com
I am having problems trying to pass values to two different forms on the same page. The page is populated with 16 radio buttons (which I’ve turned into boxes for display reasons) and they all hold a value (e.g. 001). Both of the forms jobs are to somehow grab the active/selected radio button value and post it to a PHP file so database changes can be made. Instead of a submit button, I am using an anchor to pass a JavaScript submit function. I have tried having
both forms cover the whole page but still didn't have any luck.
I’ll post some code below to help you understand.
PS. If you need more code to understand, I can post it to pastebin.
<li>
<form id="form_ready" method="post" action="../backend/screen.php">
<input type="hidden" name="screenid" value="" />
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_ready').submit();">READY</a>
</form>
</li>
<li>
<form id="form_c" method="post" action="../backend/screen.php">
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_c').submit();">COLLECTED</a>
</form>
</li>
</ul>
<div id="content">
<div id="container">
<div id="table">
<div id="tr1">
<div id="td1">
<input type="radio" name="pickup" id="1" value="001" />
<label for="1"> <span>001</span> </label>
</div>
<div id="td2">
<input type="radio" name="pickup" id="2" value="002" />
<label for="2"> <span>002</span> </label>
</div>
<div id="td3">
<input type="radio" name="pickup" id="3" value="003" />
<label for="3"> <span>003</span> </label>
</div>
<div id="td4">
<input type="radio" name="pickup" id="4" value="004" />
<label for="4"> <span>004</span> </label>
</div>
To answer the suggestion in the comments and use only one form, here's how to grab the value from the selected radio button:
var inputs = document.getElementsByTagName('input');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
valueSelected will contain the value of the selected radio.
If you ever need to reduce the type to "radio" only for some reason, you can check an input type with inputs[i]['type'] === 'radio' in the for loop.
The best would probably still be to set a class for your "radio" inputs, it will allow the loop to be more specific, hence a more efficient code, for example:
<input type="radio" class="myRadio">
and in JS: var inputs = document.getElementsByClassName('myRadio');
All,
Have used this site a few times before and had some great replies so hopefully someone can help again. I want a set of radio buttons, so that when you click a button - you get another set below it. Then again, when you click one of the 2nd set of buttons, you'll get a third etc. Currently I have the following:
<html>
<head>
<title>My Wizard</title>
<script language="javascript">
function Display(question) {
h1=document.getElementById("yes");
h2=document.getElementById("no");
h3=document.getElementById("dk");
h4=document.getElementById("yes2");
if (question=="yes") h1.style.display="block";
else h1.style.display="none";
if (question=="no") h2.style.display="block";
else h2.style.display="none";
if (question=="dk") h3.style.display="block";
else h3.style.display="none";
if (question=="yes2") h4.style.display="block";
else h4.style.display="none";
}
</script>
</head>
<body>
<hr>
<form name="form1">
<p>Do you like the colour blue?</p>
<input type="radio" name="type" value="yes" checked
onClick="Display('yes');">
Yes
<input type="radio" name="type" value="no"
onClick="Display('no');">
No
<input type="radio" name="type" value="dk"
onClick="Display('dk');">
Don't know
<br>
<div ID="yes" style="display:none;">
<hr>
<p>Do you like the colour red?</p>
<input type="radio" name="type" value="yes2" checked
onClick="Display('yes2')">
Yes
<input type="radio" name="type" value="no2"
onClick="Display('no2');">
No
</div>
<div ID="yes2" style="display:none">
I want this to appear beneath the 2nd set of buttons, not replacing it!
</div>
<div ID="no2" style="display:none">
test2
</div>
<div ID="no" style="display:none">
<b>this is my no box:</b>
<input type="text" name="no" size="25">
</div>
<div ID="dk" style="display:none">
<b>dk:</b>
<input type="text" name="dk" size="15">
</div>
</form>
</body>
</html>
So basically, i'm trying to make a little wizard - so something that will ask the user a question, and based on this - it will ask them another. I dont want to use server side applications so am trying something simple like this - but whenever the user selects an option from the 2nd set of buttons, the text which goes with it replaces the 2nd set of buttons. What am i doing wrong?
Please select 'yes' and 'yes' again to see what i mean. Any help will be appreciated!
Joe
Radio input elements are grouped by their name attribute. You should assign a different name to the other sets of radio input elements.
Visual example:
[x] name=favColor [ ] name=favRed
[ ] name=favColor [x] name=favRed
[ ] name=favColor [ ] name-favRed
See also: https://developer.mozilla.org/en/HTML/Element/input
Your if statement is wrong. You ask again and again this: if (question=="yes") h1.style.display="block";
else h1.style.display="none"; and the second time if is not true, so you set the h1 to be hidden.
here is one solution:
<html>
<head>
<title>My Wizard</title>
<script language="javascript">
function Display(question, i) {
h1=document.getElementById("yes");
h2=document.getElementById("no");
h3=document.getElementById("dk");
h4=document.getElementById("yes2");
if(i==1){
if (question=="yes") h1.style.display="block";
else h1.style.display="none";
if (question=="no") h2.style.display="block";
else h2.style.display="none";
}else if(i==2){
if (question=="dk") h3.style.display="block";
else h3.style.display="none";
if (question=="yes2") h4.style.display="block";
else h4.style.display="none";
}
}
</script>
</head>
<body>
<hr>
<form name="form1">
<p>Do you like the colour blue?</p>
<input type="radio" name="type" value="yes" checked
onClick="Display('yes', 1);">
Yes
<input type="radio" name="type" value="no"
onClick="Display('no', 1);">
No
<input type="radio" name="type" value="dk"
onClick="Display('dk', 1);">
Don't know
<br>
<div ID="yes" style="display:none;">
<hr>
<p>Do you like the colour red?</p>
<input type="radio" name="type" value="yes2" checked
onClick="Display('yes2', 2)">
Yes
<input type="radio" name="type" value="no2"
onClick="Display('no2', 2);">
No
</div>
<div ID="yes2" style="display:none">
I want this to appear beneath the 2nd set of buttons, not replacing it!
</div>
<div ID="no2" style="display:none">
test2
</div>
<div ID="no" style="display:none">
<b>this is my no box:</b>
<input type="text" name="no" size="25">
</div>
<div ID="dk" style="display:none">
<b>dk:</b>
<input type="text" name="dk" size="15">
</div>
</form>
</body>
</html>