Here's the problem: I have a simple form with three buttons and some hidden input fields. Depending on the button pressed (different name="" values), the action does something different.
I am now trying to add a confirmation dialog box to this form by doing this:
<form method="POST" action="/action" onsubmit="return confirmFormSubmit(this);">
<input type="submit" name="one" value="This">
<input type="submit" name="two" value="That">
<input type="submit" name="three" value="Something else">
</form>
<script type="text/javascript">
function confirmFormSubmit(obj)
{
window.event.preventDefault();
jConfirm('Are you sure you want to do this?', 'Awaiting confirmation', function(r) {
if (r == true) {
obj.form.submit();
} else {
return false;
}
});
}
</script>
When I click OK, the action happens, but the input button is not submitted.
Doing 'document.location = obj.form.action;' is not an option because that will not submit the POST parameters.
How can I make the damn thing submit the input fields and not just call the action?
I think that it is because the onsumit method overrides the action in your form declaration.
I would actually change the button of the form and make it a button linked to a javascript method that performs required tests and submit values to the right action.
<form method="POST" action="/action">
<a href="javascript: confirmFormSubmit(this)">
<input type="button" name="three" value="Something else">
</a>
</form>
something like this should be working
Related
I have created a global function to add a loading effect to my submit buttons in my forms :
// add loading effet for forms
$('form').not('.form-ajax').on('submit', function() {
btnLoad($(this).find('button[type="submit"]'));
});
It just shows a loader on the submit button, and disable it.
It works, but sometimes I want to show confirm before submitting :
<form method="post"
action="/delete/post"
onsubmit="return confirm('Do you want to delete this post ?');"
>
<input type="hidden" value="2" name="id" />
<button type="submit">
Delete post
</button>
</form>
So it shows the loader on my button, but the form is not submitting if the user click no on confirm dialog.
Can I catch it easily ? To show loader on if form is really submitted ?
it'll help u:
<form method="post"
action="/delete/post"
onsubmit="return validate(this);"
>
<input type="hidden" value="2" name="id" />
<button type="submit">
Delete post
</button>
</form>
<script>
function validate(form) {
// validation code here ...
if(!valid) {
alert('Please correct the errors in the form!');
return false;
}
else {
return confirm('Do you really want to submit the form?');
}
}
</script>
With AngularJS, how can I show an error message for a checkbox after a click on submit button if the checkbox isn't checked?
I tried this :
<form action="/" method="post" name="myForm" novalidate>
<label>
<input type="checkbox" name="myCheckbox" ng-model="myCheckbox" value="1" required>
</label>
<p class="error" ng-show="myForm.$submitted && myForm.myCheckbox.$error.required">Error message</p>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>
But it didn't work. When I click on submit button, nothing is happening. If I remove "novalidate" on form tag or "ng-disabled" on submit button, the form is submitted even if the checkbox is not checked.
Can you help me please ?
You have ng-disabled="myForm.$invalid" in your submit button, so the submit event never is fired (because the button is disabled when the form is invalid) and thus the condition ng-show="myForm.$submitted && myForm.myCheckbox.$error.required" never is fulfilled because myForm.$submitted is false.
Edit:
As some other users here have suggested, I think your best bet would be if you change the way you are doing things right now. I can think in tow solutions (very similar), but they includes sending the request "the angular way"
Solution 1:
Handle you form submission with angular like this:
Put in your form something like this (note that I deleted the action="/" method="post" part:
<form ng-submit="onSubmit(myForm)" name="myForm" novalidate>
and remove the ng-disabled="myForm.$invalid" from your submit button. Then it would be like this <button type="submit">Submit</button>
... and in the controller
$scope.onSubmit = function(form){
if(form.$invalid){
//... do your call to backend here as you like since the call directly from the form was removed
}
}
Solution 2:
As well change form like this: <form name="myForm" novalidate>
... change your submit button like this: <button type="submit" ng-click="onSubmit(myForm)">Submit</button>
... and use the same function declared in the controller
$scope.onSubmit = function(form){
if(form.$invalid){
//... do your call to backend here as you like since the call directly from the form was removed
}
}
Otherwise you have to change your condition like this
ng-show="myForm.myCheckbox.$error.required"
but this will show the message before the form is submitted
Remove myForm.$submitted because it is never fulfilled (As Asiel Leal mentioned) and also you have put ng-disabled on submit button, so safe to use.
<form action="/" method="post" name="myForm" novalidate>
<label>
<input type="checkbox" name="myCheckbox" ng-model="myCheckbox" value="1" required>
</label>
<p class="error" ng-show="myForm.$dirty && myForm.myCheckbox.$error.required">Error message</p>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>
Try this working example :
var app = angular.module('myApp',[]);
app.controller('myController',function( $scope ) {
$scope.validate = function() {
alert('submitting..');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app= "myApp" ng-controller="myController">
<form name="myForm" ng-submit="myForm.$valid && validate()" novalidate>
<input type="checkbox" name="checkb" ng-model="formData.checkb" required/>
<span ng-show="submitted == true && myForm.checkb.$error.required">Please select the checkbox to proceed.</span>
<input type="submit" value="Submit" ng-click="submitted = true"/>
</form>
</div>
I know how to submit a form from outside the form, for example:
<form action="Get?id_sec=120" method="post" id="form15" name="form15" style="display:none"></form>
<input type="submit" class="finish-button primary-button button" border="0" value="Limpar pedido" form="form15" onclick="javascript:document.form15.submit();" />
But I want to put a tag with a reference to the form with javascript too, because command form="example" doesn't work in Internet Explorer.
example:
<input class="input-cep" name="pr001" id="cepfrete" type="text" form="form15"/>
or
<input type="radio" name="tipofrete" value="4" form="form15">`
How can I do that?
Hey Vince, thanks, this works. Very useful help! I need just one other thing. How can I put an input and select in the same form in jQuery?
example:
<input type="text" data-form="dataForm" name="external-input-2">
<Select id="selectField_1" name="selectField_1" data-form="dataForm" >
<option value="52" data-form="dataForm">A</option>
</Select>
To submit a form from outside the form:
HTML
<form id="theForm">...</form>
<button id="submitTheForm">Click to Submit</button>
jQuery
$('#submitTheForm').on('click', function() {
$('#theForm').submit();
});
To include external inputs in the form submission:
HTML
<form id="theForm">...</form>
<button id="submitTheForm">Click to Submit</button>
<input type="text" data-form="theForm" name="external-input-1">
<input type="text" data-form="theForm" name="external-input-2">
jQuery
You can append the external inputs as hidden inputs to the form:
$('#submitTheForm').on('click', function() {
var form = $('#theForm');
$('input[data-form="theForm"]').each(function() {
var input = $(this);
var hidden = $('<input type="hidden"></input>');
hidden.attr('name', input.attr('name'));
hidden.val(input.val());
form.append(hidden);
});
form.submit();
});
I'm not sure that I can completely understand your question but if you are asking how to submit a form externally in different situations, her is my answer.
For the future, just put an id on the form like this.
<form id="form15"></form>
Then to submit this form from anywhere, all you have to do is call the following javascript line in an onclick, a function, etc.
document.getElementById("form15").submit();
I have a form that has two different submit-buttons that should submit to different pages.
HTML:
<form id="campaign" method="post" enctype="multipart/form-data">
<input type="submit" value="Promote!" name="ap_promote" onsubmit="promote('?page=campaigns&id=<?php echo $campaigns_id?>&edit=true&test=2')" id="ap_promote">
</form>
Javascript:
function promote(action)
{
if (confirm('Are you sure you want to promote this campaign?'))
{
document.getElementById('campaign').action = action;
document.getElementById('campaign').submit();
}
else
{
return false;
}
}
As you see, it should send the form to ?page=campaigns&id=#&test=2. The problem is that it doesn't show any confirmation box and it just sends the form to itself, and not to the specified url.
Buttons don't have onsubmit event, it's a form event. Since you plan to have different actions per depending on clicked button, you can use combination of button onclick and form onsubmit events. Check it out:
<form id="campaign" method="post" enctype="multipart/form-data" onsubmit="return promote()">
<input type="submit" value="Promote!" name="ap_promote" onclick="this.form.action='one'" id="ap_promote" />
<input type="submit" value="Promote!" name="ap_promote" onclick="this.form.action='two'" id="ap_promote" />
</form>
And JS code becomes as simple as:
function promote() {
return confirm('Are you sure you want to promote this campaign?');
}
Change onsubmit="promote(..." to onsubmit="return promote(..." in your button click handler
I hope this will help you.
You should use the button instead of submit button
<form id="campaign" method="post" enctype="multipart/form-data">
<input type="button" value="Promote!" name="ap_promote" onclick="promote('?page=campaigns&id=<?php echo $campaigns_id?>&edit=true&test=2')" id="ap_promote">
</form>
I am trying to disable a button on click, as well as change the text of the button. here is my code:
<input type="submit" value="Register" name="submit" id="submit" onClick="javascript:replaceButtonText('submit', 'Please wait...'); document.form1.submit.disabled=true;">
What is happening, is the button gets disabled, and the text changes, but the form does not do anything (submit). what am I doing wrong?
This works:
<html>
<body>
<form name="form1" method="post" action="myaction">
<input type="text" value="text1"/>
<input type="submit" value="Register" name="submit" id="submit"
onclick="javascript: replaceButtonText('submit1', 'Please wait...'); document.form1.submit.disabled=true; return true; ">
</form>
</body>
</html>
Form controls with a name are made available as named properties of the form they are in using their name. So:
document.form1.submit
refers to the button, not the submit method.
Writing:
< ... onclick="javascript:..." ...>
means that "javascript" is treated as a useless label, just don't do it. If you want the button to become disabled and change its label when the form is submitted, then use something like:
<form>
<input name=foo value=bar>
<input type="submit" onclick="
this.value='Please wait...';
this.disabled = true;
var theForm = this.form;
window.setTimeout(function(){theForm.submit();},1);
">
</form>
and let the form submit normally.
Of course the function in the onclick attribute should be a function call rather than a slab of code, but you get the idea.