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.
Related
My alert divs don't show up when I click the submit button.
An 'Error' div should alert when there's an empty required field and,
a 'Success' div should alert right before the form submits. The form submits so I know the validation check works but, I don't see any of my alert divs. See code below:
const goaForm = document.getElementById('goa-form');
let formCompleted = $.trim($('#goa-form input[required]').val()) == !'';
let formIncomplete = $.trim($('#goa-form input[required]').val()) == '';
let success = document.getElementById('success-msg');
let error = document.getElementById('error-msg');
let submitButton = document.getElementById("btnSubmit");
function checkForm() {
if (formCompleted) {
success.style.visibility = 'visible';
goaForm.submit();
} else if (formIncomplete) {
error.style.visibility = 'visible';
$("#error-msg").fadeOut(28000);
return false;
}
}
submitButton.addEventListener("click", checkForm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="error-msg" style="visibility: hidden;" class="alert alert-danger" role="alert">
<span class="fs-14">Error message div</span></div>
<div id="success-msg" style="visibility: hidden;" class="alert alert-success" role="alert">
<span class="fs-15">Success!</span></div>
// Submit Button
<button onclick="checkForm()" id="btnSubmit" class="btn btn-success lift d-flex align-items-
center" type="submit">Submit my application <i class="fe fe-arrow-right ml-5"></i>
</button>
Thanks for the help guys.
checkForm() is fired when your button is clicked, but it uses values (formCompleted, formIncomplete) defined earlier, on page load. So you may fill out your form, but those variables are not updated, and clicking the button uses the old values that were set when the page was first loaded.
Instead, check the input states and define those variables inside your checkForm() function, so that they are set up as the actual, current results when the button is clicked. Then the tests evaluate what the form looks like at the time of the button click.
function checkForm() {
let formCompleted = $.trim($('#goa-form input[required]').val()) == !'';
let formIncomplete = $.trim($('#goa-form input[required]').val()) == '';
// ... rest of your code ...
Update
Here's a working JSFiddle.
Notes:
You're using a mix of plain JS and jQuery. There's nothing technically wrong with that, but it would certainly be easier to read and maintain if you stuck to one. If you are going to take the hit in loading jQuery (extra http request, 90kb odd extra resource, etc) you may as well use it.
I am not sure if it is actually invalid, but the formCompleted test seems wrong. I'd use the standard !== '' instead of == !'' (I've done that in the JSFiddle);
If you're going to use the type comparison for formCompleted, you should be consistent and also use it for formIncomplete, ie use === '' (I've done that in the JSFiddle);
Don't use both an inline onClick() on the button, and add an addEventListener in your JS. They both do the same thing, use only one of them. It is considered bad practice to mix JS in with your HTML, so using the plain JS addEventListener (or jQuery .on()) is better. I've removed the inline one from the JSFiddle.
Here is the button im working with. Goal is to change the value name from "Apply Promo" to "Apply Promo Code".
<input id="btn_promo" ng-disabled="EditingDisabled" type="button" class="btn btn-default" value="Apply Promo" ng-click="applyPromotion()" aria-disabled="false">
I tried both methods to accomplish this but none of them worked. Where in the document is the script supposed to be placed at? Header? Footer? I think it could be the placement but not really sure.
Methods tried:
document.getElementById('btn_promo').value = 'Apply Promo Code';
and
function replaceBTN() {
var newValue = document.getElementById("btn_promo").innerHTML;
var res = newValue.replace("Apply Promo","Apply Promo Code");
document.getElementById("btn_promo").innerHTML = res;
}
first method worked on itself in a blank document but once I tried applying it to the actual document it stopped working correctly.
--Have it working--
EDIT:
$(document).ready(function() {
$('input#btn_promo').attr('value','Apply Promo Code');
});
Do you want to change the value attr immediately when the page loads? or on a click event? Why not just change the html?
Try calling this script right before your close your body tag, or whenever you want the change to take place.
$('#btn_promo').attr('value', 'Apply Promo Code');
You should use value instead of innerHTML:
function replaceBTN() {
var newValue = document.getElementById("btn_promo").value;
var res = newValue.replace("Apply Promo", "Apply Promo Code");
document.getElementById("btn_promo").value = res;
}
replaceBTN();
<input id="btn_promo" ng-disabled="EditingDisabled" type="button" class="btn btn-default" value="Apply Promo" ng-click="applyPromotion()" aria-disabled="false">
Best solution since the DOM will need to load first before the jquery could be applied. The jquery code below cannot detect the the input's value if it doesn't load first. This will allow it to do that then apply whats necessary. For some reason this pre-generated webstore won't apply any jquery code until after everything is loaded.
/*Will check if the whole page is loaded*/
$(document).ready(function() {
/*The value="Apply Promo" will be changed after everything is loaded*/
$('input#btn_promo').attr('value','Apply Promo Code');
});
I use the following button.
<input type="button" id="attractionsSection" value="Warsztaty" onclick="location.href='#Url.Action("AddAttractions","ReservationDetails")'" disabled="disabled" />
In js script i check wheather some condition is true and then I set property disabled of button.
if(Model.stagesConfirmation[4]==true)
{
<script>
$(function () {
console.log('Test1');
document.getElementById('attractionsSection').disabled = 'true';
console.log(document.getElementById('attractionsSection'));
console.log('Test2');
});
</script>
}
I use console log to test wheather this condition is passed and that is OK. I set disabled and button still remains active. This console.log
console.log(document.getElementById('attractionsSection'));
shows me the following thing
<input type="button" id="attractionsSection" value="Warsztaty" onclick="location.href='#Url.Action("AddAttractions","ReservationDetails")'"/>
So it is not disabled. How to solve, what can be the problem?
See this answer. You need to use element.removeAttribute("disabled"); or element.disabled = false;
You don't say disabled=true you just say disabled. Check here for documentation on the disabled attribute.
You could say disabled="foobar" and it will still disable the button. To prove that, play around with this.
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()">
I am using the following code:
document.forms["form_name"].submit();
It doesn't seem to work. Is there another way to submit a form using Javascript?
Not really. It probably doesn't work because you have form element named "submit". Change its name and the code will work.
To confirm this is really the problem, some debug is required:
var sFormName = "form_name";
var oForm = document.forms[sFormName];
if (oForm) {
if (oForm.elements["submit"]) {
alert("form contains element named submit, can't use JS to submit it");
}
}
else {
alert("Form named " + sFormName + " does not exist");
}
Keep us updated. :)
If you're in Internet Explorer, there HAS to be a <input type='submit'> present in the form in order to work. May just be IE7, but we've run into that problem.
To hide the button just use style='display:none;'