I have a main-page with several separate iFrames including radio-buttons.
I want to validate the choices and because of that need the values of specific radio-button choices.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>...</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$('#validate').click(function() {
alert('Value ' + $('#legitimation').contents().find('input[name="group_1"]').val());
});
</script>
</head>
<body>
<iframe id="legitimation" name="legitimation" src="Legitimation.html" width="300" height="800">
<p>Your browser does not support iframes.</p>
</iframe>
<input type="button" id='validate' name='validate' value='VALIDATE' />
</body>
</html>
inside my Legitimation.html i have several radio buttons (grouped up):
<form action="#" id="unique_id" class="productFilter">
<fieldset id="step1" class="step1 option0">
<legend>Legitimation</legend>
<p>
<input id="question_1" name="group_1" type="radio" value="1"/>
<label for="question_1">Unidentifiziert</label>
</p>
<p>
<input id="question_2" name="group_1" type="radio" value="2"/>
<label for="question_2">Unlegitimiert</label>
</p>
<p>
<input id="question_3" name="group_1" type="radio" value="3"/>
<label for="question_3">Legitimiert</label>
</p>
</fieldset> [...]
I want to get feedback on which of the radio buttons was clicked, but i just can't seem to find a way on how to do that...
Any help would be appreciated.
Related
Like I said in the title, I am trying to get my results from the form below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script>
/* Struggling with this part */
</script>
</head>
<body>
<h1 style="color:#e6e8e8">Video Game Form</h1>
<form id="form" class="form">
<div class = "form-control">
<label>All Time Favorite Game:</label>
<input name="allgame" id="allgame" type="text" placeholder="Enter your favorite game">
<label>Favorite Free Game:</label>
<select name="freegame" id ="freegame">
<option>Select your favorite game</option>
<option>Fortnite</option>
<option>Apex Legends</option>
<option>Call of Duty: Warzone</option>
<option>Valorant</option>
<option>Rocket League</option>
</select>
</div>
<div class="form-control">
<label>More games you may play
<small>(Check all that apply)</small>
</label>
<label>
<input type="checkbox"
name="inp">Minecraft</input></label>
<label>
<input type="checkbox"
name="inp">GTA 5</input></label>
<label>
<input type="checkbox"
name="inp">Call Of Duty</input></label>
<label>
<input type="checkbox"
name="inp">Fortnite</input></label>
<label>
<input type="checkbox"
name="inp">Valorant</input></label>
<label>
<input type="checkbox"
name="inp">League of Legends</input></label>
<label>
<input type="checkbox"
name="inp">Rocket League</input></label>
<label>
<input type="checkbox"
name="inp">Elden Ring</input></label>
<label>
<input type="checkbox"
name="inp">Zelda</input></label>
<label>
<input type="checkbox"
name="inp">Other...</input></label>
</div>
<button type="submit" value="button" class="neon-button">
Submit
</button>
</form>
</body>
</html>
It is a basic form I am working on learning web dev, however I am stuck here. If someone wouldnt mind helping me take the results and add it to a text file in the same directory as the HTML and CSS it would be greatly appriciated.
In your <script> tag, you'll either need to add an action for the form or manually get the value of each input element when the select button is clicked. However, in order to write the result to a text file, you'll need something on the server-side. Client-side JS does not provide the utilities to write to server-side files, for this would be impossible to implement.
I'm trying to get this Select All code to work but I don't know what I'm doing wrong. I found the code here
http://jsfiddle.net/L6e72fpv/
I'm not sure if it's a compatibility issue or if I'm putting the code together wrong. It works fine on the jsfiddle but not on an full page.
Here is the way I have it in a page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
<title>TEST</title>
<script>
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
</script>
</head>
<body>
<form action="#">
<p>
<label>
<input type="checkbox" id="checkAll" /> Check all</label>
</p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p>
<label>
<input type="checkbox" /> Option 1</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 2</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 3</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 4</label>
</p>
</fieldset>
</form>
</body>
</html>
</body>
</html>
Looks like your'e not including the jQuery Library. Without loading it, jQuery won't work. You also closed your body and html tag twice.
Try this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
<title>TEST</title>
</head>
<body>
<form action="#">
<p>
<label>
<input type="checkbox" id="checkAll" /> Check all</label>
</p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p>
<label>
<input type="checkbox" /> Option 1</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 2</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 3</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 4</label>
</p>
</fieldset>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
</script>
</body>
</html>
What I've done is include jQuery
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
and added your script after loading it. It works fine now!
In Code B, all checked checkbox items will be posted to server side when I click submit button, the server side will handle all checked checkbox items and recreate web page to return client side.
I hope to do the same thing in Code A, and more I hope the client side can display a Delete prompt information before post when I click the button btnDelete.
How can I write code to post all checked checkbox items to server side using javascript or jquery ?
Code A
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery1.10.2.min.js?isassets=1" type="text/javascript"></script>
<script type="text/javascript">
function DeleteFile() {
if (confirm("Do you want to delete selected images?")) {
...
}
}
</script>
</head>
<body>
<div id="container">
<form action='' method='post' enctype='multipart/form-data' id="myform">
<input id="a1" name="subBox1" type="checkbox" value="\SD\1.jpg"/>1.jpg <br/>
<input id="a2" name="subBox2" type="checkbox" value="\SD\2.jpg"/>2.jpg <br/>
<input id="a3" name="subBox3" type="checkbox" value="\SD\3.jpg"/>3.jpg <br/>
<input id="a4" name="subBox4" type="checkbox" value="\SD\4.jpg"/>4.jpg <br/>
</form>
<input type="button" name="btnDelete" value="Delete Selected Images" onclick="DeleteFile()" />
</div>
</body>
</html>
Code B
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="container">
<form action='' method='post' enctype='multipart/form-data' id="myform">
<input id="a1" name="subBox1" type="checkbox" value="\SD\1.jpg"/>1.jpg <br/>
<input id="a2" name="subBox2" type="checkbox" value="\SD\2.jpg"/>2.jpg <br/>
<input id="a3" name="subBox3" type="checkbox" value="\SD\3.jpg"/>3.jpg <br/>
<input id="a4" name="subBox4" type="checkbox" value="\SD\4.jpg"/>4.jpg <br/>
<input type='submit' name='submit' value='Delete Selected Images'/>
</form>
</div>
</body>
</html>
You can add an event listener to the submit event and call the event.preventDefault() method when confirm() returns false.
JavaScript
document.querySelector('#myform').addEventListener('submit', event => {
if (!confirm('Do you want to delete selected images?')) {
event.preventDefault();
}
});
HTML
<div id="container">
<form action='' method='post' enctype='multipart/form-data' id="myform">
<input id="a1" name="subBox1" type="checkbox" value="\SD\1.jpg"/>1.jpg <br/>
<input id="a2" name="subBox2" type="checkbox" value="\SD\2.jpg"/>2.jpg <br/>
<input id="a3" name="subBox3" type="checkbox" value="\SD\3.jpg"/>3.jpg <br/>
<input id="a4" name="subBox4" type="checkbox" value="\SD\4.jpg"/>4.jpg <br/>
<input type="submit" name="btnDelete" value="Delete Selected Images" />
</form>
</div>
JS Fiddle demo.
Is it possible to use ngChecked on a checkbox that you want to have deselect all other checked checkboxes. Below is an example of what I'd like to do except that the functionality selects all I want to deselect all
http://plnkr.co/edit/iseIU1OIjocW4nXTN6ru?p=preview
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example54-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="">
<input id="checkSlave" type="checkbox" ng-checked="master"><br />
<input id="checkSlave" type="checkbox" ng-checked="master"><br />
<input id="checkSlave" type="checkbox" ng-checked="master"><br />
<hr />
<input type="checkbox" ng-model="master"> <b>Check me to select all:</b><br />
</body>
</html>
Just do ! (not) on the ng-checked to achieve the opposite
<input id="checkSlave" type="checkbox" ng-checked="!master"><br />
I want to create a small survey/questionnaire that asks the user whether or not they are older than 18. Once they press the Enter button, I would like to make two options. One: If they are not over 18, it will take them to another web page. And two: if they are over 18 it will bring them to another web page.
It kind of reminds me of the "if" "else" statement in Java, but I know this isn't Java. I'm using HTML (Dreamweaver) and I can't figure it out. Can somebody point me to the right direction?
I've got the bare bone of it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WAIT!</title>
</head>
<body>
<p>WAIT!</p>
<p>Let us know more about you.</p>
<p>Please fill out this form so that we can guide you to YOUR world. </p>
<p> </p>
<p>Are you a:</p>
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<p> Age: </p>
<form>
<input type="radio" name="sex" value="male">
younger than 18<br>
<input type="radio" name="sex" value="female">
18+
</form>
<p></p>
<form name="input" action="#" method="get">
<input type="submit" value="Enter">
</form>
</body>
</html>
To see the output, copy and paste above code and enter it here. Then press submit code.
Here is a sample script that redirect users on checking what is selected in radio using javascript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WAIT!</title>
</head>
<script>
function redirect() {
if(document.getElementById("m").checked == true)
{
window.open("http://www.codeforbrowser.com")
}
else {
window.open("http://www.yahoo.com")
}
}
</script>
<body>
<p>WAIT!</p>
<p>Let us know more about you.</p>
<p>Please fill out this form so that we can guide you to YOUR world. </p>
<p> </p>
<p>Are you a:</p>
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<p> Age: </p>
<form>
<input type="radio" name="sex" value="male" id="m" >
younger than 18<br>
<input type="radio" name="sex" value="female" id="f">
18+
</form>
<p></p>
<form name="input" action="#" method="get">
<input type="submit" value="Enter" onclick="redirect();">
</form>
</body>
</html>
DEMO
Give your form some id;
<form id="sex_form">
<input type="radio" name="sex" value="male">
younger than 18<br>
<input type="radio" name="sex" value="female">
18+
</form>
<input type="submit" onclick="validate()" value="Enter">
<script type="text/javascript">
function validate(){
var form = document.getElementById('sex_form');
if(form.firstElementChild.checked){
alert('to younger');
//window.open('younger');
}
else if(form.firstElementChild.nextElementSibling.nextElementSibling.checked){
//window.open('older');
alert('to 18+');
}
else
alert('none selected');
}
</script>