Onclick of button,(In clientclick event)I show confrmation box having ok and cancel button.Onclick of ok button,buttonclick event fire.I want to disable button and show to message(Pls wait) to user.I am trying but not working.Unable to disable the button and set text to label.
function validate()
{
var response = confirm(Proceed)
if(response)
{
document.getElementById('btnSave').disabled = true;
document.getElementById('lblMessage').innerText = 'Please Wait';
return true;
}
else
{
return false;
}
}
I am getting error.Error is
JavaScript runtime error: Unable to get property 'innerText' of undefined or null reference in asp.net
First of all there's maybe a problem in your HTML. Javascript cannot find the 'lblMessage' element. Fix that first and you're good to go.
Maybe you're using ASP.NET Web Forms. ASP.NET changes the client ID's of server controls depending on the ID of their container. You can change this behavior easily by reading this article:
http://weblog.west-wind.com/posts/2009/Nov/07/ClientIDMode-in-ASPNET-40
Or, find your elements by class name. That way it won't cause conflict with any configuration you're now using.
I think you need to add your html code. I'm guessing your html looks like this
<button onclick="validate()">
you need to add a return statement into the html code so it looks like this
<button onclick="return validate()">
Related
I am trying to hide/show the A-Frame's vr-mode-ui dynamically based on some rules in my code. Initally the <a-scene> looks like this:
<a-scene id="vr-scene" vr-mode-ui="enabled: false">
In my controller, I am trying to enable and disable it based on a flag:
let scene = document.querySelector('#vr-scene');
if (showVR) {
scene.setAttribute('vr-mode-ui', 'enabled: true');
} else {
scene.setAttribute('vr-mode-ui', 'enabled: false');
}
But the moment this toggle happens, I get a error on console which reads like this:
TypeError: Cannot read property 'removeChild' of null
Please advise what's going wrong here. Is there a better way to enable/disable the VR button ?
Here's a simple codepen: https://codepen.io/anon/pen/BdZWdz
Steps:
Click Enable
Click Disable
Click Enable (VR button doesn't come up)
Currently the component doesn't support enabling/disabling much of the button. More of a one-time thing. This can be fixed but will file an issue.
In the meantime, it would be easier to simply toggle the visibility of the button using CSS:
document.querySelector('.a-enter-vr-button').style.visible = 'none';
I am using XHTML, JSF and JavaScript to create a form, validate that information has been submitted into selected fields onclick in a h:commandButton, and if validated, redirect to a different page homepage.xhtml. Everything works up to the redirection, which I can't get to work.
In the JavaScript function Validation(), I have tried location="homepage.xhtml", window.location.href="homepage.xhtml", location.url="homepage.xhtml" and a few others, but nothing seems to work. I have a feeling I'm supposed to have some sort of statement which adds href="homepage.xhtml" to the h:commandButton if Validate() returns true, but I am unsure as to how to do that.
Any help is greatly appreciated. I have added the relevant code below.
Button:
<h:commandButton class="btn btn-warning" value="Continue" onclick="Validation()"/>
Validation
function Validation() {
var nameCheck = document.getElementById('formdiv:cardName');
var numCheck = document.getElementById('formdiv:cardNumber');
var expCheck = document.getElementById('formdiv:expDate');
console.log(nameCheck.value);
console.log(numCheck.value);
console.log(expCheck.value);
var variablesToCheck = [nameCheck, numCheck, expCheck];
for(i=0; i < variablesToCheck.length; i++){
if(variablesToCheck[i].value == null || variablesToCheck[i].value == ""){
alert("Fields marked with a * must be completed");
return false;
}
}
// This is where the redirection needs to go, I think...
return true;
}
EDIT: Just noticed the if else statement is incorrect logically, but syntactically it shouldn't make a difference. The else part needs to be a statement outside of the loop without a condition; this code simply tries to redirect when the field it is checking has something in, not when all fields have something in.
EDIT 2: Loop corrected
Why you need h:commandButton anyway you are using simple javascript validation
h:commandButton is rendered as <input type="submit" ../> its mission is
to submit the form so what ever javascript you are writing your form will be submitted and your page is gonna be refreshed, So If you need it this way you have to force it not to submit the form,
However from understanding your needs all you need is simple <a /> or <button /> , Or you can just add type="button" into your h:commandButton ex:<h:commandButton type="button" .../>
You can either use..
window.location.replace('Your_url'); ..
or you can use..
window.location.href= 'Your_url'; .. I guess there must be other functions too. If you want to open it in another window, like a popup, you can use.. window.open('your_url');
Hope this helps!
I am using Parsley to validate some forms and the server is doing same validations in his side. When a constraint fail on the server, i call this function do add the error on parsley:
var invalidField = $('[name="' + param.target + '"]').parsley();
window.ParsleyUI.addError(invalidField, "remoteError_"+param.target, param.message);
Param.target is the name of the input field to invalidate. The error shown as li under the field, but for the parent form messages are disabled
<form id="ricarica_telefonica_form"
data-parsley-errors-messages-disabled>
<script>
$(function(){
$('#ricarica_telefonica_form').parsley();
});
</script>
Additionally i am using a custom message visualization to show errors trought bootstrap tooltip
window.Parsley.on('field:error', function() { some code });
but my code is not being executed (it works when a field is invalidated trought parsley). What am I doing wrong? Is the method .addError managed correctly by parsley?
I found the solution, the right way is
var instance = $('#field').parsley();
instance.trigger('field-error',instance,{message:errorMessage});
In this way the event is catch by the function that manage tooltip, where i use message attribute. The form is still valid for parsley, but at least i reached my scope.
I am currently trying to solve a problem with my jquery and my html form.
Problem: I have a checkbox that allows people to check to accept or not accept the terms and conditions. This checkbox is being validated by a jquery function, named validateAccept(). However, after i insert the if valid return true and if not valid return false, the checkbox become unresponsive to clicking. I am a beginner with jquery. I am not sure which part went wrong.
my HTML code:
<form action="<? echo $filename; ?>" id="acceptanceForm" name="acceptanceForm" method="post">
<p>Terms and conditions.......</p>
I ACCEPT THE TERMS AND CONDITIONS
<input type="checkbox" name="accept" id="accept" value="yes"/>
<span id="acceptInfo" class="inputInfo"></span>
</form>
My jQuery validating code:
$(document).ready(function(){
//Validation (TERMSANDCONDITION)
//termsandconditions variables
var acceptanceForm = $("#acceptanceForm");
var accept = $("#accept");
var acceptInfo = $("#acceptInfo");
//Trigger validation
//On blur
accept.click(validateAccept);
//On key press
accept.keyup(validateAccept);
//On submit
acceptanceForm.submit(function () {
if (validateAccept())
return true
else
return false;
});
//Validation
//validate accept
function validateAccept() {
var isChecked = $('#accept').is(':checked');
if (isChecked) {
accept.removeClass("error");
acceptInfo.text("Thanks");
acceptInfo.removeClass("error");
acceptInfo.removeClass("inputInfo");
acceptInfo.addClass("validated");
return true;
} else {
accept.addClass("error");
acceptInfo.text("Please Read and Accept the Terms and Conditions");
acceptInfo.removeClass("inputInfo");
acceptInfo.removeClass("validated");
acceptInfo.addClass("error");
return false;
}
}
What I know:
I know that the problems lies with the return true and return false that I added in. I tried without them on JS Fiddle and the check box is working but the form is not. Therefore, I know that return true and false is necessary but I don't really know how I should sort them out to make it work. I have did some researched and realised that little little cases similar to mine. This validation technique is suppose to work on text input so I am not sure if the way i edit it is alright to work for checkbox.
JSFiddle
The problem is that returning false in a click handler prevents the default behavior. If you need to use this in both situations, but ignore the return value in the case of the click handler, you could do this:
accept.click(function(){
validateAccept();
});
http://jsfiddle.net/8JdRb/1/
In this case the click handler function has no return value and does not affect the functioning of the checkbox.
I found the answer. I can use .change(validateAccept); instead. It would work exactly the same as I wanted to. Thanks all.
JSFiddle
I try to activate my first buttons click/command using the second button
in order to activate my Login Command and Group Validation
what am I doing wrong?
first button
<asp:Button ID="LoginButtonInvis" runat="server" CommandName="Login"
ValidationGroup="Login1"
visible ="false"/>
</asp:Button>
second button
<button name="submit" runat="server"onclick="document.getElementById('LoginButtonInvis').Click();">
<i class="icon-arrow-right icon-large"></i>
</Button>
the error im getting:
Microsoft JScript runtime error: Unable to get value of the property 'Click': object is null or undefined
By default, ASP.NET is appending parents ID's to controls to maintain unique ID to elements. This is proper behavior.
In addition, JavaScript is case sensitive. Events all start with small letters. Some browsers have .click() and others have .onclick() so the below code is the best I can offer without changes in other parts of your code:
onclick="var b = document.getElementById('<%=LoginButtonInvis.ClientID%>'); if (b.click) b.click(); else if (b.onclick) b.onclick();"
Also make sure the second button is not submit button by adding type="button" otherwise it will cause the form to be submitted twice.
Edit: this will work only if the first button is present in the document. With your current code, it's not present due to the Visible="false" you have. To send it while still keeping it hidden, remove the Visible="false" and add this in your code behind:
LoginButtonInvis.Style["display"] = "none";
Or alternatively apply CSS class with "display: none;" rule.
To avoid having inline JavaScript, plus better cross browser support (IE, yes) you better add JavaScript block in your page: (no matter where)
<script type="text/javascript">
function SimulateClick(buttonId) {
var button = document.getElementById(buttonId);
if (button) {
if (button.click) {
button.click();
}
else if (button.onclick) {
button.onclick();
}
else {
alert("DEBUG: button '" + buttonId + "' is not clickable");
}
} else {
alert("DEBUG: button with ID '" + buttonId + "' does not exist");
}
}
</script>
Now have only this in the second button:
<button name="submit" onclick="SimulateClick('<%=LoginButtonInvis.ClientID%>');"><i class="icon-arrow-right icon-large"></i></button>
Note also that you don't need runat="server" for the second button, it will just cause <%= to not work and complicate things.
Try a different approach
On submit button click call a javascript and set a hidden variable field
function SetValue()
{
//set hidden field value
form.submit();
}
Which will take the control to page_load event.In dere check the value of hidden field if it is set and execute the corresponding LoginButtonInvis command.And dont forget to reset the hidden field
Hope this helps
I think the only problem with the original code is that the click method should all be in lower case:
onclick="document.getElementById('LoginButtonInvis').click();
If it's a linkbutton, you can do this: __doPostBack('ctl00$CP1$lnkBuscarEmpleado', '')
I just found it while inspecting my button.