I'm trying to build a search box were students can search for course reserves based on their course code or faculty members names. What is missing is the part where you can change the form action url based on the checkbox you mark. I took the javascript code from the previous search box where it was used on a dropdown selection. I knew it wouldn't work on input but that's where my javascript understanding ends. Btw, I have a javascript running which allows only one checkbox to be selected. My code goes like:
<form name="frm" method="get" action="http://path1" />
<input name="SEARCH" value="" type="text" autocomplete="off" />
<input type="submit" value="" />
<ul>
<li>
<input type="checkbox" value="http://path1" checked="checked"/>
<label for="course">Course Code</label>
</li>
<li>
<input type="checkbox" value="http://path2"/>
<label for="faculty">Faculty Member</label>
</li>
</ul>
</form>
<script language="javascript">
var objForm = document.search;
if (objForm.type.checked)
{
objForm.removeChild(objForm.searchType);
objForm.submit();
}
</script>
Thanks in advance
Since you have only two option I have made it radio but still if you want checkbox then change it:
<form name="frm" id="myForm" method="get" action="http://path1" >
<input name="SEARCH" value="" type="text" autocomplete="off" />
<input type="submit" value="" />
<ul>
<li>
<input type="radio" name="frmact" value="http://path1" checked="checked" onclick="formaction(this)"/>
<label for="course">Course Code</label>
</li>
<li>
<input type="radio" name="frmact" value="http://path2" onclick="formaction(this)"/>
<label for="faculty">Faculty Member</label>
</li>
</ul>
</form>
</body>
<script>
function formaction(checkbox){
document.getElementById("myForm").action = checkbox.value;;
}
</script>
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 need to build a quiz with a mix of different type of questions.
Some will be a checkbox and some will be fill in the blanks like the example below:
<html>
<body>
<div class="checbox-q">
<span>What is an animal?<?span>
<input type="checkbox" id="q1-a1" value="1">
<label>Dog</label>
<input type="checkbox" id="q1-a2" value="2">
<label>Tiger</label>
<input type="checkbox" id="q1-a3" value="3">
<label>Flower</label>
<input type="checkbox" id="q1-a4" value="4">
<label>Cat</label>
</div>
<div class="fillBlanks-q">
<span>Apples can be in the colour <input type="text" id="q2-a1"> and <input type="text" id="q2-a2">.</span>
</div>
<div class="list-q">
<span>List 3 types of Grapes<?span>
<ol>
<li><input type="text" id="q3-a1"></li>
<li><input type="text" id="q3-a1"></li>
<li><input type="text" id="q3-a1"></li>
</ol>
</div>
</body>
</html>
Using Jquery, how do I now display the score in percentage?
I'm a bit new to JavaScript(Jquery) and I know that to use only checkbox I can use arrays but how would that work when also input texts?
Really appreciate some help.
Thank you
I'm making a web app and I'm struggling with replacing the page.
In the function myPage(), when I put the location.replace("file.html"); in the start, it works if I don't insert inputs on the web app, but when I put the location.replace("file.html"); in the if statement then doesn't work at all, and is there where I need to put the location.replace.
Please help me.
js code:
var submit = document.getElementById("submit");
submit.addEventListener("click",myPage);
function myPage(){
//location.replace("file.html"); // here this is working
var name=document.formId.nameRadio.value;//name="abc"
if (name=="abc"){
location.replace("file.html");//but here not
}
}
html code:
<form id="formId" name="formId" >
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio" >
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="submit" value="next" >
</form>
change your button type to button. your browser submits first.
var submit = document.getElementById("submit");
submit.addEventListener("click",myPage);
function myPage(){
//location.replace("file.html"); // here this is working
var name=document.formId.nameRadio.value;//name="abc"
alert(name);
if (name=="abc"){
location.replace("file.html");//but here not
}
}
<form id="formId" name="formId" >
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio" >
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="button" value="next" >
</form>
You can stop the usual form submission by adding preventDefault() to your onClick function.
var submit = document.getElementById("submit");
submit.addEventListener("click", myPage);
function myPage(e) {
//prevent form submission
e.preventDefault();
var name = document.getElementById('formId').nameRadio.value;
if (name == "abc") {
location.replace("file.html");
}
}
<form id="formId" name="formId">
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio">
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="submit" value="next">
</form>
It seems that you want more control over the form submit.
You can change the input type from submit to button; Also rename that button to avoid confusion with submit method of the form.
You can also simplify the code, by using the click event directly on the input.
Here is something you can try:
<html>
<body>
<form id="formId" name="formId">
<label>sth</label><br><br>
<label for="name">name</label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio">
<li><input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li><input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="btnSubmit" type="button" value="next" onclick="mySubmit()">
</form>
<script>
function mySubmit()
{
var name = document.formId.nameRadio.value;
if (name == "abc"){
location.replace("file.html");
} else {
// Submit a form
document.formId.submit();
}
}
</script>
</body>
</html>
Hi I am developing angularjs application. I have generated checkboxes dynamically using ng-repeat. My design is as below.
<ul>
<li ng-repeat="screen in screenMap">
<input type="text" ng-model="screen.scrn_name" />
<input type="hidden" value="{{screen.scrn_id}}" />
<input type="checkbox" name="vehicle" value="Read">
<input type="checkbox" name="vehicle" value="Write">
<br>
</li>
</ul>
<input type="button" value="APPLY" ng-click="apply()" />
Below is my js code.
$scope.apply = function () {
}
I want to get array like scrn_name,true,false format. If the checkbox is checked then true else false.
May i know how can i get this? Any help would be appreciated. Thank you.
go through angular checkbox
use ng-true-value and ng-true-value
<ul>
<li ng-repeat="screen in screenMap">
<input type="text" ng-model="screen.scrn_name" />
<input type="hidden" value="{{screen.scrn_id}}"/>
<input type="checkbox" name="vehicle" ng-model="screen.write" ng-true-value="true" ng-false-value="false">
<input type="checkbox" name="vehicle" ng-model="screen.read" ng-true-value="true" ng-false-value="false"><br>
</li>
</ul>
<input type="button" value="APPLY" ng-click="apply()"/>
$scope.apply = function () {
console.log($scope.screenMap);//[{..,read:true,write:false},...]
}
I have a series of questions which have radio answer choices. I can't figure out how to use AngularJS validation to require the user to select one before clicking "Next". Below is my code:
EDIT: Please note that clicking "Next" gets the next question node from the controller depending on what choice was made. It's basically a dynamic questionnaire.
<form novalidate>
<div class="radio" ng-repeat="answer in node.Answers">
<input type="radio" name="answerGroup" ng-model="$parent.selectedAnswer"
value="{{answer.BranchId}},{{node.LeafId}},{{answer.Id}}"/> {{answer.Text}}
</div>
<div>
<input type="button" ng-click="previous()" value="Previous"/>
<input type="button" ng-click="next(selectedAnswer)" value="Next"/>
</div>
</form>
EDIT: Here is a working fiddle
First give the form a name so that you can refer to it:
<form name="myForm" novalidate>
Next add the required attribute to the radio button:
<input type="radio" name="answerGroup" required
ng-model="$parent.selectedAnswer"
value="{{answer.BranchId}},{{node.LeafId}},{{answer.Id}}"/>
Then use ng-disabled to bind your next button's disabled property to the validity of the radio button:
<input type="button" ng-click="next(selectedAnswer)" value="Next"
ng-disabled="myform.answerGroup.$invalid" />
Look below, using ng-show to display an error message should neither radio button be clicked.
<label for="dateofbirth">
<span>Are you the primary cardholder?</span>
</label>
<ul>
<li>
<label for="yes">
<input type="radio" id="yes" name="cardholder" ng-model="user.cardholder" value="yes" required/>
Yes
</label>
</li>
<li>
<label for="no">
<input type="radio" id="no" name="cardholder" ng-model="user.cardholder" value="no" required/>
No
</label>
</li>
</ul>
</fieldset>
<span class="error" ng-show="myForm.cardholder.$error.required && submitted == true"><i class="fa fa-exclamation-circle"></i>Please select an answer.</span>