Okay, I have been messing around with this for a few hours now and decided to ask. I have searched StackOverflow and Google, with no resolution. I am trying to change the text of a button, like below.
<input id="btnRegUpdate" type="submit" onclick="updatePrice(1)" value="Correct">
The updatePrice() function is called and checks a few things and at the end I have an if statement that checks the value to see if it is Correct, if it is, it will change the text, or suppose to.
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.attr('value') == 'Correct'){
logMessage("Button was correct");
btnRegUpdate.text("Update");
}
At this point I have tried everything in this solution jQuery change button text with nothing working. I get the logMessage, but the button still doesn't change.
UPDATE: Nothing seems to be working. I tried everything again in a new function, just in case the other logic was messing with something. After doing a quick test to see if the text was change
function updatePrice2(val, e) {
e.preventDefault();
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.attr('value') == 'Correct') {
logMessage("Button was correct");
btnRegUpdate.val("Update");
}else if(btnRegUpdate.attr('value') == 'Update'){
logMessage('Button was update');
btnRegUpdate.val("Correct");
}
}
and the console shows that it changed but doesn't on screen.
Change the innerHTML not the text. Like so:
btnRegUpdate.html("Update");
EDIT:
Just noticed you're using a <input> not a <button>, change the value property:
btnRegUpdate.attr('value', 'Update');
You need
btnRegUpdate.attr("value", "Update")
instead of
btnRegUpdate.text("Update");
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.val() == 'Correct'){
btnRegUpdate.attr('Value',"Update");
}
Try using btnRegUpdate.attr('Value',"Update");
Demo
Try this:
Prevent default action of submit button
Change the value of button using val()
function updatePrice(val, e) {
e.preventDefault();
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.attr('value') == 'Correct') {
console.log("Button was correct");
btnRegUpdate.val("Update");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="btnRegUpdate" type="submit" onclick="updatePrice(1,event)" value="Correct">
The input element's text is defined by its value attribute, not content. To change the text, update the value attribute:
btnRegUpdate.attr('value', "Update");
instead of
btnRegUpdate.text("Update");
With jQuery you can use .html() to change the contents. It works the same as javascript's .innerHtml
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.attr('value') == 'Correct'){
logMessage("Button was correct");
btnRegUpdate.html('Update')
}
Add return false to the click handler.
<input id="btnRegUpdate" type="submit" onclick="updatePrice(1); return false;" value="Correct">
Otherwise the page will attempt to submit and reload.
Your function look good and i don't know it's not working.
function updatePrice2(val, e) {
e.preventDefault();
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.attr('value') == 'Correct') {
logMessage("Button was correct");
btnRegUpdate.val("Update");
}else if(btnRegUpdate.attr('value') == 'Update'){
logMessage('Button was update');
btnRegUpdate.val("Correct");
}
}
I suggest you check in your page and find id "btnRegUpdate", maybe it appear more than one.
Related
Friends i am new to javascript, I am trying to write a script to validate the entire form whenever any input field value is changed of input fiels with the data attribute of required.
HTML
<form>
<input type="text" name="FirstName" class="inputField" data-required="true"></input>
<input type="text" name="MiddleName" class="inputField"></input>
<input type="text" name="LastName" class="inputField" data-required="true"></input>
</form>
SCRIPT
var field, required, isValid, fieldVal;
function validatedForm() {
field = document.querySelectorAll('.inputField');
document.getElementById("submitButton").disabled = true;
var isValid = true;
for(var i=0; i < field.length; i++){
required = field[i].dataset.required;
if(required){
field[i].addEventListener('blur', function(e){
fieldVal = this.value;
if(fieldVal == ''){
isValid = false;
}
checkSubmitBtn();
}, true);
}
}
function checkSubmitBtn() {
if(isValid = true) {
console.log(isValid);
document.getElementById("submitButton").disabled = false;
}
}
}
window.addEventListener("load", validatedForm);
PROBLEM 1:
The isValid is not updating hence even an empty blur on the input field makes the button disable to be false.
PROBLEM 2:
In case there are multiple forms on the page then how to validate only the desired forms .. just like in jQuery we add a script tag in the end to initialize the script according to it.
PROBLEM 3:
Is there a way to change the disable state of the button without the GetElementID ... I mean if that can be managed depending on the submit button of that particular form on the page where the script is suppose to work.
Any help will be highly appreciated. Thanks in advance.
I think you need something like the following form validation..
<script type="text/javascript">
var field, fieldVal, required = false;
function validatedForm() {
field = document.querySelectorAll('.inputField');
document.getElementById("submitButton").disabled = true;
field.forEach(function(elem) {
required = elem.dataset.required;
if(required){
elem.addEventListener('blur', function(e) {
checkSubmitBtn(field);
});
}
});
}
function checkSubmitBtn(field) {
var isDisabled = false;
field.forEach(function(elem) {
fieldVal = elem.value.trim();
if(fieldVal == ''){
isDisabled = true;
return false;
}
});
document.getElementById("submitButton").disabled = isDisabled;
}
window.addEventListener("load", validatedForm);
</script>
I hope it helps...
There are quite a few things going on here. First, your checkSubmitBtn function used a single = operator in the if statement. This won't actually check the variable, it instead will set the variable to that value. Here is the fixed function:
function checkSubmitBtn() {
if (isValid == true) {
document.getElementById("submitButton").disabled = false;
}
}
You mentioned not wanting to use getElementById. There are a few ways around this. One way would be to call the function once and store it in a variable to use later, like so:
var button = document.getElementById("submitButton");
...
function checkSubmitBtn() {
button.disabled = !isValid;
}
Another way would be to use jQuery. It still is technically calling getElementById in the backend, but the code is much simpler. If you wanted to avoid that, you also can still combine this with the technique I described above.
$("#submitButton").attr("disabled", !isValid);
I'd also like to point out that your code doesn't account for a situation where a form goes from invalid (starting point) to valid and back to invalid again. Say a user types in all of the fields but then backspaces everything. Your code will fall apart.
Lastly, your <input> HTML tags should not be closed. There are certain tags that are considered "self-closing", i.e. you don't have to write the closing tag, </input>.
I have two buttons in my html page and when someone clicks Generate button I want to save my document (the same thing save button is doing) if ok is clicked otherwise I do not want to do anything.
Js code
$("#save-application").trigger("click");
I also tried to use
document.getElementById('save-application').click();
and
$('#save-application').click();
But it isnt working.So basically I want to call my save button.Any suggestions on this?
I did tried
if (check == true) {
$("#form").submit();
return true;
}
else {
return false;
}
but form doesn't get saved
I think you missed # while querying by id $("#save-application").click();.
Instead of using trigger , you can create separate function for save functionality,
html code :
<input type="submit" value="Save" id="save-application" onclick="saveApplication();"/>
js code :
function saveApplication(){
//logic here
}
and then call saveApplication() instead of $("save-application").trigger("click");
So I'd do something like this on your input
<input id="save-application" type="submit" value="Save" onclick="saveApplication()"/>
Then modify your javascript to something like this:
function saveApplication() {
if (isChanged == true ) {
var check = confirm("Would you like to to save your changes and have a document generated?");
if (check == true) {
$("#save-application").trigger("click");
return true;
}
else { return false; }
} else {
return undefined;
}
}
Hope this helps
I have a fileupload which loses its content on button click. I have a confirm button to freeze the page from user making any further changes. Once the changes are finalized, the button shall be renamed from Apply to Submit. But during this transition (Autopostback), fileupload loses its content.
To avoid this autopostback, I tried to fix this using javascript by freezing the textboxes and other controls but the button name doesn't change.
if (document.getElementById('<%=Submit.ClientID%>').value == "Apply") {
....
document.getElementById('<%=Remarks.ClientID%>').disabled = false;
document.getElementById('<%=Submit.ClientID%>').value == "Submit";
return false;
}
return true;
I also tried to use the below code snippet but dint work either. In both the cases, the text boxes were disabled but the button name dint change.
if (document.getElementById('<%=Submit.ClientID%>').value == "Apply") {
....
document.getElementById('<%=Remarks.ClientID%>').disabled = false;
document.getElementById('<%=Submit.ClientID%>').innerHTML == "Submit";
return false;
}
return true;
Have referred few sites but most of them suggest to use value or innerHTML. Not sure why it dint work here. Anything else am I missing?
Please suggest how to fix this.
Its not an if you dont have to put == just one and you want to change the value.
change
document.getElementById('<%=Submit.ClientID%>').innerHTML == "Submit";
to
document.getElementById('<%=Submit.ClientID%>').value = "Submit";
the easiest solution is to make sure that you load your JavaScript code after your button definition, or at the end of the file.
this is the correct form :
<button id="test"></button>
<script>
var b = document.getElementById("test");
b.innerHTML = "test" ;
</script>
not this :
<script>
var b = document.getElementById("test");
b.innerHTML = "test" ;
</script>
<button id="test"></button>
you can also use jQuery:
<button id="test"></button>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script>
$("#test").text("test");
</script>
I have a javascript code that works by removing the first and the last line of it.
Please take a look at JSFiddle
for people who wants to see it in here, here is my html:
<input id="search" onclick="search()" type="button" value="Search"/>
my javascript :
function search() {
var search = document.getElementById('search');
var int = setInterval(function() {
if (search.value.length == 6)
search.value = 'Searchi';
else if (search.value.length == 7)
search.value = 'Searchin';
else if (search.value.length == 8)
search.value = 'Searching';
else {
search.value= 'Search';
}
//clearInterval( int ); // at some point, clear the setInterval
}, 500);
}
I want the function to work only when I click the button.
You've selected jQuery in jsfiddle.net which by default causes the site to wrap your whole code in a document.ready handler.
The result is that your search function becomes a local function within that wrapper, and not a global variable as required by a DOM0 onclick handler.
Set the jsfiddle options to "no wrap (body)" and "No-Library (pure js)" to turn off that functionality.
Is there a way to stop a webpage from refreshing completely when the enter button is pressed in a input text element?
I'm looking to create a search field that I can get the text from when enter is pressed to filter objects and only display the ones that contain text from the search field.
I've tried the following to try and catch the enter button but it does not work.
function setupSearchField() {
document.getElementById("searchField").onKeyDown = function(event) {
var holder;
if (window.event) {
holder = window.event.keyCode;
} else {
holder = event.which;
}
keyPressed(holder);
}
}
function keyPressed(key) {
if (key == 13) {
event.cancelBubble = true;
return false;
}
}
If the input element is inside a form, and that form is not actually being submitted to the server, remove the form.
The reason your code doesn't work is becaue the onkeydown event should be in lowercase, and you aren't actually returning something in it (try return keyPressed(holder); - or just move the keyPressed function's code into setupSearchField, since it seems kind of pointless to me to have it as a separate function).
This happens when there is only one text input, regardless of whether your button (if any) has type="submit" or not. It's documented here.
http://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2
So, as suggested by other people earlier, you then have to simply stop this default behavior.
Is your search field inside a element ? Then hitting 'enter' fires a submit event to the form element.
In this case you could process your filtering by defining onsubmit on the form element.
<form id="searchForm">
<input type="text" name="search" />
</form>
<script>
document.getElementById('searchForm').onsubmit = function() {
var searchValue = this.search.value;
// process
return false;
}
</script>
Something like this maybe.
Just add the following javascript code to your Visualforce page:
<script type='text/javascript'>
function stopRKey(evt)
{
var evt=(evt) ? evt : ((event) ? event : null);
var node=(evt.target)?evt.target:((evt.srcElement)?evt.srcElement:null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>