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.
Related
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.
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>';
}
Im developing chrome extension. I want to change input value(username) to some text when user click button. But my solution not working. Need advise.
My code is shown below:
<!DOCTYPE html>
<html>
<head>
<META http-equiv=content-type content=text/html;charset=utf8>
<META http-equiv=content-type content=text/html;charset=windows-1254>
<META http-equiv=content-type content=text/html;charset=x-mac-turkish>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>
<script>
$('#target').submit(function() {
alert('something');
return false;
$('#UserName').value('test');
});
</script>
</head>
<body>
<form id="target">
<table>
<tr>
<td>UserName:</td>
<td>
<input type="text" id="UserName" size="20" />
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" id="Password" />
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Login" id="Login" /></td>
</tr>
</table>
</form>
</body>
</html>
Change your submit button from type button to submit from:
<input type="button" value="Giriş" id="Login" />
to:
<input type="submit" value="Giriş" id="Login" />
Also change your JS code from:
$('#target').submit(function() {
alert('uyarı');
return false;
$('#UserName').value('deneme');
to:
$('#target').submit(function() {
alert('uyarı');
$('#UserName').val('deneme');
return false;
Your submit button needs to be of type 'submit'.
So this:
<input type="button" value="Login" id="Login" />
should be:
<input type="submit" value="Login" id="Login" />
Also, the appropriate jQuery function for getting/setting input values is .val().
Lastly, you don't want to return false until the end of the function.
$('#target').submit(function() {
alert('something');
$('#UserName').val('test');
return false;
});
See this working Fiddle.
This is working fine
$('input#Login').click(function() {
$('#UserName').val('test');
return false;
});
jQuery uses the VAL rather than VALUE
in other words
<script>
$('#target').submit(function() {
alert('something');
return false;
$('#UserName').val('test');
});
</script>
and also the FORM is not submitado change the type of input and submit to the adciona FORM METHOD = "POST"
Guys thank you very much. I found. The problem is when you are developing google chrome application you must seperate javascript code from html. Otherwise javascript not work.
I have written a simple javaScript function to validate required userName field using JS for my learning purposes.
I am facing two issues -
In submit button, onclick event handler does not invoke
checkRequired method, and form is posted back.
I am not able to set breakpoint in chrome debugger.
Even using debugger exclusively in code does not bring the control
to debugger breakpoint.
TaskManager.js
function checkRequired() {
debugger;
var userName = document.getElementById("txtUserName");
if (userName.length == 0) {
alert("username is required attribute");
return false;
}
return true;
}
AddNewUser:
<html>
<head>
<title>Add new User</title>
<style type="text/css" media="all">
button {
width: 65px;
}
</style>
<script src="TaskManager.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="AddNewUser.html" style="width: 560px; height: 850px; margin-left: 10px; margin-top: 10px">
<fieldset>
<legend>New User</legend>
<table>
<tr>
<td>
<label>User Name:</label></td>
<td>
<input type="text" id="txtUserName" name="User Name" maxlength="10" /></td>
</tr>
<tr>
<td>
<button id="btnSubmit" type="submit" onclick="checkRequired()">Add User</button>
</td>
<td>
<button id="btnCancel">Cancel</button>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Thank you for any help to resolve the issue.
If your breakpoint is not reached then the function is somehow not accessible and you should get an error in the console. Is the function in the global scope?
Here's your code, to which I made a couple of changes to let it work.
First of all the result of your handler has to be taken into account:
<button id="btnSubmit" type="submit" onclick="javaScript:return checkRequired();">
Then you have to check against .value.length inside the textbox you're trying to validate:
var userName = document.getElementById("txtUserName");
if (userName.value.length === 0) {[...]
Anyway I would advise you to use an unobtrusive approach if possible, and bind the event directly in your javascript code, instead of defining it in the markup:
var submitBtn = document.getElementById("btnSubmit");
submitBtn.onclick = function checkRequired() {
console.log('aho');
var userName = document.getElementById("txtUserName");
[...]
Check if the script file is being loaded. Put an alert at the top of the file outside the function definition.
If the alert does not display check carefully the name of your script file. Is it the same as referenced in the script tag? Is it in the same directory?