We Keep Coding

How do I replace the value in the <button> element with something else using javascript or jquery?

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');
});

How can I re-enable a text field?

I am trying to re-enable a text field that gets automatically filled in and disabled on the website we use for ticketing. It is currently possible to inspect element, and enable manually to field to enter anything you want. I'd like to remove that step. I am trying to make a (very) simple chrome extension that will detect when the field has been disabled and switch it back on, but I'm having no luck.
I've tried several iterations, with no success. Here's what I've got at the
moment.
var subject = document.getElementById('title_fs');
subject.onchange = function() {fix()}
function fix(){
subject.setAttribute("enabled", true)}
I also tried
var subject = document.getElementById('title_fs');
subject.addEventListener("change", {subject.setAttribute("disabled", false)});
The most success I've had so far was accidentally disabling the field as soon as the page loaded. Any suggestions?

Simply remove the attribute
document.getElementById('title_fs').removeAttribute('disabled');
document.getElementById('removeDisabled').addEventListener('click', function() {
document.getElementById('title_fs').removeAttribute('disabled');
});
<textarea disabled="true" id="title_fs">Foobar</textarea>
<button id="removeDisabled">Remove Disabled</button>

element.disabled = true/false
function func() {
var elem = document.getElementById('someId');
elem.disabled = !elem.disabled;
};
<input type="text" id="someId" />
<button onclick="func();">click</button>

How to disable button in javascript

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()">

Why is this working?

I have written some simple javascript to change the content of an iframe according to the input of a field. After hours of attempts, I have managed to get it working; however I didn't really understand why I should put the "return true" and "return false" at the end of my search function. Thank you in advance!
function search(){
var course=document.getElementById("field");
if(course.value!=""){
if(course.value!="Course code (e.g. COMP1004)"){
var target=document.getElementById("frame");
target.src=course.value + ".php";
return false;
}
}else{
return true;
}
}
<input id="field" name="field" type="text"></input>
<input id="searchButton" name="searchButton" type="button"value="Search"onclick="search()"></input>

You don't really need to, since you are calling the function without expecting any value. And even if you write onclick = return search() you have no default action to prevent, since your input has type="button"

When you trigger a javascript function using onclick (depending on the browser), the actual functionality of the click can be prevented by returning false. So if you click on a button and return true (or nothing) the actual click will be triggered and e.g. load a new page. If you return false, the original function of the button will not be called ...

simulate asp:button click using javascript

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.