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()"
Related
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>
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.
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.
I want to scrap a website that changes content after modifying a <select> that has an attribute onchange="this.form.submit()". So I need to know how form.submit() works so I can simulate it.
All it does is submit the parent form as would normally happen if you clicked a <input type="submit" /> button.
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.