I am trying to create a custom page in powerschool (test server). I have written some piece of code. Actually the problem is that the script is never getting triggered. i was thinking that script will get fired since the password textbox has the keyup event on it. Not sure that i am doing it right. I am new to web pages. Can anyone help?
<!DOCTYPE html>
<html>
<!-- start right frame -->
<head>
<title>Student Information</title>
</head>
<body>
<form id="StudentInformationForm" action="/admin/changesrecorded.white.html" method="POST">
<!-- start of content and bounding box -->
<div class="box-round">
<table border="0" cellspacing="0" cellpadding="3" class="linkDescList">
<colgroup><col><col></colgroup>
<td colspan="2"> </td>
</tr>
<tr class="headerRow">
<td colspan="2" class="bold">-Student Information</td>
</tr>
<tr class="Information">
<td>
<div>
<label>Student Email Address</label>
<input type="text" name="studentEmailAddress" />
</div>
<div>
<label>Student Password</label>
<input type="text" name="studentWebPassword" />
</div>
<div>
<label>Grade</label>
<label name="studentGrade">3<label/>
</div>
<div>
<button name="submit" type="button" disabled>Submit</button>
</div>
</td>
</tr>
</table>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$j(function(){
$j("body").on("keyup","input[name='studentWebPassword']",function(){
var current_password = $j("input[name='studentWebPassword']").val();
var studentGrade = $j("input[name='studentGrade']").val();
var password_valid = true;
var hasNumber = /\d/;
var hasSpeacialCharacters=/^[a-zA-Z0-9- ]*$/;
if(studentGrade>=6) //for the students in Grade 3 to 6
{
//password should be of 5 characters and must contain a number
if (current_password.length<5 && current_password>8 && !hasNumber.test(current_password))
{
password_valid=false;
}
}
if (password_valid && current_password!='') {
$j("#submit").show();
}
});
});
</script>
</body>
</html><!-- end right frame -->
jQuery is never assigned to $j.
You can either replace $j with $ or just add $j = $ in the beginning of the script.
Here's a jsFiddle with the added fix of $j = $
The issue with your script is that you are calling an id that doesn't exist $j("#submit") as <button name="submit" type="button" disabled>Submit</button> doesn't have an id. Additionally the show function doesn't remove the disabled attribute, you will want to use prop('disabled', false).
Here's a jsFiddle with the script fixed and $j = $ fixed as well.
Related
I'm trying to track down an error
TypeError: $(...).clientSideCaptcha is not a function at RegisterCapcha (http://localhost:4382/xxx/index.html:98:31)
, am working in angularJS project. simple issue but i can't got out from it.
i have implemented a captcha using j query and successfully working in a view when on on-click but thing is i have try to load that same captcha in other view in on-load but captcha function is not loading.
in view1 captcha working fine code below
view1.html
<a onclick="RegisterCapcha(); ReverseContentDisplay('job-apply'); return true;"
href="javascript:ReverseContentDisplay('job-apply')">
<form id="careersForm" >
<table class="apply-form">
<tr>
<td>First Name </td>
<td><input type="text" name="First_Name" class="applytext" required id="First_Name"></td>
</tr>
<tr>
<td colspan="2" class="applytable" >
<div class="editor-field">
<p>
<label>
Enter the text shown below:
<input type="text" id="captchaText" onkeyup="javascript:EnableApply();" /></label></p>
<p id="captcha">
</p>
</div>
</td>
</tr>
<tr>
<input type="submit" id="careerbtn" name="button" disabled="disabled" class="send-resume" value="SEND" style="margin-left:24%;">
script declared in index.html
<script src="js/captcha/jquery.clientsidecaptcha.js" type="text/javascript"></script>
<script type="text/javascript">
function EnableApply() {
var OriginalCaptcha = $('#careersForm').data('captchaText');
var userCapcha = $('#captchaText').val();
if (OriginalCaptcha == userCapcha) {
$('#careerbtn').removeAttr('disabled');
}
else {
$('#careerbtn').attr('disabled', 'disabled');
}
}
function RegisterCapcha() {
$("#captcha").html(''); //reset the generated captcha first
$("#captchaText").val('');
$("#careersForm").clientSideCaptcha({
input: "#captchaText",
display: "#captcha",
});
}
</script>
view2:
same form with same RegisterCapcha(); script in onload but calling in view2
<script type="text/javascript">
$(document).ready(function () { RegisterCapcha(); });
</script>
<form id="careersForm" >
<table class="apply-form">
<tr>
<td>First Name </td>
<td><input type="text" name="First_Name" class="applytext" required id="First_Name"></td>
</tr>
<tr>
<td colspan="2" class="applytable" >
<div class="editor-field">
<p>
<label>
Enter the text shown below:
<input type="text" id="captchaText" onkeyup="javascript:EnableApply();" /></label></p>
<p id="captcha">
</p>
</div>
</td>
</tr>
<tr>
<input type="submit" id="careerbtn" name="button" disabled="disabled" class="send-resume" value="SEND" style="margin-left:24%;">
please help me to solve it thanks in advance :)
Include jQuery before all your scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/captcha/jquery.clientsidecaptcha.js" type="text/javascript"></script>
After that define $ variable for jQuery function like this:
<script type="text/javascript">
(function($){
function EnableApply() {
var OriginalCaptcha = $('#careersForm').data('captchaText');
var userCapcha = $('#captchaText').val();
if (OriginalCaptcha == userCapcha) {
$('#careerbtn').removeAttr('disabled');
}
else {
$('#careerbtn').attr('disabled', 'disabled');
}
}
function RegisterCapcha() {
$("#captcha").html(''); //reset the generated captcha first
$("#captchaText").val('');
$("#careersForm").clientSideCaptcha({
input: "#captchaText",
display: "#captcha",
});
}
}(jQuery || window.jQuery));
</script>
After loading jQuery
<script src='jquery.js'></script>
if (typeof $ == 'undefined') {
var $ = jQuery;
}
Referenceļ¼
https://v123.tw/fix-jquery-typeerror-not-function/
please include latest jquery before all the script tags.
find latest jquery at https://code.jquery.com/ or
use cdn
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
For use Jquery plug-in (library) you need to import Jquery first.
The better way is import all scripts at the end of your HTML.
Take care of the order (Jquery first).
Example of Jquery import (online version).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
For some reason you don't want import script at the end, don't forget :
$(document).ready(function(){//code});
Some plug-in need HTML to be loaded before use them. So the script begins to end.
My Code: "edited, added "var" in front of all variable, thanks. I tried removing the <form> but it wouldn't function when I did.
<head>
<title>Calculator</title>
<script language="javascript">
function calculate()
{
var v=parseInt(document.forms[0].txt1st.value);
var w=parseInt(document.forms[0].txt2nd.value);
var x=parseInt(document.forms[0].txt3rd.value);
var y=703;
var z = (v/w/x*y).toFixed(3);
document.getElementById("display").innerHTML=z;
}
</script>
</head>
<body>
<form name="cal" method="post" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input name="txt1st" type="text" id="txt1st"></td>
<td><input name="txt2nd" type="text" id="txt2nd"></td>
<td><input name="txt3rd" type="text" id="txt3rd"></td>
<td>x 703</td>
</tr>
</table>
<button onclick="calculate()">Calculate</button>
<div id="display"></div>
</body>
When I click the "Calculate" button the result displays in the div, but only for a split second then disappears. Keep in mind I'm very new to JavaScript. Any help appreciated, thanks.
You are submitting the form and so the page is refreshing.
Add return false; to the end of your calculate function to prevent the form submission.
This is my code currently, how could I change the current code So I'm able to input data from the form after submitting then adds to the table below, I know I got to do more with JS to achieve this, but can't find anything online that will help me accomplish what I want to do
Edit: What Im trying to accomplish which I cant seem to find online resources to help me, to be exact when I put in the movie name and date, after submitting the values should be put in the table below the form
<html>
<head>
<title>Movie Details</title>
<script type="text/javascript">
function movieName(){
var name = document.getElementById("movie").value;
if (true)
{
alert(name);
}
}
function date(){
var released = document.getElementById("dateRelease").value;
if (true)
{
alert(released);
}
}
</script>
</head>
<body>
<div id="add">
<form name="movieAdd" method="GET">
<fieldset>
<legend>Movie Details</legend>
<p>
<label for="movie">Movie Name:</label>
<input type="text" required placeholder="Movie Name" name="movie" id="movie"/>
</p>
<p>
<label for="date">Date Released:</label>
<input type="date" required name="date" id="date"/>
</p>
</fieldset>
<p>
<input type="submit" name="submitButton" value="Submit">
</p>
</form>
</div>
<table id="movieTable" width="350px" border="1">
<tr>
<th>Number</th>
<th>Movie Name</th>
<th>Date Released</th>
</tr>
</table>
</body>
</html>
I'd recommend using jQuery (http://jquery.com/). You can use it to easily select elements from your form, for example:
var movie = $('#movie').val();
You can then easily append a table row with the necessary data, for example:
var $td = $('<td>').text(movie);
$('#movieTable').append($td);
I hope this points you in the right direction.
if you are using php, then you can use post method to achieve this. once the form is posted you can populate the table.
if(isset($_POST['submitButton'])){
echo '<table id="movieTable" width="350px" border="1">';
echo '<tr>';
echo '<th>'.$_POST['moviename'].'</th>';
echo '</tr>';
echo '</table>';
}
I'm new to JQuery and trying to learn more since my work requires me to do a lot of JQuery and AJAX. Now i have this practice project that i use to play around with JQuery and i can't seem to figure out the cause of this problem.
Here's the structure of the website
- index html with an iframe in it containing several buttons
- several html files for each of the iframe
Index.html
<div style="width:750px; height:450px; overflow:hidden; margin: 0 auto; position:relative; margin-top:35px;">
<div id="btn1" style="float:left"> <p> About Us </p> </div>
<div id="btn2" style="float:left"> <p> Objective </p> </div>
<div id="btn3" style="float:left"> <p> Constrains </p> </div>
<div id="btn4" style="float:left"> <p> Modelling </p> </div>
<div id="btn5" style="float:left"> <p> Contact Us </p> </div>
<div id="btn6" style="float:left"> <p> Feedback </p> </div>
<div id="content" style="position:absolute"> <iframe id="main",name="main" frameborder=0 height=450 width=750></iframe> </div>
2.html -- where my textbox resides
<div id="content" style="width: 730px; height: 430px !important;">
<form id="Form_obj", action="index.html", method="post">
<table width="100%" border="1" cellpadding="0">
<tr>
<td>Objective Function:</td>
<td colspan="2"><label id="msg">Your Objective Function</label></td>
</tr>
<tr>
<td></td>
<td align="center", colspan="2"><input type="button", id="Subbutton", value="-", disabled=true><input type="button", id="Addbutton", value="+", disabled=true><input type="submit", value="Submit">
<input type="button", id="Btnclear", value="Clear">
</td>
</tr>
<tr>
<td>Enter Objective Function values:</td>
<td align="right"><input type="text",id="Obj_coef1", name="Obj_coef1", size="5"><input type="text", id="Var_name1",name="Var_name1", size="15"></td>
<td><input type="button", id="Add_var_button", value="Add Variables"></td>
</tr>
</table>
</form>
main.js
$(document).ready(function(){
$("#main").load(function(){
$("#main").ready(function(){
// now read contents
$("#main").contents().find("#Add_var_button").click(function(){
alert("button is clicked");
alert($("#main").contents().find("#Obj_coef1").val());
//alert($("#main").contents().find("#Obj_coef1").val());
//var coef = $("#main").contents().find("#Obj_coef1").val();
//var var_name = $("#main").contents().find("#Var_name1").val();
//var coef_element_name = $("#main").contents().find("#Obj_coef1").getAttribute("name");
//var var_element_name = $("#main").contents().find("#Var_name1").getAttribute("name");
//alert("coef = " + coef);
//alert("var = " + var_name);
//$("#main").contents().find("#msg").text("Jquery changed the text");
//$("#main").contents().find("#msg").append(" appended");
});
});
});
});
Everytime i click the button the alert appears and i can also append text to #msg(label)but for some reason, but when value of the textbox is always undefined even after i changed the value inside the textbox.
What am i missing here?
I figured it out.
Here's my script
var iframe = $("#main");
iframe.load(function(){
iframe.ready(function(){
alert("iframe ready");
// get textboxes and buttons
var btnClear = iframe.contents().find("#Btnclear");
var btnAddVar = iframe.contents().find("#Add_var_button");
var btnAdd = iframe.contents().find("#Addbutton");
var btnSub = iframe.contents().find("#Subbutton");
var msg = iframe.contents().find("#msg");
var obj_coef_input = iframe.contents().find("#Obj_coef1");
var var_name_input = iframe.contents().find("#Var_name1");
btnAddVar.click(function(){
alert("btn add clicked");
btnAdd.prop('disabled',false);
btnSub.prop('disabled',false);
});
btnClear.click(function(){
alert("btn add clicked");
obj_coef_input.prop('value', "");
});
});
});
Oh and don't forget to add $(document).ready(function(){}); to wrap the script
I don't think the find() method is working correctly. I would suggest just using a jQuery selector to get the value. Here's an example:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
var text = $('#blah').val();
alert(text);
})
});
</script>
</head>
<body>
<input type="text" id="blah" /><input type="button" value="button" id="button"/>
</body>
My Code: "edited, added "var" in front of all variable, thanks. I tried removing the <form> but it wouldn't function when I did.
<head>
<title>Calculator</title>
<script language="javascript">
function calculate()
{
var v=parseInt(document.forms[0].txt1st.value);
var w=parseInt(document.forms[0].txt2nd.value);
var x=parseInt(document.forms[0].txt3rd.value);
var y=703;
var z = (v/w/x*y).toFixed(3);
document.getElementById("display").innerHTML=z;
}
</script>
</head>
<body>
<form name="cal" method="post" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input name="txt1st" type="text" id="txt1st"></td>
<td><input name="txt2nd" type="text" id="txt2nd"></td>
<td><input name="txt3rd" type="text" id="txt3rd"></td>
<td>x 703</td>
</tr>
</table>
<button onclick="calculate()">Calculate</button>
<div id="display"></div>
</body>
When I click the "Calculate" button the result displays in the div, but only for a split second then disappears. Keep in mind I'm very new to JavaScript. Any help appreciated, thanks.
You are submitting the form and so the page is refreshing.
Add return false; to the end of your calculate function to prevent the form submission.