I tried to combine these 3 functions into one, but after I did that, it won`t work.
can you help me combine those?
function showForm(id, name) {
document.getElementById('submitForm').style.display = "block";
if (id == 0) {
document.getElementById('submitForm').style.display = "none";
} else {
document.getElementById(i).style.display = 'block';
}
}
function TestForm(id, name) {
document.getElementById('TestFormSubmit').style.display = "block";
if (id == 0) {
document.getElementById('TestFormSubmit').style.display = "none";
} else {
document.getElementById(i).style.display = 'block';
}
}
function FormOne(id, name) {
document.getElementById('FormOneSubmit').style.display = "block";
if (id == 0) {
document.getElementById('FormOneSubmit').style.display = "none";
} else {
document.getElementById(i).style.display = 'block';
}
}
If it needed, this is HTML, I use JSFiddle, after run it, choose form on right side, then it will shows "download form" but I don`t know how to do that.
<form name="forms" class="form1" id="first">
<br />
<p style="text-align: left;" class="form1">Choosing to Make A Difference</p>
<select id="dropdownMenu" name="budget" onchange="javascript: showForm(document.getElementById('dropdownMenu').value);">
<option value="0"></option>
<option value="#">Change Form</option>
<option value="#">Scholarships and Grants</option>
</select>
<br />
<br />
<div id="submitForm" style="display: none; position:absolute; margin-top:-20px;">
<input type="button" id="submit" value="Download Form" onclick="window.open(forms.budget.value,'newtab'+forms.budget.value)" />
</div>
<br />
</form>
<form name="forms" class="form1" id="second">
<br />
<p style="text-align: left;" class="form1">Choosing to Make A Difference</p>
<select id="TestFormDropdown" name="budget" onchange="javascript: TestForm(document.getElementById('TestFormDropdown').value);">
<option value="0"></option>
<option value="#">Change Form</option>
<option value="#">Scholarships and Grants</option>
</select>
<br />
<br />
<div id="TestFormSubmit" style="display: none; position:absolute; margin-top:-20px;">
<input type="button" id="submit" value="Download Form" onclick="window.open(forms.budget.value,'newtab'+forms.budget.value)" />
</div>
<br />
</form>
<form name="forms" class="form1" id="second">
<br />
<p style="text-align: left;" class="form1">Choosing to Make A Difference</p>
<select id="FormOneDropdown" name="budget" onchange="javascript: FormOne(document.getElementById('FormOneDropdown').value);">
<option value="0"></option>
<option value="#">Change Form</option>
<option value="#">Scholarships and Grants</option>
</select>
<br />
<br />
<div id="FormOneSubmit" style="display: none; position:absolute; margin-top:-20px;">
<input type="button" id="submit" value="Download Form" onclick="window.open(forms.budget.value,'newtab'+forms.budget.value)" />
</div>
<br />
</form>
Try This :
function showForm (id, name) {
document.getElementById('submitForm').style.display = "block";
if (id == 0)
document.getElementById('submitForm').style.display = "none";
else
document.getElementById(i).style.display = 'block';
}
JavaScript statements can be grouped together in code blocks, inside curly brackets {...}.
Could you try this one?
var functionCollections = {
showForm : function(id, name) {
document.getElementById('submitForm').style.display = "block";
if (id == 0) {
document.getElementById('submitForm').style.display = "none";
} else {
document.getElementById(i).style.display = 'block';
}
},
TestForm : function(id, name) {
document.getElementById('TestFormSubmit').style.display = "block";
if (id == 0) {
document.getElementById('TestFormSubmit').style.display = "none";
} else {
document.getElementById(i).style.display = 'block';
}
},
FormOne : function(id, name) {
document.getElementById('FormOneSubmit').style.display = "block";
if (id == 0) {
document.getElementById('FormOneSubmit').style.display = "none";
} else {
document.getElementById(i).style.display = 'block';
}
}
};
and on the html instead using showForm(id, name); use functionCollections.showForm(id, name);
Related
I am working on a simple form for work. I found some code online and have been working with it. It starts out asking a simple question. If the student has an ID? It is a toggle of either "YES" or "NO". If "Yes" is selected then it will pull student info from a database and display. If "NO" then separate boxes will pop up asking for the students ID, last name, first name, DOB, etc. Right now I am focusing on the path selection to work. I haven't had any luck.
function admSelectCheck(nameSelect) {
if (nameSelect) {
admOptionValue = document.getElementById("admOption").value;
if (admOptionValue == nameSelect.value) {
document.getElementById("admDivCheck").style.display = "block";
} else {
document.getElementById("admDivCheck").style.display = "none";
}
} else {
document.getElementById("admDivCheck").style.display = "none";
}
}
Student ID
<select id="getFname" onchange="admSelectCheck(this);">
<option value="6"></option>
<option value="1">Yes</option>
<option id="admOption" value="0">No</option>
</select>
<div id="admDivCheck" style="display:none;">
<br><br>
<form action="/action_page.php" method="post">
Please enter ID# <input type="number" name="ID"><br> Last Name <input type="text" name="last"><br> First Name <input type="text" name="first"><br>
<button type="submit">Submit</button>
</div>
How about this? .
function admSelectCheck(nameSelect) {
var value = nameSelect.value;
if (value == "1") {
document.getElementById("id-form").style.display = "block";
document.getElementById("second-div").style.display = "none";
} else if (value == "0"){
document.getElementById("id-form").style.display = "none";
document.getElementById("second-div").style.display = "block";
}
else{
document.getElementById("id-form").style.display = "none";
document.getElementById("second-div").style.display = "none";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src = "test.js"></script>
</head>
<body>
Student ID
<select id="getFname" onchange="admSelectCheck(this);">
<option value="6"></option>
<option value="1">Yes</option>
<option id="admOption" value="0">No</option>
</select>
<form id = "id-form" action="/action_page.php" method="post" style = "display: none">
Please enter ID# <input type="number" name="ID"><br>
Last Name <input type="text" name="last"><br>
First Name <input type="text" name="first">
<br>
<button type="submit">Submit</button>
</form>
<div id = "second-div" style = "display: none">
<br>
<img src = "https://i.ytimg.com/vi/QuTLRz8Nli0/hqdefault.jpg"/>
</div>
</body>
</html>
I have this simple code, and i can't understand why it is not working.
<div>
<input type="button" class="button" value="Add A Site" onclick="Div();" />
</div>
<script type="text/javascript">
function Div() {
var E = document.getElementsByClassName('Form');
if (E.style.display == 'none') {
E.style.display = 'block';
this.value = "Close";
} else {
S.style.display = 'none';
this.value = "Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>
user Form which you are trying to access is inside div.form so you have to access that like below....I tested this, its working. the content in Form is displaying
<input type="button" class="button" value="Add A Site" onclick="Div();" />
<script type="text/javascript">
function Div() {
var E= document.getElementsByClassName('Form')[0];
if (E.style.display=='none'){
E.style.display='block';
this.value="Close";
}else {
S.style.display='none';
this.value="Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1></div>
<script>
function Div() {
var E = document.getElementsByClassName('Form')[0];
if (E.style.display==='none') {
E.style.display='block';
this.value=Close;
} else {
E.style.display = 'none';
this.value = 'Add A Site';
}
}
</script>
<input type="button" class="button" value="Add A Site" onclick="Div()" />
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>
This should work for you.
Can you please take a look at This Demo and let me know why this bug is happening during the validation of two type of input selections?
Technically, what is happening is if user not select either of checkboxes and Select options and push the submit button the error message shows up and the validRequest boolean stays in false. Now if user ONLY select the checkboxes the situation is same the validRequest boolean is false and error message shows up BUT if user forgets to select the checkboxes and only selects from the list the validateQuery() validates the validRequest as True and then now error message and alert message pops up!
Can you please let me know why this is happening?
$(function () {
var validRequest = false;
function validateQuery() {
var selectedDoll = $('input:checkbox[name=doll]');
if ($(selectedDoll).is(':checked')) {
validRequest = true;
$('#err').html('');
} else {
validRequest = false;
$('#err').html('Some Thing Wrong!');
}
var selectedIcecream = $("#icecream").val();
if (selectedIcecream == 0) {
validRequest = false;
$('#err').html('Some Thing Wrong!');
} else {
validRequest = true;
$('#err').html('');
}
}
$("#isValid").on("click", function () {
validateQuery();
if(validRequest){ alert('Ready To Go');}
console.log(validRequest);
});
});
#err{color:red;}
<div>
<input type="checkbox" name="doll" value="cat" />Cats
<br />
<input type="checkbox" name="doll" value="dog" />Dogs
<br />
<input type="checkbox" name="doll" value="bird" />Birds
<br />
<br />
<select id="icecream">
<option value="0">Select From List</option>
<option value="chocolate">Chocolate</option>
<option value="vanilla">Vanilla</option>
<option value="strawberry">Strawberry</option>
<option value="caramel">Caramel</option>
</select>
</div>
<p>
<input type="submit" id="isValid" value="Submit now" />
</p>
<p>
<div id="err"></div>
</p>
Fixed: http://jsfiddle.net/byk309j8/7/
The problem was that you had 2 independent if statements while you must have only one. Also you were checking if the select box is empty == 0 instead of not empty !== 0
$(function () {
var validRequest = false;
function validateQuery() {
var selectedDoll = $('input:checkbox[name=doll]');
var selectedIcecream = $("#icecream").val();
// checkbox is not checked, but select is
if ($(selectedDoll).is(':checked') && selectedIcecream == 0) {
validRequest = false;
$('#err').html('select not selected');
} else if ($(selectedDoll).is(':checked') == false && selectedIcecream != 0) {
validRequest = false;
$('#err').html('checkbox not checked');
} else if ($(selectedDoll).is(':checked') == false || selectedIcecream == 0) {
validRequest = false;
$('#err').html('checkbox not checked or select not selected');
} else {
validRequest = true;
$('#err').html('');
}
}
$("#isValid").on("click", function () {
validateQuery();
if(validRequest){ alert('Ready To Go');}
console.log(validRequest);
});
});
<div>
<input type="checkbox" name="doll" value="cat" />Cats
<br />
<input type="checkbox" name="doll" value="dog" />Dogs
<br />
<input type="checkbox" name="doll" value="bird" />Birds
<br />
<br />
<select id="icecream">
<option value="0">Select From List</option>
<option value="chocolate">Chocolate</option>
<option value="vanilla">Vanilla</option>
<option value="strawberry">Strawberry</option>
<option value="caramel">Caramel</option>
</select>
</div>
<p>
<input type="submit" id="isValid" value="Submit now" />
</p>
<p>
<div id="err"></div>
</p>
#err{color:red;}
I have a form where i have JS form validation. But validation process is not working. The inserting process in working fine.
Below is the form for inserting the data into mysql Database-
<?php
session_start();
include("includes/connection.php");
include("header.php");
include("includes/adminmenu.php");
if(isset($_SESSION['username']))
{
//echo $_SESSION['username'];
?>
<!--Javasript Validation File Import -->
<script type="text/javascript" src="js/qcheck.js"></script>
<script type="text/javascript" language="JavaScript">
function HidePart(d) { document.getElementById(d).style.display = "none"; }
function ShowPart(d) { document.getElementById(d).style.display = "block"; }
function CheckboxChecked(b,d)
{
if(b) { ShowPart(d); }
else { HidePart(d); }
}
</script>
<br />
<div class="userstat">
<div style="background-color:#666666; text-align:center; font-weight:bold; color:#FFFFFF; font-size:24px;"><span>Insert A new Question</span></div>
<br />
<div class="statdata">
<form action="includes/insertq.php" method="POST" name="qform" onSubmit="return valide()">
<div style="text-align:center;">
<select name="subject" size="0">
<option selected="0" value="">Select Subject</option>
<option value="bangla">Bangla</option>
<option value="english">English</option>
<option value="physics">Physics</option>
<option value="chemistry">Chemistry</option>
<option value="math">Mathematics</option>
<option value="biology">Biology</option>
<option value="gk">General knowledge</option>
</select>
</div>
<br /><br />
<label for="question">Write Down the Question below</label>
<textarea name="question" rows="3" cols="40"></textarea><br /><br />
<label for="ans">Options</label><br /><br />
<label for="option1">a.</label>
<input type="text" name="option1" size="40" /><br />
<label for="option2">b.</label>
<input type="text" name="option2" size="40" /><br />
<label for="option3">c.</label>
<input type="text" name="option3" size="40" /><br />
<label for="option4">d.</label>
<input type="text" name="option4" size="40" /><br /><br />
<label for="correct">Correct.</label><br />
<input type="text" name="correct" size="40" /><br /><br /><br />
<div style="text-align:center;">
<input type="submit" name="submit" value="Submit Question" />
</div>
<br />
<br />
</form>
</div>
</div>
</body>
<?php
}
else
{
header("location: admin.php");
}
?>
<?php
include("includes/footer.php");
?>
and the Javascript file is
function valide()
{
var subject=document.forms["qform"]["subject"].value;
var question=document.forms["qform"]["question"].value;
var option1=document.forms["qform"]["option1"].value;
var option2=document.forms["qform"]["option2"].value;
var option3=document.forms["qform"]["option3"].value;
var option4=document.forms["qform"]["option4"].value;
var correct=document.forms["qform"]["correct"].value;
if(subject == null || Subject == "Select Subject")
{
alert("Select subject Type");
return false;
}
else if(question==null || question=="" || question.length<5)
{
alert("Insert Valid question");
return false;
}
else if(option1==null || option1=="")
{
alert("Insert Option 1.");
return false;
}
else if(option2==null || option2=="")
{
alert("Insert Option 2.");
return false;
}
else if(option3==null || option3=="")
{
alert("Insert option 3.");
return false;
}
else if(option4==null || option4=="")
{
alert("Insert option 4.");
return false;
}
else if(correct==null || correct=="")
{
alert("Insert correct option.");
return false;
}
}
case matters
if(subject == null || Subject == "Select Subject")
^
Subject !== subject
Also value is not going to be null. You should be checking for a length of zero.
I'm working on a register script, but i'm stuck. I have an oppertunity to the user pay or free memberships. And when they choose "pay" the pay column becomes visible but if i after that choose "free" i see both the free and the pay column. But i only want one column be seen not both at the same time
Javascript
<script type="text/javascript">
function betal(value) {
if (value == 'show') { document.getElementById('betalversion').style.display = 'block'; }
else { document.getElementById('betalversion').style.display = 'none'; }
}
</script>
<script type="text/javascript">
function gratis(value) {
if (value == 'show') { document.getElementById('gratisversion').style.display = 'block'; }
else { document.getElementById('gratisversion').style.display = 'none'; }
}
</script>
HTML
<div class="FormGroup">
<h2 class="description">Vad skulle du vilja ha?</h2>
<label class="choice">
<input id="gratisVersion" name="field_Payment" type="radio" value="Gratis" class="required" onclick="gratis('show');">
Gratis Version</label>
<br />
<label class="choice">
<input id="betalVersion" name="field_Payment" type="radio" value="Betal" class="required" onclick="betal('show');">
Betal Version</label>
<br />
</div>
<div class="FormGroup" style="display: none" id="betalversion">
<br />
<h2 class="description">Fyll i dina uppgifter</h2>
<br>
<div class="explanation">Här är nåt</div>
<input type="text" name="paypal_address" id="Text1" size="40">
</div>
<div class="FormGroup" style="display: none" id="gratisversion">
<br />
<h2 class="description">Fyll i dina uppgifter</h2>
<br>
<label for="name">Användarnamn</label><input type="text" name="name" id="name"/>
<br />
<label for="pass">Lösenord</label><input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)" />
<br />
<p>
<script type="text/javascript">
function betal(value) {
if (value == 'show') {
document.getElementById('betalversion').style.display = 'block';
document.getElementById('gratisversion').style.display = 'none';
}
else {
document.getElementById('betalversion').style.display = 'none';
document.getElementById('gratisversion').style.display = 'block';
}
}
</script>
<script type="text/javascript">
function gratis(value) {
if (value == 'show') {
document.getElementById('betalversion').style.display = 'none';
document.getElementById('gratisversion').style.display = 'block';
}
else {
document.getElementById('gratisversion').style.display = 'none';
document.getElementById('betalversion').style.display = 'block';
}
}
</script>
<script type="text/javascript">
var beta=document.getElementById('betalversion');
var grati=document.getElementById('gratisversion');
function betal(value) {
beta.style.display = 'none';
grati.style.display = 'none';
if (value == 'show') {
beta.style.display = 'block'; }
else { beta.style.display = 'none'; }
}
</script>
<script type="text/javascript">
function gratis(value) {
beta.style.display = 'none';
grati.style.display = 'none';
if (value == 'show') { grati.style.display = 'block'; }
else { grati.style.display = 'none'; }
}
</script>
hide both the divs on toggle