We Keep Coding

creating an alert that shows when form is submitted

I'm trying to create a function in javascript that gets an alert to show up when you click the submit button. I managed to get the alert to show but it only pops up when you open the page but doesn't work when you click the submit button.
heres the function i created in javascript
function orderTics(){
//creates alert
var orderTotal=35;
alert("Your order total is $"+orderTotal);
}
I called the function in html like this:
<script>
orderTics();
</script>
I'm still very much a beginner so any and all tips will be greatly appreciated

You can use the below.
$("#FormSelector").on("submit", function() {
//Your code goes here
});

You could use the on submit function like this:
$("form.class-name").on("submit", function() {
alert("I've been submitted.");
});
Vanilla JS onsubmit event:
document.querySelector("form.class-name").addEventListener("submit", function() {
alert("I've been submitted.");
}, false);
You can also use the event.preventDefault(); method to prevent the form from going to another page, like this:
$("form.class-name").on("submit", function(event) {
even.preventDefault();
alert("Do stuff");
});
Vanilla JS onsubmit event with event.preventDefault(); method:
document.querySelector("form.class-name").addEventListener("submit", function(event) {
event.preventDefault();
alert("I've been submitted.");
}, false);
NOTE: when you use the event.preventDefault(); method the form won't redirect to the target page, even if you click the ok button in the alert box.
Finally you can just use the click event on the submit button, like this:
$("button.submit-button-class").on("click", function() {
alert("I've been clicked!");
});
Vanilla JS onclick event:
document.querySelector("button.submit-button-class").addEventListener("click", function() {
alert("I've been clicked!");
}, false);

Call your function like this:
<input type="button" value="myButton" onclick="orderTopics();">

Alert confirmation issue

I have a button on which when the user clicks to delete project on the site a confirmation pops up , I am using alertify.js for this I have the button etc working however when clicking delete the confirmation box appears and automatically deletes project and vanishes before I can either click ok to confirm or cancel.. ?
here is the html
<button type="submit" class="btn btn-link btn-sm" Onclick="return ConfirmDelete();" style="margin:5px;"></button>
here is javascript code
function ConfirmDelete()
{
alertify.confirm("This is a confirm dialog", function (ev) {
ev.preventDefault();
alertify.success("You've clicked OK");
}, function(ev) {
ev.preventDefault();
alertify.error("You've clicked Cancel");
});
}
how can I prevent this from happening ?

You can't prevent form submission in this case because custom confirmation is non-blocking asynchronous dialog. You can stop it however by always returning false and submitting form manually (programmatically) in case of Ok button press:
function ConfirmDelete(button) {
alertify.confirm("This is a confirm dialog", function() {
button.form.submit()
// alertify.success("You've clicked OK", function() {
// button.form.submit()
// });
}, function() {
alertify.error("You've clicked Cancel");
});
return false;
}
For this make sure to pass button reference to your function:
<button type="submit" onclick="return ConfirmDelete(this)">ConfirmDelete</button>

Bootstrap Modal Instead of Javascript Alert Function

I am learner in JavaScript. I need a bootstrap modal instead of a alert inside a java script function. I did some changes, but i couldn't find the right solution. Please check my code and provide me with a solution. Thanks in advance.
<a id="deleteButton" onClick="delete_Vehicle()" class="alert" data-toggle="tooltip" title="Delete">
<script>
function delete_Vehicle() {
if (confirm('Do you want to delete the selected VEHICLE?')){
DeleteDevice();
}
}
</script>
This is the bootstrap modal alert function i am working on
$(document).on('click', '.alert', function(e) {
bootbox.confirm("Really delete this item?", function(result) {
if(result !== true){
e.preventDefault();
}
});
});
In the popup if the ok button is clicked and confirmed to delete, this function should get executed
DeleteDevice();

The result callback argument determines whether user confirmed the action or not, so you should check if it's true and then call DeleteDevice().
bootbox.confirm("Really delete this item?", function(result) {
if (result === true) {
DeleteDevice();
}
});

jquery modal dialog before form submit

I have a form on a page, and I am trapping the click action on two submit buttons. There is another submit button that is not trapped (i.e. I dont need to show a modal for this button).
So, my obvious problem is that I need to block the submit action when the modal first opens, and I then need to force the submit when the user actually clicks the OK button in the modal. However, because each button has a specific name and value associated with it (which the back-end script needs to know), a $('#myform').submit() method will therefore not work.
function something(msg) {
var $dialog = $('<div></div>').html(msg).dialog({
autoOpen: false,
title: 'Please confirm...',
modal: true,
buttons: {
"OK": function () {
$dialog.dialog('close');
//submit needs to happen here
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
event.preventDefault();
return false;
}

I would include a hidden field to take on the name and value of the submit button clicked:
<input type="hidden" name="subName" value="" />
$("#submit_button_one").function() {
$("input[name='subName']").attr("name", $(this).attr("name")).val(($(this).val());
something("message");
return false;
});
$("#submit_button_two").function() {
$("input[name='subName']").attr("name", $(this).attr("name")).val(($(this).val());
something("message");
return false;
});
function something(msg, act) {
// ...
//submit needs to happen here
$('#myform').submit()
}

jquery simple modal and insert on database

i am using jquery.simplemodal-1.1.1 and jquery-1.2.6.min to create a modal popup.
this is my problem:
i can display the windows, can insert values, fiels, ecc.
i have 2 buttons, save and close. when i click on save button, it triggers an event that execute, from code behind, an store procedure that insert some dates on my db.
the problem is, when i click on close button. I open the modal windows, don't do anything and click on cancel. Close the modal windows. i open again the modal windows, fill the fields and click on save. The program execute 2 times the event of the save button and then insert 2 times the same information on the DB.
this is the javascript code what i am using:
$(document).ready( function()
{
$("#nuovoT").click(function(ev) {
ev.preventDefault();
$("#TextBoxPrenot").val("");
$("#msg").text("");
//Open the popup container
$("#addTrasport").modal({
onOpen: modalOpenAddCustomer,
onClose: modalOnClose,
persist: true,
containerCss: ({ width: "500px", height: "275px", marginLeft: "-250px" })
});
});
});
function modalOpenAddCustomer(dialog) {
dialog.overlay.fadeIn('fast', function() {
dialog.container.fadeIn('fast', function() {
dialog.data.hide().slideDown('slow');
});
});
dialog.data.find(".modalheader span").html("TITULO");
// if the user clicks "yes"
dialog.data.find("#ButtonConferma").click(function(ev) {
/*Valida se si compila almeno uno dei due campi*/
$("#msg").val("");
if ( ($("#TextBoxTrasp").val() == '') ){
$("#msg").append("* Devi immetere il nome del trasportatore <br/>");
ev.preventDefault;
return false;
}
else{
}
$.modal.close();
$("#ButtonHiddenAddCustomer").click();
});
dialog.data.find("#ButtonCancel").click(function(ev) {
ev.preventDefault();
$.modal.close();
return false;
});
}
What i am doing wrong???
thx in advance!!!

The problem is that your modalOpenAddCustomer routine is adding the click event onto the button each time the modal is opened. Therefore on the second time around, there are 2 click events on the same button.
Either: Initialise the click event outside the modalOpen... routine - ie within the (document).ready function.
Or: use 'one' instead of click:
dialog.data.find("#ButtonConferma").one('click', function(ev) {