I'm making a form and want something to happen when just a certain part of the form has been completed. I've got some checkboxes, a dropdown menu, and three read-only text fields. I need something to pop up when the checkboxes and dropdown fields have been populated, but have no idea how to do this. I tried putting a form within a form, but after that failed and I later read up on the matter, I found that to be impractical. Anyhow, here's my code for the form:
<form action="http://siedb1.sys.virginia.edu/~jhr3ct/Code/Reserve%20Confirmation.php">
Facility: <input type="checkbox" name="facility" value="AFC">AFC
<input type="checkbox" name="facility" value="Memorial Gym">Memorial Gym
<input type="checkbox" name="facility" value="Slaughter">Slaughter
<input type="checkbox" name="facility" value="North Grounds">North Grounds<br>
Type of Room/Court:
<select>
<option value="default">Choose room...</option>
<option value="squash">Squash</option>
<option value="handball">Handball</option>
<option value="racquetball">Racquetball</option>
<option value="multipurpose">Multipurpose</option>
</select><br>
Room: <input type="text" name="start" readonly="readonly"><br>
Start Time: <input type="text" name="start" readonly="readonly"><br>
End Time: <input type="text" name="end" readonly="readonly"><br><br>
<input id="submit" type="submit" value="Submit">
</form>
Thanks for the help!
You might be interested in learning basic javascript form events. There is many tutorials on internet. I suggest you this one: http://www.javascriptkit.com/jsref/select.shtml
If you need to show a popup after all check boxes are checked and the dropdown is changed add this kind of a function to the onclick events of all the check boxes and onchange event of the dropdown box.
function func() {
var inputTags = document.getElementsByTagName('input');
var dropdowns = document.getElementsByTagName('SELECT');
for (var i = 0; i < inputTags.length; i++) {
if (inputTags[i].type == 'checkbox') {
var aCheckBox = inputTags[i];
if(!aCheckBox.checked) {
return;
}
}
}
if(dropdowns[0].value == 'default') {
return;
}
alert("All checkboxes and dropdowns are filled.");
}
<form action="../Confirmation.php">
<input onclick="func()" type="checkbox" name="facility" value="AFC">AFC
<input onclick="func()" type="checkbox" name="facility" value="Slaughter">Slaughter
<select onchange="func()" id="ss">
</form>
Just to point you in the right direction: You will have to use javascript to check your form inputs values, and to show a pop-up window.
You could use jQuery to do that easily, and make a listener for the form submit() action, where you could check if your checkboxes and dropdown are selected.
The jQuery doc is here: http://api.jquery.com/submit/
Related
I'd like to add HTML to a Google Site that allows a user to press a button that displays a random letter of the alphabet. However, it should randomize only the letters that the user selects through checkboxes. Below is an image of what I'd like to achieve, and I'd like the result to display to the right of the checkbox array.
As to what I have tried so far, I have the following code that I modified from an open source online. I hope it is ok for my purpose.
<!DOCTYPE html>
<html>
<body>
<h1>Pick Letters To Randomize</h1>
<form action="/action_page.php">
<input type="checkbox" id="letter1" name="letter1" >
<label for="letter1"> A</label><br>
<input type="checkbox" id="letter2" name="letter2" >
<label for="letter2"> B</label><br>
<input type="checkbox" id="letter3" name="letter3" >
<label for="letter3"> C</label><br><br>
<input type="submit" value="Randomize">
</form>
</body>
</html>
But I am really at a loss for how to solve the rest of my problem.
Here is a working example for you. I have a few suggestions that I've implemented that will make this easier for you:
Add a value to the checkbox input. That way, you don't have to grab a child/sibling label.
I've added comments to show what I'm doing. Hope that helps!
document.addEventListener("DOMContentLoaded", function() {
const form = document.getElementById("randomLetterForm");
const submitBtn = document.getElementById("randomSubmit");
const textResult = document.getElementById("result");
// We check the values on the submit click
submitBtn.addEventListener("click", function(e) {
// Prevent it from *actually* submitting (e.g. refresh)
e.preventDefault();
// Grab *all* selected checkboxed into an array
const items = document.querySelectorAll("#randomLetterForm input:checked");
// Checking if it's not empty
if (items.length > 0) {
// Setting a random index from items[0] to items[items.length]
textResult.innerHTML = items[Math.floor(Math.random() * items.length)].value;
} else {
// If not, we alert
alert("Please choose at least 1 number");
}
});
});
<h1>Pick Letters To Randomize</h1>
<form id="randomLetterForm" action="/action_page.php">
<input type="checkbox" value="A" id="letter1" name="letter1" >
<label for="letter1"> A</label><br>
<input type="checkbox" value="B" id="letter2" name="letter2" >
<label for="letter2"> B</label><br>
<input type="checkbox" value= "C" id="letter3" name="letter3" >
<label for="letter3"> C</label><br><br>
<input id="randomSubmit" type="submit" value="Randomize">
</form>
<div>
<p id="result"></p>
</div>
I've got a very large grid of buttons that a user will use to set their availability. Currently, the user must click each button one at a time, which works, but can get really repetitive.
I was hoping to create a grid of button-like objects where the user can select multiple buttons by holding down their mouse button and dragging.
Is there any sort of equivalent to a button in HTML, React or Bootstrap where the click does not need to be released?
If not, would anyone here have any sort of suggestion?
Thank you
<script language="JavaScript">
function toggle(source) {
checkboxes = document.getElementsByName('foo');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
<input type="checkbox" name="foo" value="bar1"> Monday<br/>
<input type="checkbox" name="foo" value="bar2"> Tuesday<br/>
<input type="checkbox" name="foo" value="bar3"> Everyday<br/>
<input type="checkbox" name="foo" value="bar4"> Days that don't end in 'Y'<br/>
Source
I'm creating a page wherein I would fill up for an account creation. One of the forms there is answering a secret question. It is in select tag then the questions are in the option tag. After filling up the form, a prompt box will appear for the user to answer the Question he/she choose. If the right input is typed, overall, the user will be successfully logged in. But if incorrect, it will be Unsuccessfully logged in.
I can't figure out where I would put the answers of the diff. questions in the input for it to be successfully logged in when the correct answer is typed in the prompt at the output. Here is the code I did. Please correct this.
<HTML><HEAD><TITLE>Test Input</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testResults (form) {
var x = form.password.value=='Password';
var y = form.username.value=='Username';
var z =form.questions.value;
prompt ("What is your secret answer?","Type your answer here");
if (x&&y&&z)
{
alert("You are successfully Logged!");
}
else
{
alert("You are unsuccessfully Logged!");
}
}
</SCRIPT></HEAD><BODY>
<FORM NAME="myform" METHOD="GET">Username<BR>
<INPUT TYPE="text" NAME="username" VALUE="Username"><P>
<FORM NAME="myform" METHOD="GET">Password<BR>
<INPUT TYPE="Password" NAME="password" VALUE="Password"><P>
<form name="myform" method="get">
Secret Question<BR>
<select name="questions" size="1">
<option value="one"> Where is your Birthplace?</p></option>
<option value="two"> How old are you? </option>
<option value="three"> What is your favorite show?</option>
</select>
<INPUT TYPE="button" NAME="button" Value="submit" onClick=" testResults(this.form)">
</FORM>
</BODY>
</HTML>
See this fiddle:
http://jsfiddle.net/FqFLU/1/
var z =form.questions.value;
var ans=prompt ("What is your secret answer?","Type your answer here");
if (x&&y&&z==ans)
{
//Logged
}
I have a form with twitter bootstrap buttons as below
<label class="control-label span3">Status of the Dispute? </label>
<div class="controls span7">
<label class="inline radio">
<input type="radio" id="status" name="status" value="Continue"/> Continue</label>
<label class="inline radio">
<input type="radio" id="status" name="status" value="Resolved"/>Resolved</label>
<label class="inline radio">
<input type="radio" id="status" name="status" value="Referred"/> Referred</label>
<label for="status" class="error">Please tell us the dispute status</label>
</div>
</div>
Upon submission, the form submits the data successfully and refreshes well all other elements except the radio buttons.
I've searched for various options, and came along prop function. It helped me to somepoint as it unchecks the selector on the inside. CSS stylsheet on the user page still remain as if it is selected.
$('input[name="status"]').prop('checked', false);
I also tried this idea
$('input:not(:checked)').parent().removeClass("inline radio");
but its still not successfull.
My full submit code is as follows:
$.validator.setDefaults({
submitHandler: function(form) {
$.post('registermyform.php',
$("#registermyform").serialize(),
function(data)
{
$('#results').html(data);
if (data="yes"){
alert("The new Dispute has been successfully submitted!");
$('#registerDispute')[0].reset();
$('input[name="status"]').prop('checked', false);
$('input:checked').parent().removeClass("inline radio");
}
else {
alert("not submitted!");
}
});
}
});
Please assist. I want to remove the CSS of radio buttons such that it doesn't appear as if it is checked while it is not.
You need to iterate through the elements to reset them all:
var $items = $('input[name="status"]');
for (var i = 0; i < $items.length; i++) {
$($items[i]).prop('checked', false);
}
I'm trying to make a select box to switch from one searchform to the other, but I'm very unexperienced with HTML forms.
The two options should be "Blog" and "Shop". (FYI the blog one for Wordpress and the shop one for Opencart.)
For Wordpress the search url would be: /?s=TEST
For Opencart: /shop/?route=product/search&filter_name=TEST
These are the two forms so far:
<form method="get" id="blogsform" class="form-search" action="/">
<input type="search" name="s" id="s" placeholder="Blog durchsuchen ...">
<input type="submit" class="submit" id="searchsubmit" value="Durchsuchen">
</form>
<form method="get" id="shopsform" class="form-search" action="/shop/">
<input type="hidden" name="route" value="product/search">
<input type="search" name="filter_name" placeholder="Shop durchsuchen ...">
<input type="submit" class="submit" id="searchsubmit" value="Durchsuchen">
</form>
Thanks in advance for your help,
Markus
With jQuery, these are simple changes applied in the onchange event of a select box:
<select id="chooseform">
<option value="">Select Form...</option>
<option value="Blog">Blog</option>
<option value="Shops">Shops</option>
</select>
If you want to have two forms, and show/hide each form based on the selection, you might do something like this:
$('#chooseform').change(function() {
var choice = $(this).val();
if (choice == "Blog")
{
$('#blogsform').show();
$('#shopsform').hide();
}
else if (choice == "Shops")
{
$('#blogsform').hide();
$('#shopsform').show();
}
else
{
$('#blogsform').hide();
$('#shopsform').hide();
}
});
Demo: http://jsfiddle.net/Pf9QQ/
If you want to have a single form, but change the action/method and display properties of the form dynamically based on the selection, you could do it something like this:
$('#chooseform').change(function() {
var choice = $(this).val();
if (choice == "Blog")
{
$('#theform').attr('action', '/');
$('#s').attr('name', 's');
$('#s').attr('placeholder', 'Blog durchsuchen ...');
$('#theform').show();
}
else if (choice == "Shops")
{
$('#theform').attr('action', '/shop/');
$('#s').attr('name', 'filter_name');
$('#s').attr('placeholder', 'Shop durchsuchen ...');
$('#theform').show();
}
else
{
$('#theform').hide();
}
});
Demo: http://jsfiddle.net/JgLSE/
Which method you choose depends on which way is easier to maintain. If you have really large forms with only a few minor differences, you could use the second method. If the forms are very different, I would just maintain two separate entire forms and show/hide them appropriately based on the user's selection, because that will be less confusing or complicated.