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>
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 am new to JS. I am creating a button and I want the button to toggle what it says. I can get it to fire once, but then it won't fire again unless i refresh the page. What am I doing wrong? I'm sure its simple.
JS function:
<script type="text/javascript">
function fullscreen(){
var elem = document.getElementById("button1");
if (elem.value=="Maximize"){
elem.value = "Minimize";
}else {
elem.value = "Maximize";}
}
</script>
in the body of the page is:
<div>
<input type="button" id="button1" value="Minimize" onclick='fullscreen()'>
</div>
What I expect is the text of the button will switch when the variable is passed through the if statement. I can get it to change from "minimize" to "maximize" onclick, but the second click does nothing.
Hey i did put alert and your code is working fine. You can even see this in your developer console. Also you should put === instead of == for comparing to string.
There should be other problem i think.
function fullscreen(){
var elem = document.getElementById("button1");
if (elem.value ==="Maximize"){
alert('hi');
elem.value = "Minimize";
} else {
alert('hello');
elem.value = "Maximize";}
}
I have an array of users in php that i send to the view (in laravel) and do a foreach to list all users in table. For now it is ok. I have a "send" button that appear disable but i want to put visible when i click on the checkbox.
I put this javascript code:
<script type="text/javascript">
Enable = function(val)
{
var sbmt = document.getElementById("send"); //id of button
if (val.checked == true)
{
sbmt.disabled = false;
}
else
{
sbmt.disabled = true;
}
}
</script>
and call the function onClick method of checkbox:
onclick="Enable(this)"
But the problem is when i click on the check box only the first button send works and appear visible. If i click for example in check box of user in position 2,3,4...etc the buttons send of these users stay disabled, only the first appear visible. This code only work to the first position of send button.
I appreciate your help :)
Regards
You pass element to function Enable, but treat it as value. You should extract value from element before other actions.
You hardcoded button id in the function. It shout be passed outside and should differs for each button.
Enable = function(checkbox, btnId)
{
document.getElementById(btnId).disabled = !checkbox.checked; // ← !
}
<button id="send1" disabled>SEND</button>
<input type="checkbox" onclick="Enable(this, 'send1')"><br>
<button id="send2" disabled>SEND</button>
<input type="checkbox" onclick="Enable(this, 'send2')"><br>
<button id="send3" disabled>SEND</button>
<input type="checkbox" onclick="Enable(this, 'send3')">
The reason is that you are using id element to activate button.
What you can do is set id for each of your send button while you loop and pass it from your click your function and use it enable it.
<script type="text/javascript">
Enable = function(val, id)
{
var sbmt = document.getElementById("send-"+ id ); //id of button
if (val.checked == true)
{
sbmt.disabled = false;
}
else
{
sbmt.disabled = true;
}
}
</script>
and your click button looks like this
onclick="Enable(this,id)"
Hope you understood.
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.
I have a link button in the page like:
<asp:LinkButton ID="edit" runat="server" OnClick="edit_Click" Enabled="False">ویرایش</asp:LinkButton>
I want Enable/Disable this in javascript.
I use this code but set visible
var objedit = document.getElementById('<%= edit.ClientID.ToString() %>');
objedit.style.display = "none";
I use this code but not enable
if (count == 1) {
objedit.disabled = false;
} else {
objedit.disabled = true;
}
I can click but link button is disabled.
This link should give you everything you need. You can't really "disable" a linkbutton because its just a link with some javascript attached. Basically, you need to reassign the click handler to something that returns void or false.
You can refer to the ID of the link with the following script:
<script runat="server">
var a = document.getElementById('<%= edit.ClientID.ToString() %>')
</script>
So, is this what you want?
http://jsfiddle.net/hzaR6/
http://jsfiddle.net/hzaR6/2/ -- UPDATED, tested in Chrome and Firefox
The UPDATED way
You can use a class name to define disabled element, for which you can have more control on their styles ... etc.
$("#link").toggleClass("disabled"); //This will simply toggle the class
and for the css
#link.disabled{
z-index:-1; /*Make it not clickable*/
position:relative;
opacity: .5; /*Lighter*/
}
You can do whatever you want here.
The good old form element way
$("#edit").attr("disabled", false);
-or-
document.getElementBy("edit").disabled = false;
This will disable any form element. If you want to enable them, just change false to true.
var a = document.getElementBy("edit").disabled;
a will be true if the element is disabled. Otherwise it will be false.
To disable element:
document.getElementById('<%# edit.ClientID %>').disabled = 'disabled';
//.ToString() is not necessary; ClientID is a string.
To re-enable:
document.getElementById('<%# edit.ClientID %>').disabled = '';
Of course, it can be done after document (DOM) is loaded.
try this
var objedit = document.getElementById("edit"); //not editid (editid is a variable)
objedit.disabled = true; //if I'm not mistaken its true/false or disabled
document.getElementById("lnk").style.display = "none";