Form submission canceled because the form is not connected - javascript

I have these html button:
<form ngNativeValidate (ngSubmit)="onSubmit()" #add_form="ngForm">
<button class="btn btn-primary " type="submit[disabled]="!add_form.valid">ADD</button>
<button class="btn btn-default" (click)="back()">Back</button>
</form>
And I obtain this warning in the console:
Form submission canceled because the form is not connected
Anyone can help me to resolve this warning?

For your Back button, add type="button" to the declaration, like this:
<form ngNativeValidate (ngSubmit)="onSubmit()" #add_form="ngForm">
<button class="btn btn-primary " type="submit[disabled]="!add_form.valid">ADD</button>
<button type="button" class="btn btn-default" (click)="back()">Back</button>
</form>
What's happening, is that Angular interprets the second button as another submit button, and so you're effectively navigating in the middle of a submit. That's why the messages tells you that form submission is being cancelled.

Related

bootstrap form validation button redirection

I have create a simple form validation which uses validator.js
What actually happens after the user presses the register button data is sent and user stays on the same page.
What i really want to get is that after user pressing register button it will be redirected to other page that is info.html which shows the message thank you for registration, Check mail for confirmation etc.
Here is the button I want to have a redirect function
<form>
<div class="form-group">
<button class="btn btn-primary" type="submit">
Submit
</button>
</div>
</form>
I tried this in the following way
<div class="form-group">
<button class="register100-form-btn">
<a class="fa fa-long-arrow-right m-l-7" href="/info.html">Submit</a>
</button>
</div>
it's now redirecting it to the other page but without a check validation form
All fields can remain empty which makes no sense for register form.
one way would be to add a click event listener to the button and redirect to your desired view once clicked. Have your html as:
<div class="form-group">
<button id="submit" class="btn btn-primary" type="submit">
Submit
</button>
</div>
and then the following JS,
document.getElementById("submit").addEventListener("click", function(event){
let url = "http://mybaseurl/info.html"
window.location.href = url;
});

Django Alert message On Submit

I am trying to display a simple alert message once a user clicks the Save and Email to Corporate button inside of a modal. The modal submits the form and sends an email based on the auth.users group so the load takes a second. I need to alert the user of this after they submit so they do not continue to click the button. I don't need anything fancy, so I am using <div onsubmit="myfunction"> and <script> to display the alert. This worked the first time but that was it.
How would I code this in the <div> and <script> to work every time, or is there better solution?
template.html
</div>
<div class="modal-footer">
<div onsubmit="myFunction">
<input type="submit" form="formset" class="btn btn-primary" value="Save and Email to Corporate">
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
script
<script>
function myFunction() {
alert("The email was submitted");
}
</script>

How to show js message from html action

I have this form in html
<form class="form-horiz" role="form" action="" >
<div class="form-group-1" style="margin-left:5px">
<div class="col-sm-10">
<input type="text" class="form-control" id="adsend" placeholder="Enter your ad" >
</div>
</div>
<div class="form-group-1">
<div class="col-sm-offset">
<button type="submit" class="btn btn-default" name="send" id="send" >Send</button>
<button type="submit" class="btn btn-default" value="classify">Classify</button>
</div>
</div>
</form>
What I need to do is: The user will write something in text and after click on classify button js message will appear to the user with some results, is it possible to do something in action="" or there is another way to do it?
You can use event listeners for button clicks if you'd like instead of form actions. Check out this documentation, hopefully it'll help! I'd suggest something like this:
<form class="form-horiz" role="form" action="" >
<div class="form-group-1" style="margin-left:5px">
<div class="col-sm-10">
<input type="text" class="form-control" id="adsend" placeholder="Enter your ad" >
</div>
</div>
<div class="form-group-1">
<div class="col-sm-offset">
<button type="submit" class="btn btn-default" name="send" id="send" >Send</button>
<button id="classify" type="submit" class="btn btn-default" value="classify">Classify</button>
</div>
</div>
</form>
and then have this in some js file
document.getElementById("classify").addEventListener("click", function () {
// do some js stuff here
});
EDIT:
Another alternative would be to use an onclick attribute, which is also documented in the link I posted before, but this is a little antiquated, and your function has to be named in the global scope and it's not really a good idea in general. I'd go with an event listener!
I would suggest you to have jQuery added into your Application. It makes your life easier in your construction.
Check this https://jsfiddle.net/dqwLv8q7/
I added id in your button and made it preventDefault() as it fire us submit action of your form as you set it "type=submit". So your "classify" click button now just shows Alert message with value of your "adsend" ID input value. You can consider to use another tag and replace it with message to your user.

How to disable a button tag with type submit using jquery or javascript?

Can someone help me figure out how to disable a button tag, with type submit, when a form is submitted? Everything I find is showing me how to disable an input tag with type submit.
What I currently have is:
HTML:
<form method="post" action="addBookingForm.php" id="addBookingForm" name="addBookingForm" class="form-horizontal">
<button class="btn btn-success" type="submit" id="addBooking" name="addBooking" ><span class="glyphicon glyphicon-plus"></span> Add Booking</button>
Jquery:
$('#addBookingForm').on('submit', function() {
$("#addBooking").attr( "disabled", "disabled" );
});
OR:
onsubmit="document.getElementById('addBooking').disabled = 1;"
The problem with this is that it does not submit the page. The easiest solution would be to convert the button to be an input but I was hoping it could be done as a button
Many thanks!
<form method="post" action="addBookingForm.php" id="addBookingForm" name="addBookingForm" class="form-horizontal">
<script>
$(document).ready(function(){
$("#addBooking").attr("disabled", "disabled");
});
</script>
<button class="btn btn-success" type="submit" id="addBooking" name="addBooking" ><span class="glyphicon glyphicon-plus"></span> Add Booking</button>
</form>
This will solve your problem.
In your jquery solution, add the '(this).submit();' line BEFORE the line u use to disable the button

Why JS confirm() won't Cancel the submit action when I hit Cancel in confirm dialog?

I tried to find out where is the problem, but no clue.
I have 4 buttons for one form by using HTML5 multi submit. When I click on DELETE button, a dialog pops out, by using an attribute onclick="confirm('message');. When I hit Cancel, it should stop form submission, close the dialog and stay on the same page without any actions, instead it keeps submitting the form. It works perfectly until now, and I can't find out where is the problem.
<form action="http://google.com/index/25" method="post" accept-charset="utf-8">
<button class="btn" type="submit" name="formSubmit" value="new">New</button>
<button class="btn" type="submit" name="formSubmit" value="save">Bulk save</button>
<button class="btn btn-danger" type="submit" name="formSubmit" value="delete" onclick="confirm('Do you really want to remove a record(s)?.');">Delete permanently</button>
<button class="btn" type="submit" onclick="confirm('stop or proceed');">submit</button>
</form>
And a live DEMO IS HERE on jsbin
Anyone got the same bug ?
Handle it on the form instead of the button, and have the handler return the outcome from the confirm dialog:
<form onsubmit="return confirm('stop or proceed');">
You can also handle the events of each button, but don't forget to return:
<button onclick="return confirm('blabla');">Button</button>
If you wanna use Jquery, you should use this code:
click
JQuery
$(function () {
$(".classTest").click(function (e) {
return confirm("Submit the Post action?");
});
}

Categories