We Keep Coding

Button didnt disable inside the form

greeting developers. i am doing project for university related to Javascript. i create one page got button add and unfriend button which is disable.once user click add button the prompt box appear and after they click Ok for promp, the unfriend button will able to click while add button become disable. if click unfriend, add button will able to click. i don't know how explain it. may be read my question can be headache. sorry for that. my problem is button does not disable,if i never put inside form it work but since i put inside form doesnt work. guys is there any solution please help me
function myFunction(add){
var subject = prompt("Please enter Subject that want to study");
if (subject != null){
document.getElementById("subject").value = subject;
document.getElementById("btn").disabled=false;
document.getElementById("add").disabled=true;
document.getElementById("add").value="request sent";
}
}
function disableButton(btn){
document.getElementById("add").disabled=false;
document.getElementById("btn").disabled=true;
document.getElementById("add").value="Add friend";
form.submit();
}
<form method="post" id="form" enctype="multipart/form-data" autocomplete="off" >
<input type="submit" value="unfriend" id="btn" onClick="disableButton(btn)" disabled/>
<input type="hidden" id="subject" name="subject"/>
<input type="submit" value="add" id="add" onclick="myFunction(add)" /></form>

The "add" and "unfriend" buttons both submit a POST request which is refreshing the page since there is no form action specified. Perhaps you need to read up on HTTP methods. https://www.w3schools.com/tags/ref_httpmethods.asp is a good resource.
If your plan is to add a server side page to handle the request at a later time you can temporarily add the following to the form tag onsubmit="return false".
If you simply want to use the form inputs without submitting the form you should remove form.submit() from the disableButton function and change the types of the add and unfriend buttons from type="submit" to type="button". You can also remove the method and enctype of the form.

Personally I don’t really use forms unless its more than 3 fields.
Two things to think about:
You got the right written idea, you are however missing event.preventDefault(), which will make your website refresh itself, which will then force out everything to refresh.
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
The other is that try between the both buttons as they are both i suggest one myfunction to be onclick in a button tag. just to avoid two inputs types.
Additional:
I suggest you add jquery to make things easier with the toggle function.

Possible way to resolve conflict on click action button

I am using bootstrap library on button:
<input type="submit" onclick="$(this).button('loading')" name="submit" data-loading-text="Loading..." class="btn btn-primary"/>
and this JsFiddle would describe my problem.
However i want to perform both the event synchronously.
two event: 1. text area validation & 2. loading state of button
P.S. after button press, my page is getting reloaded, so no point to include button state 'reset'
Thanks in advance for help

finally got solution:
Either you can apply loading state on form submit event <form method="post" action="" onsubmit="$(this).find('.btn-primary').button('loading')">, like this jSFiddle
or you it can also be handled by this JsFiddle

Why is <input type="button"> submitting a form?

<form name="callEventForm" method="post" action="/PDC/callevent.do">
...
<input type="button" value="Save" name="addCallEvent" id="addCallEvent" onclick="alert('You clicked me!')"/>
...
</form>
When clicking this "Save" button, the form is submitted instead of displaying the alert. I was lead to believe that type="button" would cause the form to not submit on click.

Change:
onclick="alert('You clicked me!')"
To:
onclick="alert('You clicked me!');return false;"

I hate to answer my own questions but this was a weird one. There was an ajax:updateField tag that was overriding the onclick event of the button. Changing the source event of the ajax:updateField allowed my established onclick event to fire appropriately. I know that there's no way anyone would have caught that based on the code I posted, but the rest of the page is so much code that I would hate to make people wade through it.

HTML Button behaving badly

I added a button that is supposed to open a calendar 'date-picker'. The button is in a form that is rendered inside an EXTJS TabPanel. When the button is clicked, it causes the EXTJS tab panel to reload. Even if I remove everything but the following (making it a dumb button) the page still reloads.
<button id="calendar-trigger">...</button>
Edited: derived from: http://www.dynarch.com/projects/calendar/doc/
<input type="text" id="id_activity_date" name="activity_date">
<input type="button" value="..." id="calendar-trigger">
<script type="text/javascript">
new Calendar({
trigger : "calendar-trigger",
inputField : "id_activity_date",
onSelect : function() { this.hide() }
});
</script>
I don't want the reload to happen and I can't figure out why the reload is happening. or how to stop it. Something is getting triggered beyond just the button click. I suspect that EXTJS is causing it, but I can't figure out why.
I would like to start by killing all code that is triggered by this button. I want to make this a dumb button that doesn't do anything when clicked.
What is likely going on here? and How can I fix it?

Try this instead:
<input type="button" id="calendar-trigger" value="Button Label">
I've had trouble with <button> tags trying to submit forms and what not when they should not. Using an <input> tag with a type of "button" seemed to help me - maybe it will work for you as well.
If you have a <button> tag on a form which does not have a submit button (<input type="submit">), the <button> becomes the input button by default, apparently.

In HTML, <button> has a type attribute. The default value for type is submit, meaning that unless you specify type="button" (or something else), the button will trigger the submission of the form it is associated with. That is probably what is causing your page to reload (because the form is being submitted).
Alternatively, you could use <input type="button" id="calendar-trigger" />.

I would recommend using <input> as opposed to <button>
<input type="button" value="Click Me" id="calendar-trigger" />
Typically the <input type="submit" /> will make a submit button when in a form, I suspect that is what the <button> tag is doing.

JavaScript removeChild(this) from input[type="submit"] onclick breaks future use of form.submit() under Firefox

I have come across some strange behaviour, and I'm assuming a bug in Firefox, when removing a input submit element from the DOM from within the click event.
The following code reproduces the issue:
<form name="test_form">
<input type="submit" value="remove me" onclick="this.parentNode.removeChild(this);" />
<input type="submit" value="submit normally" />
<input type="button" value="submit via js" onclick="document.test_form.submit();" />
</form>
To reproduce:
Click "remove me"
Click "submit via js". Note that the form does not get submitted, this is the problem.
Click "submit normally". Note that the form still gets submitted normally.
It appears that, under Firefox, if you remove a submit button from within the click event it puts the form in an invalid state so that any future calls to form.submit() are simply ignored. But it is a JavaScript-specific issue as normal submit buttons within this form still function fine.
To be honest, this is such a simple example of this issue that I was expecting the internet to be awash with other people experiencing it, but so far searching has yealded nothing useful.
Has anyone else experienced this and if so, did you get to the bottom of it?

Seems to be related to the fact that you're removing the node while processing the event.
This indeed looks like a bug from Firefox.
In the meanwhile, this hack seems to work but delaying the removal:
<script type="text/javascript">
function delsubmit(el) {
window.setTimeout(function() {
el.parentNode.removeChild(el);
}, 50);
return false;
}
</script>
<input type="submit" value="remove me" onclick="return delsubmit(this)" />