Develop Reference

How to confirm a firm but set a function in-between?

I got a script that checks every form in my app and if there is one, that gets submitted, it will prevent the submission, toggles a loading screen and then submits the form.
<script>
document.addEventListener('DOMContentLoaded', () => {
const forms = document.querySelectorAll('form');
forms.forEach((form) => {
form.addEventListener('submit', (e) => {
e.preventDefault();
document.getElementById('loading').classList.toggle('hidden');
form.submit();
})
});
});
</script>
This works perfectly but for some forms (like a deletion button) I want to ask to user if this is really what he wants to do:
<form method="post" action="<?=base_url('clients/' . $meeting->cid);?>" onsubmit="return confirm('Are you sure?');">
<input type="hidden" name="delmeeting" value="<?=$meeting->id;?>">
<input type="submit" value="Delete" class="button">
</form>
This is in conflict with the first script. The alert gets shown correct but when I cancel it, the first script comes into place and submits.
How can I handle this?
What is important to me:
display the loading div every time for each form
having the possibility to have forms with and without a confirm window
keeping the code small
having individual texts for the confirm

Got it:
const forms = document.querySelectorAll('form');
forms.forEach((form) => {
form.addEventListener('submit', (e) => {
if (form.onsubmit === null) {
e.preventDefault();
document.getElementById('loading').classList.toggle('hidden');
form.submit();
}
})
});
``

Javascript OnClick before submit button

Im having an issue getting some bit of code to run before the page submits.
When i change the return value to true to submit the form, the code above doesn't run. The way it is now, the code runs and the page is refreshed. I want to pass a true variable to submit the form Any ideas?
function buildMessageC() {
//Create an ePOS-Print Builder object
var builder = new epson.ePOSBuilder();
//Create a print document
builder.addTextLang('en')
builder.addTextSmooth(true);
builder.addTextFont(builder.FONT_A);
builder.addTextSize(1, 1);
builder.addText(document.getElementById('receipt').textContent);
builder.addFeedLine(1);
builder.addCut(builder.CUT_FEED);
//Acquire the print document
var request = builder.toString();
//Set the end point address
var address = 'http://192.168.1.69/cgi-bin/epos/service.cgi?devid=counter_printer&timeout=10000';
//Create an ePOS-Print object
var epos = new epson.ePOSPrint(address);
//Send the print document
epos.send(request);
return false;
The form button
<sf:form onsubmit="return buildMessageC()">
<input class="addToOrderButton button blue large expand" value="Place Order" name="_eventId_placeOrder" type="submit"/>
</sf:form>
Clarification
function doSubmit(){
buildMessageC();
return false;
} gives me print out and reloads the same page not submiting the form
function doSubmit(){
buildMessageC();
return true;
} doesn't print yet submits the form

jQuery - doesnt submit data on enter

I am trying to work with a chatroom and some users would like a feature to submit on enter.
I current have this code:
Form html:
<form id="send-message-area" name="send-message-area" method="post" action="">
<textarea id="sendie" name="sendie" maxlength = '255'></textarea>
<input type="submit" name="sendieButton" id="sendieButton" value="Send" />
</form>
jQuery:
$(document).ready(function(){
$("textarea").keyup(function(event){
if(event.keyCode == 13){
//$("form").submit();
$("form").trigger("submit");
}
});
});
However when hitting enter it does indeed submit, however it doesn't send any data with it.
It works just fine when pressing the submit button.
I already tried $("form").submit(); but it does the exact same.
EDIT:
I think the problem lays in my PHP.
if(isset($_POST['sendieButton'])){
$fromID = $brugernavn;
$fromMsg = $_POST['sendie'];
sendMsg($fromID, $fromMsg);
};
However when changing to check for $_POST['send-message-area'] it doesn't work at all.

Your button value will not be submitted until you click on it. So either you trigger its click event
$(document).ready(function(){
$("textarea").keyup(function(event){
if(event.keyCode == 13){
//$("form").submit();
$("#sendieButton").trigger("click");
}
});
});
or check only textarea value isset or not in PHP
if(isset($_POST['sendie'])){
$fromID = $brugernavn;
$fromMsg = $_POST['sendie'];
sendMsg($fromID, $fromMsg);
};

You need to check for name of the textarea not the button
if (isset($_POST["sendie"])) {
$fromMsg = $_POST['sendie'];
}else{
echo "no sendie";
}

jquery form validation script doesn't work

Hello there i have a problem calling jquery script to work. I have an index.html file. Where i include jquery like this: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> And my file with jquery script like this:<script type="text/javascript" src="js/error.handler.js"></script>
Then when special button is clicked, AJAX function loads regForm.html file into body of index.html there i have registration form like this:
<form name="regForm" id="regForm"action= "save_user.php" method="post">
******
<ul id ="inputForms">
<li id="l11"><input type = "text" id="login" name="login" size="15" maxlength="15" /></li>
</ul>
******
<div id="regButContainer"> <input type="submit" id="regButton2" value="Register Now" name="submit"></div></form>
I try to make verification of login input field with this script:
$(function(){
$( "#regForm" ).submit(function( event ) {
var errors = false;
if($('#login').value() == ""){
alert("lLOGIN CANNOT BE EMPTY!");
errors = true;
}
if (errors==true) {
return false;
}
});});
But when submit button is clicked script is not working so it ends up triggering save_user.php file to work. When i use html's onsubmit function and use standard javascript function everything works. But there is fancy things i want to do with jquery so i switched to it and now i'm in front of a brick wall. Can anyone explain me why my script refuses to work?

You need to place your $('#regForm).submit( ) function after the form is loaded by the AJAX.
Assuming you're using $.load( ) to do this, it should look something similar to this:
$('#form_container').load('regForm.html', function() {
$( "#regForm" ).submit(function( event ) {
var errors = false;
if($('#login').val() == ""){
alert("lLOGIN CANNOT BE EMPTY!");
errors = true;
}
if (errors==true) {
return false;
}
});
});
The reason for this is because the form isn't loaded at the time your add the submit event.

Just add the event.preventDefault(); in any case you want to stop the form from submiting.
Also I believe that your problem is that you should have $('#login').val() instead of $('#login').value(). normally your script should work without preventDefault();
http://jsfiddle.net/cra5L/
$( "#regForm" ).submit(function( event ) {
if($('#login').val() == ""){
event.preventDefault();
alert("lLOGIN CANNOT BE EMPTY!");
errors = true;
}

change
$('#login').value()
to
$('#login').val()

AJAX returns data twice on submit

Instead of redirecting the user to a new page, I want to add an overlay over the form. Somehow, the following code returns the overlay twice.
AJAX
$(document).ready(function ()
{
$('#form_informations').submit(function ()
{
$.get('php/formulaires.php', $(this).serialize(), function (data)
{
$('#form_informations').append('<div id="conf_informations" class="confirm"><p><img src="img/check.png" /><br /><?=FORMULAIRE_SAUVEGARDE;?></p></div>');
});
return false;
});
});
The id #form_informations is only used once.
For now, the second overlay is not created in php/formulaires.php because the file is empty as I have not started parsing the data.
Why is this happening? I don't see where this second overlay is coming from.
This is the HTML form:
HTML Form
<form id="form_informations" method="post" enctype="multipart/form-data">
<!-- form here -->
<input type="submit" name="submit_general" value="Save" />
</form>

May be you can add some code like this in the submit function
if(!$("#conf_informations").size()) {
$.get... //your get request here
}
Final solution
if(!$("#conf_informations").length()) {
$.get... //your get request here
}