Django Alert message On Submit - javascript

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>

Related

Phantom JS Clicking Buttons - wait for page fully load

I'm trying to log into a site using Phantom JS so I can keep on top of my suppliers prices.
Username and password are being entered but the login button is not pressing.
If the login button is a <input> instead of <button>, .click() should work, however I cannot find a way to press the <button>.
The Log in form has no ID,NAME or ACTION to target a submit.
If anyone knows a solution I would be very grateful
thanks
Phantom JS
//username entered automatically on load
document.getElementById("password").value="1234";
document.getElementById('btn-login').click();
Login Form
<form onsubmit="return false;" method="post">
<fieldset class="customer-login">
<div class="form-group">
<label for="name">Email Address</label>
<input type="username" class="form-control" id="username" placeholder="Enter your email address">
</div>
<div class="form-group">
<label for="name">Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter your password">
</div>
<button type="submit" id="btn-login" class="btn btn-primary btn-block">
Log In
</button>
<hr>
<button type="button" id="btn-signup" class="btn btn-default btn-block">
Sign Up
</button>
<button type="button" id="btn-reset" class="btn btn-default btn-block">
Forgotten your password?
</button>
</fieldset>
</form>
result after running script
UPDATE
document.getElementsByClassName('btn btn-primary btn-block')[0].click();
works however as nothing returns and it redirects, it stops the program before it goes back to the home page logged in.
Has anyone got a solution to get the program to wait (when it doesnt know its redirecting.)?
i tried
do { phantom.page.sendEvent('mousemove'); } while (page.loading);
When submitting the form, nothing was returned, so the program stopped.
The program did not wait for the page to load as it took a few seconds for the redirect to begin.
telling it to move the mouse until the URL changes to the home page gave the browser as much time as it needed to change. then telling it to wait for the page to finish loading allowed the page to full load before the content was grabbed.
page.evaluate(function () {
document.getElementsByClassName('btn btn-primary btn-block')[0].click();
});
do { phantom.page.sendEvent('mousemove'); } while (page.evaluate(function()
{
return document.location != "https://www.bestwaywholesale.co.uk/";
}));
do { phantom.page.sendEvent('mousemove'); } while (page.loading);

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;
});

Form submission canceled because the form is not connected

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.

Facebook Tracking Pixel On a Button Event

I'm trying to set up a facebook tracking pixel on my website. I need the pixel to be triggered on the submission of a contact form. My contact form does not redirect to a new page on submission, so i need to place the pixel to "track event on in-line action".
This is the snippet facebook have given me:
<button id="submitButton">Generate lead</button>
<script type="text/javascript">
$('#$submitButton').click(function() {
insert_event_code_here;
...
</script>
And this is my current button Script:
<form role="form" method="post" id="contactForm">
<!-- my form fields -->
<div class="col-md-12">
<button type="button" id="submit" name="submit" class="btn btn-primary pull-right control-submit">Send!</button>
</div>
How do i splice these two bits of code together to make a working facebook pixel triggered when the user clicks the send message button?
Also, where the facebook code says "insert_event_code_here;" what is this?
Many thanks everyone!
If you simply want to track the click on the button you can trigger an event with something like the sample code at https://developers.facebook.com/docs/marketing-api/audiences-api/pixel#inpageevents
<form role="form" method="post" id="contactForm">
<!-- my form fields -->
<div class="col-md-12">
<button type="button" id="submit" name="submit" class="btn btn-primary pull-right control-submit" onclick="fbq('track', 'Purchase');">Send!</button>
</div>

How can we stop the data being send whenever there in invalid popover message in the form of bootstrap?

The problem in this form is whenever the empty field is entered it shows a popover "saying this field is required", but the message is posted into the database.
How can I stop this until all of the popover is made valid?
<form class="form-asd" role="form">
<h2 class="form-signin-heading">Login</h2>
<hr />
EmailAddress:
<input class="form-control" type="text" id="Address" required />
<br />
<button type="submit" class="btn btn-lg btn-primary" id="btnLogin">
Login
</button>
</form>
This really has nothing to do with Bootstrap. You can use Bootstrap to do the validation UX, but your question is about halting form submit until certain requirements are met.
$('#myForm')submit(function(e) {
e.preventDefault();
// do validation, present popovers, etc.
if (validation is good) {
$(this).submit();
}
});

Categories