I have this checkbox:
<div class="form-group">
<input type="checkbox" id="examination" class="form-control" name="exam" placeholder="Enter Title">
<label>Enable Exam</label>
</div>
And this is my disabled input:
<div class="form-group">
<label>Order</label>
<input id="myorder" name="myorder" disabled>
</div>
I try with this script to make the input enabled after checkbox checked, but it doesn't work:
$('#examination').change(function(){
$("#myorder").prop("disabled", !$(this).is(':checked'));
});
Any ideas?
Here, i think this will work:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#chtest').change(function(e){
var isChecked = $(e.target).is(':checked');
if (isChecked) {
$("#test").removeAttr("disabled");
} else {
$("#test").attr("disabled","disabled");
}
});
});
</script>
</head>
<body>
<form action="">
<input type="text" id="test" disabled="disabled"><br>
<input type="checkbox" id="chtest">
</form>
</body>
</html>
Related
How would one display an incorrect or correct words beside a form in any colour beside the field box when typing? I'm trying to make it so it gives me a real time correct and incorrect when I type in values that match the JS rule.
It should give a real time correct or incorrect beside the box and if it matches the rule then it displays correct
My HTML:
<!doctype html>
<html lang="en">
<head>
<title> Form Example </title>
<meta charset="utf-8">
<link href="keyupform.css" rel="stylesheet">
<script src="prototype.js"></script>
<script src="formkeyup.js"></script>
</head>
<body>
<div class="box" >
<form id="myForm" action="http://www.eecs.yorku.ca/~mbrown/EECS1012/testForm.php" method="get">
<!-- user id -->
<h2> Enter Info </h2>
<p> <span class="fieldName">UserID: </span>
<input type="text" id="userid" name="userid" class="input">
<span class="message"></span></p>
<!-- -->
<p style="text-align:center" class="types"> Enter Code: EECS, ESSE, MUTH, HIST, CHAP, BIO </p>
<p> <span class="fieldName"> Codes </span>
<input type="text" id="code" name="code" class="input">
<span class="message"></span></p>
<!-- Number -->
<p> <span class="fieldName"> Course Num (XXXX): </span>
<input style="width: 4em;" id="number" type="text" name="number" class="input">
<span class="message"></span></p>
<hr>
<p style="text-align:center;"> <button id="submitButton" type="button" onclick="submitbtn"> Submit </button> <input id="clear" type="reset" value="Clear"> </p>
<p style="text-align:center;" id="formError"> <p>
</form>
</div>
</body>
</html>
JS:
window.onload = function() {
$("userid").observe("keyup", enforceID);
$("code").observe("keyup", enforcecode);
$("number").observe("keyup", enforcenumbers);
$("submitButton").observe("click", submitbtn);
}
function enforceID() {
// fucntion must start with a letter and can be any number or letter after
var re = /^[A-Z][A-Z][0-9]+/i;
}
function enforcecode() {
// Only can use these Codes
var codes = ["EECS", "ESSE", "MUTH", "HIST", "CHAP", "BIO"];
var codeType = $("codeType").value;
codeType = codeType.toUpperCase();
}
function enforcenumbers() {
//Only 4 numbers allowed
var re = /^[0 -9][0 -9][0 -9][0 -9]$/
}
You can trigger the form validation on keydown event.
const form = document.getElementById('form');
document.getElementById('userid').addEventListener('keydown', event => {
form.reportValidity();
}, false);
document.getElementById('code').addEventListener('keydown', event => {
form.reportValidity();
}, false);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<form id="form">
<label for="userid">User ID:</label>
<input type="text" id="userid" name="userid" pattern="[A-Z]{2}\d+">
<br />
<label for="code">Code:</label>
<input type="text" id="code" pattern="EECS|ESSE|MUTH|HIST|CHAP|BIO" />
</form>
</body>
</html>
Site searched on different sites but i don't find a solution for my form/html file. I'm really new in this and I really don't know why my code wont work, could some please review my code and can tell me what is wrong ? (this is for me the easiest way to learn it)
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.1.js"></script>
</head>
<body>
<form id="formoid" action="site" title="" method="post">
<div>
<label class="title">First Name</label>
<input type="text" id="name" name="name" value="" >
</div>
<div>
<label class="title">Name</label>
<input type="text" id="name2" name="name2" value="">
<input name="authenticity_token" type="hidden" value="token_value">
</div>
<div>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</form>
<script type='text/javascript'>
/* attach a submit handler to the form */
$("#formoid").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* Send the data using post */
$.post( 'site/login', {
authenticity_token: $('#authenticity_token').val(),
username: $('#name').val(),
password: $('#name2').val()
},
function(responsePage,statusText,result)
{
console.log(responsePage);
}
);
});
</script>
</body>
</html>
Thanks for helping :)!
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
.selected{
background-color : green;
}
</style>
<script>
$(document).ready(function () {
$("#formoid").submit(function (event) {
/* stop form from submitting normally */
event.preventDefault();
/* Send the data using post */
$.post('login_1.asp', {
authenticity_token: $('#authenticity_token').val(), username: $('#name').val(), password: $('#name2').val()
},
function (responsePage, statusText, result) {
alert("response from server---" + responsePage);
}
);
});
});
</script>
</head>
<body>
<form id="formoid" action="site" title="" method="post">
<div>
<label class="title">First Name</label>
<input type="text" id="name" name="name" value="" >
</div>
<div>
<label class="title">Name</label>
<input type="text" id="name2" name="name2" value="">
<input name="authenticity_token" type="hidden" value="token_value">
</div>
<div>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</form>
</body>
</html>
login_1.asp
<%
Response.Write request.Form("username") + "---------------" + request.Form("password")
%>
I just started working with JS again (it's been awhile) so I'm a bit rusty! I'm trying to make an input come into focus when a button is pressed. Can anyone explain why this works in the snippet but not in my document?
document.getElementById('Search_Button').addEventListener('click', function ()
{
document.getElementById('Search_Input').focus();
});
<input type="checkbox" id="Search_Button" />
<label for="Search_Button"><div id="Search_Bar_Dismiss_Box"></div></label>
<div id="Search_Box">
<input type="search" name="Search" id="Search_Input" placeholder="Search" />
<label for="Search_Button"><img src="SVG/Back_Arrow.svg" id="Cancel_Search"></label>
</div>
Here is my entire document:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.getElementById('Search_Button').addEventListener('click', function()
{
document.getElementById('Search_Input').focus();
});
</script>
</head>
<body>
<input type="checkbox" id="Search_Button" /> <!-- Opens Search Bar -->
<label for="Search_Button"><div id="Search_Bar_Dismiss_Box"></div></label>
<div id="Search_Box">
<input type="search" name="Search" id="Search_Input" placeholder="Search" />
<label for="Search_Button"><img src="SVG/Back_Arrow.svg" id="Cancel_Search"></label>
</div>
</body>
</html>
Working Code: Add script in footer section
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="checkbox" id="Search_Button" /> <!-- Opens Search Bar -->
<!-- SEARCH BAR -->
<label for="Search_Button">
<div id="Search_Bar_Dismiss_Box">
</div> <!-- Search Bar Dismiss Box -->
</label> <!-- Dismisses the search bar -->
<div id="Search_Box">
<input type="search" name="Search" id="Search_Input" placeholder="Search" />
<label for="Search_Button">
<img src="SVG/Back_Arrow.svg" id="Cancel_Search">
</label>
</div> <!-- Search Box -->
<script type="text/javascript">
document.getElementById('Search_Button').addEventListener('click', function (){
document.getElementById('Search_Input').focus();
});
</script>
</body>
</html>
Put your code on window.onload function
window.onload = function()
{
document.getElementById('Search_Button').addEventListener('click', function ()
{
document.getElementById('Search_Input').focus();
});
};
hope it helps
This is my code
<!DOCTYPE html>
<html>
<head>
<title>Certificate Generator</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
#main .my-form form .text-box .add-box strong {
font-size: 36px;
}
-->
</style>
</head>
<body>
<div id="main">
<h1 align="center">Certificate Generator</h1>
<div class="type">
<form name="class" action="generate.php" method="post">
<input type="checkbox" name="class" value="i">IL<br>
<input type="checkbox" name="class" value="u">UT</br>
</div>
<div class="my-form">
<form action ="generate.php"role="form" method="post">
<label for="text">Date <span class="box-number"</span></label>
<input type="text" name="date" /></p>
<p class="text-box">
<label for="box1">Student <span class="box-number">1</span></label>
<input type="text" name="students[]" value="" id="box1" />
<a class="add-box" href="#"><strong>Add More Students</strong></a>
</p>
<p>
<input type="submit" value="Generate Certificates" />
</p>
</form>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.my-form .add-box').click(function(){
var n = $('.text-box').length + 1;
if( 250 < n ) {
alert('Maximum Amount of Students');
return false;
}
var box_html = $('<p class="text-box"><label for="box' + n + '">Student <span class="box-number">' + n + '</span></label> <input type="text" name="students[]" value="" id="box' + n + '" /> Remove</p>');
box_html.hide();
$('.my-form p.text-box:last').after(box_html);
box_html.fadeIn('slow');
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>
When I hit submit, the php only gets the first value of the array
$students = ($_POST["students"]);
this is my php for that form, I don't know why it is only returning the first value of the array, this is my first time using forms with JavaScript so it might just be a simple error, I'm not sure
This is your problem:
<form name="class" action="generate.php" method="post">
<input type="checkbox" name="class" value="i">IL<br>
<input type="checkbox" name="class" value="u">UT</br>
</div>
<div class="my-form">
<form action ="generate.php"role="form" method="post">
You are closing your form prematurely because of the closing </div> and then opening a new form.
Your html is invalid and the browser tries to make sense of it, causing your students[] elements to be outside of your form so they never get posted.
The results may vary per browser (tested in Firefox), but validating your html should solve your problem.
Ok, I found the error. I have this working. You are not adding the new elements inside of your form. I rearranged the HTML as the following.
<form name="class" action="generate.php" method="post">
<div id="main">
<h1 align="center">Certificate Generator</h1>
<div class="type">
<input type="checkbox" name="class" value="i">IL<br>
<input type="checkbox" name="class" value="u">UT</br>
</div>
<div class="my-form">
<form action ="generate.php"role="form" method="post">
<label for="text">Date <span class="box-number"</span></label>
<input type="text" name="date" />
</p>
<p class="text-box">
<label for="box1">Student <span class="box-number">1</span></label>
<input type="text" name="students[]" value="" id="box1" />
<a class="add-box" href="#"><strong>Add More Students</strong></a> </p>
<p>
<input type="submit" value="Generate Certificates" />
</p>
</div>
</div>
</form>
Just to clarify, I moved the opening tag of the form outside of your "main" div, and then I closed the form after the "main" div's closing tag. No other changes.
I have problem when using my ajax form inside the lightbox div .
the form worked outside the lightbox .
after submit the form , I cannot recieve the variable from the form , I see it empty .
I am using lightbox from here:
http://www.aerowebstudio.net/codecanyon/jquery.lightbox/
the html example "
<html>
<head>
<script type="text/javascript">
function send_ajax_data() {
var reg_user = document.getElementById('reg_user').value;
reg_user2 = document.getElementById('reg_user2').value;
reg_pass = document.getElementById('reg_pass').value;
reg_pass2 = document.getElementById('reg_pass2').value;
reg_email = document.getElementById('reg_email').value;
alert(reg_user);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('div.lightbox').lightbox();
});
</script>
</head>
<body>
<div id="signup" style="width:756px; margin-right:auto;margin-left:auto;">
<div class="light-box">
<div class="center">
<div class="welcome">
<h1>Hello</h1>
</div>
<div id="reg_stats"></div>
<div class="login-form">
<div class="form-container">
<label class="label">xxx</label>
<input id="reg_user" type="text" />
<label class="label">xxx</label>
<input id="reg_user2" type="text" />
<label class="label">xxx</label>
<input id="reg_email" type="text" />
<label class="label">xxx</label>
<input id="reg_pass" type="text" />
<label class="label">xxx</label>
<input id="reg_pass2" type="text" />
<input type="submit" onclick="send_ajax_data();" class="login-btn" value="Done" />
</div>
</div>
</div>
</div>
</div>
new user
</body>
</html>
Try adding in a form tag?
Without a form wrapping the inputs, there is nothing to submit.