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.

onclick vs. $.post how to isolate a button function vs. submission? [duplicate]

I just found out that every time onclick event for my <button> placed inside <form> tag triggers, form submits it's data as if i clicked <input type='submit'>.
I don't want that. Buttons inside my form serve other task, form shouldn't submit data after i clicked one of them.
To be more clear, i want this code:
<form action="http://www.google.com" method="POST">
<button onclick="alert('hi!')">Button</button>
<br>
<input type="submit" value="submit"/>
</form>
to show alert "hi!" when i click on the Button and it shouldn't open Google after that. It should only show Google when i press "submit".

Specify type="button":
<button type="button" onclick="alert('hi!')">Button</button>
From the linked article:
This [submit] is the default if the attribute is not specified

Try this..
onclick="alert('hi!'); return false;"

With jQuery use a span rather than an input, put use the .button call and then set a click event.

Firefox trying to send form to same page on pressing enter without target defined in form tag

I have a little problem with Firefox and forms.
I have a form that is dynamically loaded from an external file from the same server trough an XMLHttpRequest(); that has no set target and no direct submit button but sends its data trough a Javascript function, looks like this:
<form name="blahform">
<input type="text" name="blubb">
<input type="button" value="Barfoo" onclick="return someFunction(this.form);">
<input type="hidden" name="id">
</form>
The problem is that Firefox sends this to the forms page, completely ignoring my Javascript code of course. It works if i don't press enter but use the button directly, but i want him to ignore the enter key completely or at least only call the Javascript routine and not try to send the whole thing into nirvana, reloading the page. (And yes, there is a XMLHttpRequest(); waiting behind that Javascript function for that data. ;) )
So, how to tell Firefox to do what i want and not what he thinks is best?
BTW, i have started the form with "submit" instead of "button" and changed to "button" in the hope that this solves the issue, but no luck with that.
EDIT:
Solution, thanks to Mike and Riateche:
Used an onsubmit="return false;" inside the < form >-tag and it works like expected now.

You need to use the <form>'s onsubmit event instead of onclick event of buttons.

html/javascript/php run script onclick checkbox

This should be a very easy thing to do but I can't find a good reference on how to do it.
I want to submit a form upon clicking a checkbox. To make it a one click process and save user the step of clicking the check box and then clicking form submit, I'd like the form to be submitted upon clicking the checkbox.
My question is do I need to call a javascript function to do this or can html do this natively?
<form action="post.php" method="post"><input type="checkbox" name="done" id="done" value="1" onclick="post.php"></input></form>
doesn't seem to work. Do I have to call a javascript function, or am I missing something simple. Thanks

Try to replace
onclick="post.php"
By
onclick="submit();"

Try onclick="this.parentNode.submit()"

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.