In my HTML file, I have a JavaScript function named "CheckCaptcha". I am using following code line to execute that function when an image is clicked. It is not working. After hours of tweaking and modifying the code, it is not simply reaching to the location where the JavaScript function lies.
I am using this code line:
<input type="image" src="images/join.gif" name="SubmitStudent" onclick="CheckCaptcha();" width="98" height="31"/>
The JavaScript section is as below:
<script type="text/javascript">
function CheckCaptcha()
{
aler("-");
var CaptchaWord;
CaptchaWord = document.getElementById(StudentCaptchaImage);
alert(CaptchaWord);
if (CaptchaWord.length <= 4)
{
alert("Please enter words as seen in the image.");
return false;
}
}
</Script>
Actually, I am a new user, and StackOverflow is avoiding me to post the entire HTML section.
Try this:
function CheckCaptcha()
{
alert("-");
var CaptchaWord = document.getElementById('StudentCaptchaImage');
alert(CaptchaWord);
if (CaptchaWord.value.length <= 4)
{
alert("Please enter words as seen in the image.");
return false;
}
}
the .value attribute contains the value, the DOM element does not have a length property.
the gEBI method takes a string, not an identifier as you had it.. unless it was a variable.
your example had a typo in the first alert, I'm guessing you recently added it and it was not the initial problem.
If you're not sure of anything you should start alerting as many things as possible..
alert( typeof CaptchaWord.length )
Make sure getElementById takes a string:
CaptchaWord = document.getElementById("StudentCaptchaImage");
Have checked for any errors in JavaScript which may not be related to this particular function? Use Firebug to find any errors
I tried following code and its working
<script>
function CheckCaptcha(){
alert("test");
}
</script>
<input type="image" src="images/join.gif" name="SubmitStudent" onclick="CheckCaptcha();" width="98" height="31"/>
Have you tried returning false to cancel the event bubble?
onclick="CheckCaptcha(); return false"
Related
here is the function from inside a script
function dosubmit()
{
if (getObj("Frm_Username").value == "")
{
getObj("errmsg").innerHTML = "Username cannot be empty.";
getObj("myLayer").style.visibility = "visible" ;
return;
}
else
{
getObj("LoginId").disabled = true;
getObj("Frm_Logintoken").value = "3";
document.fLogin.submit();
}
}
i want to get the value of getObj("Frm_Logintoken")
as i can't pull the value from #Frm_Logintoken
using document.getElementById("#Frm_Logintoken")
this gives me null
because Frm_Logintoken only gets it's value when i click submit .
<input type="hidden" name="Frm_Logintoken" id="Frm_Logintoken" value="">
full page code
i found this online /getObj\("Frm_Logintoken"\).value = "(.*)";/g
but when i run it ... it gives me the same line again !
it's full code
https://hastebin.com/gurosatuna.xml
First:
Your checking if a value is empty with JS. However this is NOT needed as HTML does this for you. Add a attribute required and the form will not submit as long this value is empty
Documentation: https://www.w3schools.com/tags/att_input_required.asp
Second:
You could use the event handler 'on submit'. The code is not complete enough to know if u did this but I suppose you just added a Click handler on the button.
Documentation: https://www.w3schools.com/jsref/event_onsubmit.asp
When combining these two, you always have a username filled in and the code only executes when submitted. I hope this helps, if not please leave a comment and I will edit this answer.
EDIT: the answer on this SO will also help (not the checked on but the one below)
How can I listen to the form submit event in javascript?
I have researched this issue a couple hours and nothing worked out for me...
This is what I have:
<input id="txtSignInVerificationCode" runat="server" type="text" class="verificationTextbox" onkeydown="func()" />
...
<script>
function func() {
if ($("#txtSignInVerificationCode").val().length == 6)
alert("NICE");
}
</script>
My goal is whenever the length of the text written in textbox reaches 6, the user will get an alert immidiatly (without blur).
Thanks!
The thing is in programming we always start counting from 0. I've just changed the length to 5. That should work properly!
<script>
function func() {
if ($("#txtSignInVerificationCode").val().length == 5)
alert("NICE");
}
</script>
Edit:
You can change the onkeydown method to onkeyup as well. In such case, no need to apply any of above changes.
This is my Piece of script with form id="details"
<script type="text/javascript">
function onLoad() {
$("#password").keyup(passCheck);
$("#repeatpass").keyup(passCheck);
}
function passCheck() {
var password = $("#password").val();
var repeatpass = $("#repeatpass").val();
if (password == repeatpass) {
$("#matchpass").text("Passwords match");
$("#matchpass").addClass("valid");
$("#matchpass").removeClass("error");
$("#details").submit(true);
} else {
$("#matchpass").text("Passwords donot match");
$("#matchpass").addClass("error");
$("#matchpass").removeClass("valid");
$("#details").submit(false);
}
}
$(document).ready(onLoad);
</script>
I want to know why my form(id="details") is not being submitted and if someone can explain how this structure works, it will be more helpful for me. thanks
Working fiddle.
Use $("#details").submit() instead of $("#details").submit(true); and remove $("#details").submit(false);.
Hope this helps.
You should not pass parameter in your submit function remove your $("#details").submit(true); and $("#details").submit(false); its not there in jquery API write this fragment of code it will be of better use:
$( "form" ).submit(function(event) {
if ( $( "span" ).hasClass('error')) {
alert('prevented');
event.preventDefault();
}
return;
});
Fiddle Link
For starters you do not need to have a .submit call in the else block.
This code works in three steps:
(1) The .ready command tells jQuery that when the page is ready it should execute the function named onLoad.
(2) The onLoad function tells that when a key from the keyboard is pressed then the passCheck function should be called.
(3) The passCheck function checks to see if the two texts are equal and if so submits the form, otherwise it does not submit (i.e. The .submit should not be called at all).
Probably the two passwords are both empty initially so they are equal and the .submit is attempted but an error on that prevents the function a ms the script stops working. After that the script stops working completely.
Both notes on the request for the HTML code and the note on the argument given to the .submit, mentioned above are correct.
I am trying to call the resetyear function and it's getting called also, but the flow stops at alert("over"). It doesn't transfer its control to resetmaster.
String flag = "";
flag = (String) session.getAttribute("flag");
System.out.println("flag = " + flag);
if (flag == null) {
flag = "";
}
if (flag.equals("yes")) {
%>
<script>
alert(1);
// resetyear();
dontreset();
//document.getElementById("checkyear").value = "1";
//alert(document.getElementById("checkyear").value);
</script>
<%} else if(flag.equals("no"))
{%>
<script>
alert(2);
//document.getElementById("checkyear").value = "2";
//alert(document.getElementById("checkyear").value);
resetyear();
</script>
<%}else{}%>
function resetyear(){
if(confirm("DO YOU WANT TO RESET THE YEAR?"))
{
alert("hello");
//document.forms['indexform'].action = "resetmaster";
//alert(document.forms['indexform'].action);
//document.forms['indexform'].submit();
alert("over");
form.action = "resetmaster";
form.submit();
alert(1);
}
For me it works:
document.getElementById("checkyear").value = "1";
alert(document.getElementById("checkyear").value);
http://jsfiddle.net/zKNqg/
Maybe your JS is not executed and you need to add a function() {} around it all.
You need to run your script after the element exists. Move the <input type="hidden" name="checkyear" id="checkyear" value=""> to the beginning.
It seems to work fine in Google Chrome. Which browser are you using?
Here the proof http://jsfiddle.net/CN8XL/
Anyhow you can also access to the input value parameter through the document.FormName.checkyear.value. You have to wrap in the input in a <form> tag like with the proper name attribute, like shown below:
<form name="FormName">
<input type="hidden" name="checkyear" id="checkyear" value="">
</form>
Have you considered using the jQuery Library? Here are the docs for .val() function.
The first thing I will try - determine if your code with alerts is actually rendered. I see some server "if" code in what you posted, so may be condition to render javascript is not satisfied. So, on the page you working on, right-click -> view source. Try to find the js code there. Please tell us if you found the code on the page.
Your code for setting value for hidden input is correct. Here is the example. Maybe you have some conditions in your if statements that are not allowing your scripts to execute.
I have a simple function to show / hide a div element. I have a javascript function to do that. I debugged this with Opera. The function sets the hidden value properly on the div element. I can see the div element disappear. However, when the function returns the div element reappears. The javascript function is in its own file:main.js:
function showhide(name){
var elem = document.getElementById(name) ;
if( elem.hidden == false ) {
document.getElementById(name).hidden = true ;
} else {
document.getElementById(name).hidden = false ;
}
}
The Html is:
<div class=wrap><p>
<div class=sidebar>
<FORM><input type="submit" value="Toggle" onclick="showhide('specname');"/></FORM></div>
<div class=main>main Div
<div id="specname">collapsible text</div></div></p></div>.
I have set debugging breakpoints in the javascript function showhide to see that the value is being set properly. But on function return, the value is reset.
It is probably something simple I am missing but can't seem to see it? Any ideas? Thanks!
The answers solved my problem. I was missing the fact that the submit repainted the page and I lost my changes. I changed the type=submit to type=button. And I removed the form to just an input element with type button. That worked very nicely. Thanks everyone for your help!!! I really appreciate your answers!
The following wont do anything in some browsers:
document.getElementById(name).hidden = true
change it to
document.getElementById(name).style.display = 'block' // and 'none' for the matching line
does that make it do what you need?
As others have pointed at, it is also submitting the page - either use a different element or change the function to start :
function showHide(e, name) {
e.preventDefault();
//do the toggle here
return false;
}
The problem is you are using a submit control which will submit to the server and refresh the page. You want to stop the submit or change the control type. Both of the following should work. I recommend the 2nd one.
Try this
<FORM><input type="submit" value="Toggle" onclick="showhide('specname'); return false;"/>
or this
<input type="button" value="Toggle" onclick="showhide('specname');"/>
Probably because when you click the button the form submits and it refreshes the page ?
You should not be using a form just to have a button that does something. Instead, try using
<button onClick="showhide('specname');">Toggle</button> (and get rid of the form entirely)
Try this for your showhide().
function showhide(name){
var elem = document.getElementById(name);
(elem.style.visibility == 'hidden'?elem.style.visibility = 'visible':elem.style.visibility = 'hidden');
}
OR similarly:
function showhide(name){
var elem = document.getElementById(name);
(elem.style.display== 'none'?elem.style.display= 'inline':elem.style.display= 'none');
}
Maybe try them both and see which you need.
Cheers.