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.

Using Onsubmit function with php

I am trying to use onsubmit javascript event with my php code.
So I have a screen in which I am allowing a user to select a record to delete,when the user presses the submit button.
But I want the user confirm his action when he presses the submit button by displaying a popup by using javascript
I have added onsubmit event like this
<input type="submit" value="Submit" onsubmit="confirm('Are you sure you wish to delete this record?')" />
But no pop up or alert message is displayed.

Try putting the onsubmit attribute in the <form> tag instead of the <submit> tag.

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

Adding extra submit function to dynamically populated jquery .submit

Background
Okay, I have a unique web application, and after reading around on SO and some great other questions, I am still scratching my head as to how I can accomplish this feat. The end result: I must add a cancel button to a form which has populated input fields dynamically after a link click... It is a third stage function which is being activated, and must be able to be run solely within the context of the dynamic form (because there are other modal form windows on the same page)... please follow below for the flow. Any suggestions are much appreciative.
Steps Followed that end input form is affected by
1) User clicks on a link.
2) Modal window opens with dynamically populated fields
3) AJAX/JSON method pulls information through mysql
4) div's and spans populated inside modal window
5) Edit links are added for corresponding fields... Registers event handler to listen to user either clicking "edit", or closing modal window.
6) If user clicks edit, input fields appear, as well as a submit button.
7) on submit,
a) deactivate all other event handlers on other "edit" links
b) send ajax/json
c) activate all other event handlers
d) hide all input fields and 'reset' the modal window for next item edit
html
<form id="updation_station" action=''>
<div class="view_info">
Test 1:<span class="view_test_1"></span>
Edit
<span class="edit_test_1_input"><input type='text' name='test_1_input' /></span>
</div>
<div class="view_info">
test_2:<span class="view_test_2"></span>
Edit
<span class="edit_test_2_input"><input type='text' name='test_2_input' /></span>
</div>
<input type="submit" name="update" id="change_btn" value="Save Changes" />
<input type="submit" name="cancel" id="cancel_btn" value="Cancel" />
</form>
In order to accomplish what I needed, I run $('.edit_link').on('click', doUpdate); to execute the function of the updater... as follows
function doUpdate(e) {
// show input fields, sets variables, etc....
// Turn off the event handler for all the other edit links
$('.edit_link').not(this).off('click', doUpdate);
//Now open the listener for the submit form
$('#updater').submit(function() {
//Now close the editing fields
//closes edit fields, etc...
$.ajax({//do something });
//Now reset the event handlers so the links are re-activated regardless of what was clicked
$.ajax().always(function() {
$('.edit_link').on('click', doUpdate);
});
return false;
});
// hides input fields, etc.... and tells client to go on merry way
};
Unfortunately, I am extremely weary to change the $('#updater').submit(function() { action itself due to complications with some other omitted functionality... I would prefer to only append functions to it and/or touch the html portion, such as..if ($submitted_value == "cancel") { //cancel} else {//act}, but that seems to be an issue because any submit button itself will activate the form itself.
Anyone have any ideas? Snippets That may help?
Hopefully the experts of SO will be a better guide on how I can go about this...
Thank you in advance.

May not be best practice.. but might work
anonymous call
<input type="button" name="cancel" id="cancel_btn" value="Cancel" onclick="$(this).parent().hide()" />
anonymous if two elements deep
<input type="button" name="cancel" id="cancel_btn" value="Cancel" onclick="$(this).parent().parent().hide()" />
hide by div id or class
<input type="button" name="cancel" id="cancel_btn" value="Cancel" onclick="$(".formDiv").hide()" />

JavaScript To Clear Form Field On Submit Before Form Submission To Perl Script

We have a very long form that has a number of fields and 2 different submit buttons. When a user clicks the 1st submit button ("Photo Search") the form should POST and our script will do a search for matching photos based on what the user entered in the text input ("photo_search_text") next to the 1st submit button and reload the entire form with matching photos added to the form. Upon clicking the 2nd submit button ("Save Changes") at the end of the form, it should POST and our script should update the database with the information the user entered in the form.
Unfortunately the layout of the form makes it impossible to separate it into 2 separate forms. I checked the entire form POST and unfortunately the submitted fields are identical to the perl script processing the form submission no matter which submit button is clicked so the perl script can't differentiate which action to perform based on which submit button is pushed. The only thing I can think of is to update the onclick action of the 2nd submit button so it clears the "photo_search_text" field before the form is submitted and then only perform a photo search if that fields has a value.
Based on all this, my question is what does the JavaScript look that could clear out the "photo_search_text" field when someone clicks on the 2nd submit button? Here is what I've tried so far none of which has worked successfully:
<input type="submit"
name="submit"
onclick="document.update-form.photo_search_text.value='';"
value="Save Changes"
>
<input type="submit"
name="submit"
onsubmit="document.update-form.photo_search_text.value='';"
value="Save Changes"
>
<input type="submit"
name="submit"
onclick="document.getElementById('photo_search_text')='';"
value="Save Changes"
>
We also use JQuery on the site so if there is a way to do this with jQuery instead of plain JavaScript feel free to provide example code for that instead. Lastly, if there is another way to handle this that I'm not thinking of any and all suggestions would be welcome.
Thanks in advance for your help!

If you give the input an ID like this:
<input ID="nosearch" type="submit" name="submit" value="Save Changes">
You can do it via jQuery a bit easier, like this:
$(function() {
$("#nosearch").click(function() {
$("#photo_search_text").val("");
});
});