Button didnt disable inside the form - javascript

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.

Related

How To Update Hidden Field In Django Form

I am trying to figure out the best approach to modifying a hidden django form field. Or if it's even possible. I had my HTML setup to accomplish this very task and it was working perfectly. However, in order to prevent multiple submissions I had to change my HTML and now I am unable to figure out how to pass a value via an HTML button depending on what the user clicks on.
Previously, I had two buttons defined as outline below:
<button type="submit" class="button1" name="status" value="Saved"><h3 class="txtalgn4">Save</h3></button>
<button type="submit" class="button2" name="status" value="Submitted"><h3 class="txtalgn4">Submit</h3></button>
As stated above, this worked perfectly for the purpose of passing a value to an attribute for my model. The value of status was saved as expected depending on which button the user clicked on.
Now I have updated the buttons to type="button" in response to this issue that I opened up today...How To Prevent Double Submit With Form Validation
I tried using the following code:
<button type="button" class="button1" name="status" value="Saved"><h3 class="txtalgn4">Save</h3></button>
<button type="button" class="button2" name="status" value="Submitted"><h3 class="txtalgn4">Submit</h3></button>
And then I also changed the status field to {{ status.as_hidden }} in my HTML to get the value. This only works if I hardcode the status value in my database structure. I need to be able to get this value dynamically depending on what the user clicks. Is JQuery with Ajax the right approach for this? Is there some simple way to modify the hidden field depending on which button the user clicks?
Is there some better way to go about trying to get this field in a hidden manner? As stated above the HTML way with type="submit" worked perfectly, but caused problems when I was trying to prevent the user from double submitting the form. As in all things programming I solved one problem and created another.
Thanks in advance for any thoughts.
Keep using two submit buttons like you were. But instead of disabling the buttons, you disable the whole form from submitting if once submitted.
First, give your form a unique html ID.
<form id="myform">
...
</form>
<!-- JS code -->
<script type="text/javascript">
$('#myform').on('submit', function(e) {
if ($(this).hasClass('submitted')) {
// prevent submission
e.preventDefault();
return;
}
$(this).addClass('submitted');
});
</script>

How to submit two forms on 2 different .htm files to the same place

I'm trying to essentially have the submit button of search.htm be able to create a pop up with a text area which the users are required to enter a comment describing their actions and click the submit button in the pop up to effectively submit both forms to the same processing page. Both the forms in search.htm and frm_comment.htm will submit both sets of data back to search.htm which calls cfinclude on the server processing logic (server.htm).
In the below code I'm having the the "createPeriod" button submit everything that is in the "srch" form. It is also creating a pop up window which has a html textarea that allows the user to enter a comment. There is a reason that I need to split up the main form from the comment form (frm_comment.htm) but it's very specific to the task I'm trying to accomplish.
search.htm is structured roughly as such:
//include the template here to process the forms
<cfinclude template="../server.htm">
<cfform method = "post" action = "search.htm" name="srch" format="html">
<table>
//bunch of form fields here
.
.
.
.
//bunch of form fields here
<cfinput type="submit" name="createPeriod" value="Create"
onClick="ColdFusion.Window.create('comment', 'CommentBox',
'frm_comment.htm', {center:true,modal:true})">
</table>
</cfform>
I've tried to change the submit button in search.htm to just a cfinput type="button" because keeping it as a submit will make it so that the comment box will appear for a brief moment while the page reloads and disappear as soon as the page reloads. However, I was unable to preserve the form data from search.htm when changing the submit button to a regular button.
I've also tried to have my comment form's submit button's onClick function call a javascript function to submit both forms (to no avail) like so:
submitForms = function(){
document.forms["srch"].submit();
document.forms["srch1"].submit();
}
<cfinput type="button" name="submitComment" value="Submit" onClick="submitForms()"/>
Please advise on the best way to accomplish this task, sorry about the messy code.
This a very basic example, on how to have your 2 forms in one. The JavaScript will just show the comment form when the user clicks on "Search".
<!DOCTYPE html>
<html>
<head>
<style>
#hiddenStuff {
display: none;
}
</style>
</head>
<body>
<form action="...">
// search fields here
<input type="button" value="Search" onclick="document.getElementById('hiddenStuff').style.display='block';">
<div id="hiddenStuff">
// comment form stuff here
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>
I also made a fiddle, if you want to see the result in action.
Sorry I'm not familiar with ColdFusion, but it shouldn't be too hard for you to translate :)

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()"

Clicking submit button of an HTML form by a Javascript code

I don't know much about WEB probramming, so feel free to ask if I'm missing any details.
There is a certain website which I'm visiting very frequently, and it requires users to log in every time they visit. For the login page of this website, I'm trying to write down a userscript which will automatically log me in.
I managed to fill in the form fields, but don't have any idea how to click the submit button by JavaScript. The below is a condensed version of the original login code. How can I automatically click this submit button in this code?
<div id="start">
<div id="header">
<div id="login">
<form id="loginForm" name="loginForm" method="post" action="#">
// ...
<input type="submit" id="loginSubmit" onclick="changeAction('submitInput','loginForm');document.forms['loginForm'].submit();" value="Log in" />
// ...
</form>
</div>
</div>
</div>
The usual way to submit a form in general is to call submit() on the form itself, as described in krtek's answer.
However, if you need to actually click a submit button for some reason (your code depends on the submit button's name/value being posted or something), you can click on the submit button itself like this:
document.getElementById('loginSubmit').click();
document.getElementById('loginSubmit').submit();
or, use the same code as the onclick handler:
changeAction('submitInput','loginForm');
document.forms['loginForm'].submit();
(Though that onclick handler is kind of stupidly-written: document.forms['loginForm'] could be replaced with this.)
You can do :
document.forms["loginForm"].submit()
But this won't call the onclick action of your button, so you will need to call it by hand.
Be aware that you must use the name of your form and not the id to access it.

Categories