I have written a code regarding a submit form. When I click the button(Download), the status is disabled, and I want to make it enabled, but if I add an alert box between submit and make the disable false, it works. If I remove the alert box, it doesn't work. Is that the time problem or else? How can I solve it?
How can I change the button from disabled='true' to 'false'?
Here is my code:
<div id="fm" class="btnStyleFunc" onclick="disabled='true';submitform()">
<a><span>Download</span></a>
</div>
function submitform(){
var element1 = document.getElementById('form');
if (element1 != null){
} else {
}
document.getElementById('form').submit();
alert('test'); // <--------
document.getElementById('fm').disabled = false;
}
Try this:
function disabledFunc(id)
{
var divObj = document.getElementById(id);
divObj.disabled = false;
}
And call the function with the button id:
disabledFunc('fm');
Hope it helps!
Use this:
<div id="fm" class="btnStyleFunc" onclick="this.disabled=true;submitform()">
<a><span>Download</span></a>
</div>
Of course, the element is a DIV and not a button, so I don't know how well disabled will work on it...
As Farish and MrXenotype have pointed out, the "disabled" attribute is meaningless to a div element. It can be added dynamically but won't affect the behavior. But I understand why you might want to use a div instead of a button, especially if you have spent time customizing your style sheet to get it to look the way you want.
I think you can get the behavior you want though by making a small change:
<div id="fm" class="btnStyleFunc" onclick="this.onclick=null;submitform()">
<a><span>Download</span></a>
</div>
Basically when your onclick handler executes, you disconnect it from the div element. Now when someone clicks your "button" a second time it will do nothing. During the onclick you might want to also change your class to something other than btnStyleFunc - perhaps a new class called btnStyleFuncDisabled. Then you can modify your style sheet so that any div element with that class appears greyed out.
<div id="fm" class="btnStyleFunc"
onclick="this.className='btnStyleFuncDisabled'; this.onclick = null; dosubmit(this)">
<a><span>Download</span></a>
</div>
Note that:
<div id="fm" class="btnStyleFunc" onclick="disabled='true';submitform()">
will create a global variable disabled with the string value 'true', and
document.getElementById('fm').disabled = false;
compares the disabled property of an element with id "fm" to the boolean value false.
Related
I have set up a page with a form that users can make changes to using PHP. When they try to navigate away from the page or refresh, an alert box appears using JS. However when they click the Save button the alert box still appears.
Is there any way I can stop the alert box appearing when the user clicks on the save button?
here is my JS:
var needToConfirm = true;
$('#save').click(function(){
var needToConfirm = false;
})
if (needToConfirm == true)
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Here is my HTML (just the button): -->
<input type="submit" id="save" />
<input type="hidden" id="save" name="submitted" value="TRUE" />
If I understand correctly, you don't want to show the confirmation dialog when someone clicks the save button right? Why not just deregister the onbeforeunload method in that click handler like so:
window.onbeforeunload = confirmExit; //By default assign the confirmExit
//If user clicks on save, just set it to null.
$('#save').click function(){
window.onbeforeunload = null;
}
This way, you don't need to maintain a separate variable called needToConfirm. Also, try to understand the way javascript executes your code. It does it line by line. So, your needToConfirm defined inside the click handler right now gets set to false when the user clicks save. But even before that callback is called, you already have bound the onbeforeunload event as the default value of needToConfirm is true.
Try to also keep in mind the scoping of variables in javascript. If you redefine variable needToConfirm inside a click handler it would not necessarily access the "global" variable you intend to share across different functions. And ofcourse, like other people pointed out, don't use the same id for different HTML elements. It is not supposed to be used like that.
First of all, you are not executing your conditional code inside the if statement. It is out of it, fix that and try again. If it still doesn't work then try the following:
The page get refreshed before the $("#save").click() returns anything (in this case, needToConfirm = false. Therefore the alert box appears as usual. You have to modify your html as follows:
<input type="button" id="save" />
and use javascript to actually submit the form... You can do that as follows:
$("#save").click(function() {
var needToConfirm = false;
$("#idOfForm").submit();
return false;
}
Also, change ID of one of the buttons as 2 elements can never have the same ID... or use class instead!
Firstly apologies if this is not a very good question, but I am not very familiar with Javascript at all. Secondly I did do research to find my problem I refer you to this post
I wrote this very basic function
function hideBtn(){
var btn = document.getElementById("submitBtn").style.cssText="display:none";
}
echo'<input type="submit" value="submit" name="submit" id="submitBtn" class="buttono" onclick="hideBtn()" />';
Which I want to hide my submit button after form is clicked as currently it is still displaying
Any help very much welcomed
Can it be that when the form is submitted the page is refreshed, and thus the function was not actually triggered?
Can it be that when the form is submitted the page is refreshed, and thus the function was not actually triggered?
Yes, that's very likely to be the issue. If you don't want the page refreshed, don't use a submit button, or submit the form to another window, or use an submit event handler on the form element and prevent the default action.
Separately: It's best not to completely replace all of the styles on the element. Instead, just set the specific style you want:
var btn = document.getElementById("submitBtn").style.display = "none";
The style property on elements is an object with properties for each of the CSS styles.
Since you are using submit button, you need to stop form from submitting and refresh page.
Second thing, you are not using styles correctly to hide the button.
function hideBtn() {
var btn = document.getElementById("submitBtn").style.display="none";
return false; // Prevent form from submitting
}
You probably want to write:
var btn = document.getElementById("submitBtn").style.display = "none";
See more: http://www.w3schools.com/jsref/dom_obj_style.asp
I am beginner of js. I want to make a editor like PHPAdmin. When click its table, the field will change to text-area. When click some where else outside of the text-area, it will change back to the filed and execute the sql.
Following is what I suppose to write with jQuery, I am totally not understand how should I code it further, please advice.
$('#editor #gird_edit').bind({
click: function() { //When Click
var content = $(this).text(); // read what is in the filed
$("#gird_edit").text('<textarea>'+a+'</textarea>'); // This is not work, will only add html code,not change to text-area
},
/* ??? */: function() { //Outside click of the text-area
var content = $(this).text(); // read what is in the text-area
$("#gird_edit").text(????); // change back to the filed
}
})
Html
<div id='editor'>
<div id='gird_edit'>hallo world</div>
<div id='gird_edit'>hallo world 2</div>
<div id='gird_edit'>hallo world 3</div>
</div>
I only have 3 reputations, just joined yesterday...I am sorry for that I cannot vote you since it requires 15 reputations. However, I will very appreciate you help!!
If you want to detect clicks outside of an element, just detect them on the whole page, and throw out any that come from inside the element. In other words:
$('body').on('click', : function(e) { //Outside click of the text-area
if ($(this).parents().is('#gird_edit')) return false;
var content = $('textarea').text(); // read what is in the text-area
$("#gird_edit").text(????); // change back to the filed
});
However, it sounds like what you're really looking for is a "blur" handler, which will trigger whenever someone was inside a textarea and just left it; you can make one of those the same basic way you made your click handler:
$('#gird_edit textarea').bind({
blur: function() {
// do the reverse of the click handler
}
I am working with some JavaScript and Ajax functions. I am going to put some code while I explain myself to be more clear.
I have this element: <div id="divTest" onclick="test()">YES</div>
When the user clicks the DIV, the function replaces the "YES" for something like this:
YES <input type="radio" name="testing" value="YES" onclick="test_2(this.value)" checked />
NO <input type="radio" name="testing" value="NO" onclick="test_2(this.value)" />
This allows the user to select again the right option. Then I want to replace the radiobuttons with new value, so when the user selects any option, the DIV replaces the "radio" options and displays the value selected (YES OR NO) as it was on the beginning.
At this point everything works perfect.
Here is my problem:
I want the DIV to have the onclick() as the beginning onclick="test()" so I do it from JavaScript giving it the property this way: div.onclick = function() { test();};. The function test() is executed even if the user does not click on the div. It executes both function right away and does not wait until there is a click on it.
Does anyone knows how can I make the function to wait until there is any click on it? Am I giving the onclick property incorrectly?
I hope I made myself clear.
Here are the functions:
function test() {
var div = document.getElementById("divTest");
//I DO NOT INCLUDE THE AJAX CODE BUT THE RESPONSE INCLUDE THE RADIO BUTTONS METIONED ABOVE
div.innerHTML = xml.responseText();
}
function test_2(newValue) {
div = document.getElementById("newValue");
div.innerHTML = newValue;
div.onclick = function() { test(); };
}
Yes, your problem is with div.onclick = here you are actually assigning a click action to your div! Which will execute when your page loads.
What you want is to assign an event listener like so.
div.addEventListener('click' function(){});
I have got the same problem and I found this page. I check the spec of addEventListener and I found out I typed an excessive pair of bracket.
Two ways to do this:
1.use anonymous function(that is without a name, defined just in time to use) like the above answer.
2. you can't add the bracket. simply use ('click', myfunction).
If you want to use parameter, wrap your function into an anonymous function. like this:
div.addEventListener('click', function(){myfunction(e){}}).
it's a little bit late, hope you can read it and solve your problem.
First, sorry for my bad English.
I'm making a Coupons site and have trouble with selecting and deselecting the coupons. Each coupon is in a DIV 'box' in which there is a checkbox.
I made a onClick function on the DIV box (so the user can select the coupon by clicking on anything inside the DIV box. What I need now is, when the user want to deselect the coupon (by clicking on the checkbox inside the DIV box), I need to 'override' the DIV's onClick function (execute the checkbox onClick event, not the DIV's onClick event).
I know that everyone prefers some code as an example, but the question/problem is simple and I don't think you need all of my un'useless code inside the events/functions :)
Thanks :)
It seems like you want stopPropagation if the checkbox is being unchecked: http://jsfiddle.net/8Dcq8/.
$("div").click(function() {
alert("add"); // clicking anywhere in div to add coupon
});
$(":checkbox").click(function(e) {
if(!this.checked) { // if unchecking, remove coupon
alert("remove");
e.stopPropagation(); // don't run parent onclick
}
});
If the <div> click handler looks something like this:
var $boxes = $('div.box');
$boxes.on('click', function ()
{
// do whatever to select the coupon
});
Then the checkbox handler should look something like this:
$boxes.find('input[type="checkbox"]').on('click', function (event)
{
event.stopPropagation();
// do whatever to deselect the coupon
});
See event.stopPropagation().
You have to cancel bubbling. See here for an explanation.
You can use the jQuery Alternative, or create sub-elements with onClicks that don't target your checkbox. you might be able to use something like this also.
document.getElementById('element').checked.onreadystatechange=function(){
//code
}
good luck