We Keep Coding

How do I submit an HTML form using formsubmit.co without redirection of the page?

I have been trying to make a form in HTML (Bootstrap) that sends the information to my mail id. for this I am using formsubmit.
for some reason, when submiting the form, It redirects the page to a 'success' page. I do realise that there is a way to redirect it to a different page but I would rather have the section in which the form is present to disappear and show a 'success' section. For reference, here is my form code:
<section id="get-started" class="get-started">
<div class="container">
<div class="row text-center">
<h1 class="display-3 fw-bold text-capitalize">Get started</h1>
<div class="heading-line"></div>
<!-- <p class="lh-lg">
can write something here later
</p> -->
</div>
<!-- START THE CTA CONTENT -->
<div class="row text-white">
<div class="col-12 col-lg-6 gradient shadow p-3">
<div class="cta-info w-100">
<h4 class="display-4 fw-bold">Sign up for Beta!</h4>
<p class="lh-lg">
Join the waitlist for the beta program. Limited spots available! </p>
<h3 class="display-3--brief">What will be the next step?</h3>
<ul class="cta-info__list">
<li>Enter your details.</li>
<li>Wait to be accepted into the beta program.</li>
<li>Enjoy using Clickytize.</li>
</ul>
</div>
</div>
<div class="col-12 col-lg-6 bg-white shadow p-3">
<div class="form w-100 pb-2">
<h4 class="display-3--title mb-5">Join the waitlist!</h4>
<form action="https://formsubmit.co/533cb72c9e26d2503a81229e9c8a246a" method="POST" class="row">
<input type="hidden" name="_captcha" value="false">
<div class="col-lg-6 col-md mb-3">
<input type="text" placeholder="First Name" id="inputFirstName" name="firstName" class="shadow form-control form-control-lg">
</div>
<div class="col-lg-6 col-md mb-3">
<input type="text" placeholder="Last Name" id="inputLastName" name="lastName" class="shadow form-control form-control-lg">
</div>
<div class="col-lg-12 mb-3">
<input type="email" placeholder="email address" id="inputEmail" name="emailId" class="shadow form-control form-control-lg">
</div>
<div class="col-lg-12 mb-3">
<textarea name="message" placeholder="Link your social media profile" id="message" name="message" class="shadow form-control form-control-lg"></textarea>
</div>
<div class="text-center d-grid mt-1">
<button type="submit" class="btn btn-primary rounded-pill pt-3 pb-3">
submit
<i class="fas fa-paper-plane"></i>
</button>
<script>
form.onSubmit= (event)=>{
event.preventDefault();
}
</script>
</div>
</form>
</div>
</div>
</div>
</div>
</section>

If you want to prevent redirection of page and submit the form then you need to take care of submitting the form data using javascript.
First add onsubmit event attribute in your form tag like this:
<form method="POST" class="row my-form" onsubmit="return submitForm()">
We can remove the action attribute from the form tag.
in Javascript:
function submitForm() {
const form = document.querySelector('.my-form')
const formData = new FormData(form)
const url = 'https://formsubmit.co/533cb72c9e26d2503a81229e9c8a246a'
fetch(
url,
{
method: 'POST',
body: formData
}
)
return false
}
We are using the native fetch API to send data to form-data to the endpoint. We are also using the FormData API to create an object of form inputs
Returing false prevents page from reload.
Read more about:
Fetch API FormData API

Javascript Null Error with LiveValidation

I have been trying to troubleshoot this error with the form submission. I am using the Livevalidation library in order to validate the email address field. Something isn't connecting properly to the library as I get this error in dev tools console. The library isnt getting called in under to validate the form field. Any help would be greatly appreciated.
ERROR:
Uncaught TypeError: Cannot read property 'form' of null
at LiveValidation.initialize (livevalidation_standalone.compressed.js:5)
at new LiveValidation (livevalidation_standalone.compressed.js:5)
at <anonymous>:2:13
at api.min.js:2
at Module.S (api.min.js:2)
at t.inlineScripts (api.min.js:2)
at api.min.js:2
HTML:
<form method="post" name="Camp-2021-05-Aware-ParkNeedsUs-FRM-Lightbox" action="https://s989596683.t.eloqua.com/e/f2" onsubmit="return handleFormSubmit(this)" id="form210" class="elq-form">
<input value="Camp-2021-05-Aware-ParkNeedsUs-FRM-Lightbox" type="hidden" name="elqFormName" />
<input value="989596683" type="hidden" name="elqSiteId" />
<input name="elqCampaignId" type="hidden" />
<div class="layout container-fluid">
<div class="row">
<div class="grid-layout-col">
<div class="layout-col col-sm-12 col-xs-12">
<div id="formElement0" class="elq-field-style form-element-layout row">
<!--div style="text-align:left;" class="col-sm-12 col-xs-12">
<label class="elq-label " for="fe2045">Email Address
</label>
</div-->
<div class="col-sm-12 col-xs-12">
<div class="row">
<div class="col-xs-12">
<div class="field-control-wrapper" style="width: 65%; margin-left: auto; margin-right: auto;">
<input
type="text"
class="elq-item-input"
name="emailAddress"
id="f20"
style="width: 100%; font-size: 14px; color: #828282;"
onfocus="if(this.value==this.defaultValue)this.value=''"
onblur="if(this.value=='')this.value=this.defaultValue"
value="Email Address"
maxlength="50"
/>
<script type="text/javascript">
var f20 = window.document.getElementById("f20");
</script>
<script type="text/javascript">
var f20 = new LiveValidation("email");
f20.add(Validate.Email);
</script>
<script type="text/javascript">
var title = new LiveValidation("title", { onlyOnSubmit: true });
title.add(Validate.Email);
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="grid-layout-col">
<div class="layout-col col-sm-12 col-xs-12">
<div id="formElement1" class="elq-field-style form-element-layout row">
<div class="col-sm-12 col-xs-12">
<div class="row">
<div class="col-xs-12">
<div align="center">
<input type="Submit" class="submit-button-style" value="Submit" id="fe2046" style="margin-top: 8px; background-color: #286140; padding: 12px; border: none; width: 65%; color: white;" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="https://img04.en25.com/i/livevalidation_standalone.compressed.js"></script>

array of text field can't send to php includes file

I have an array of text fields (user interface) that created HTML, CSS, Javascript using inside of the user interfaces.
The problem is when input elements that don't print or send the whole array. I want to print the whole array. It prints one array element.
order.php (user interface):
<div class="row">
<form id="ex_order" action="includes/exchange-order.inc.php" method="POST">
<div id="main_div" class="main_sec_div">
<div class="col-lg-12 col-ml-12">
<button type="button" id="add" class="btn btn-primary"><i class="fas fa-plus"></i></button>
</div>
<div class="col-lg-12 col-ml-12 group">
<div class="row" style="padding:0rem 1rem 1rem 1rem; padding-bottom:1.5rem; margin:2rem 0.2rem 2rem 0.2rem; background:#ccc;">
<div class="col-12 mt-5" style="margin:-1rem;">
<span style="margin-left:1rem;" class="status-p bg-primary">Passanger #1</span>
</div>
<!-- Add Ticket Information start -->
<div class="col-3 mt-5">
<div class="card">
<div class="card-body">
<h4 class="header-title">Ticket Infromation</h4>
<p class="text-muted font-14 mb-4">Here are want to add <code>Ticket Infromation</code> of Exchange Order.</p>
<div class="form-group">
<label for="example-text-input" class="col-form-label">Passenger Name</label>
<input name="p_name[]" class="form-control" type="text" id="p_name" required>
</div>
<div class="form-group">
<label for="validationCustom03">Ticket No.</label>
<input name="ticket_no[]" type="text" class="form-control" id="ticket_no" required>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="submit" name="submitOrder" id="submitOrder" class="btn btn-primary mt-4 pr-4 pl-4">Save</button>
<!-- Jquery -->
<script>
$(document).ready(function() {
let i = 0;
let passCount = 1;
console.log('Default i : ', i);
// add button
$(document).on('click', '#add', function() {
i++;
console.log('Add', i);
html = `
<div class="col-lg-12 col-ml-12 second-div" id="sec_div${i}">
<div class="row" style="padding:0rem 1rem 1rem 1rem; padding-bottom:1.5rem; margin:2rem 0.2rem 2rem 0.2rem; background:#ccc;">
<div class="col-12 mt-5" style="margin:-1rem; display:flex; height:60px; align-items:center; align-content:center; justify-content:space-between;">
<div>
<span style="margin-left:1rem;" class="status-p bg-primary">Passanger #${++passCount}</span>
</div>
<div>
<button style="margin:1rem 1rem 0 0;" type="button" name="remove" id="${i}" class="btn btn-danger btn-sm remove"><i class="fa fa-close"></i></button>
</div>
</div>
<div class="col-3 mt-5">
<div class="card">
<div class="card-body">
<h4 class="header-title">Ticket Infromation</h4>
<p class="text-muted font-14 mb-4">Here are want to add <code>Ticket Infromation</code> of Exchange Order.</p>
<div class="col-md-12 mb-3">
<label for="example-text-input" class="col-form-label">Passenger Name</label>
<input name="p_name[]" class="form-control" type="text" id="p_name" required>
</div>
<div class="col-md-12 mb-3">
<label for="validationCustom03">Ticket No.</label>
<input name="ticket_no[]" type="text" class="form-control" id="ticket_no" required>
</div>
</div>
</div>
</div>
</div>
</div>`;
$('#main_div').append(html);
});
});
</script>
order.inc.php (php includes file) :
<?php
// Save Button
if (isset($_POST['submitOrder'])) {
// passenger
$p_name = $_POST['p_name'];
$ticket_no = $_POST['ticket_no'];
var_dump($p_name);
echo '<br/>';
var_dump($ticket_no);
echo '<br/>';
foreach ($p_name as $key => $value) {
echo $p_name[$key];
echo $ticket_no[$key];
echo "<br/>";
}
}

I solved my problem which returns whole array element to send to PHP includes file.
array(2) { [0]=> string(7) "6386868" [1]=> string(6) "868768" }
array(2) { [0]=> string(4) "6868" [1]=> string(4) "6868" }
The problem is the DOM element.
I don't put the <form> tag into currect place. When I click the add button, jquery is adding out of <form> tag.
Solution:
I changed the <form> tag outside of bootstrap <div> tag which works fine that returns whole array element.

Calling JQuery Button Clicks/Form Submit in Firebase Functions and Hosting

I am trying to make a website using Firebase Functions and Hosting Feature. Everything works perfectly but for some reason when the user tries to fill the form, the website reloads. I am trying to place an onClick Listener on the button in the form or attach the onSubmit to the form. But nothing gets called. I don't know what I am doing wrong. Any help will be appreciated.
<form id="join-us-form" class="container" onsubmit="joinUsButtonCalled()">
<div class="form-row">
<div class="form-group col-sm-12">
<label for="joinUsFullName" class="sr-only">Full Name</label>
<div class="input-group mb-2 mb-sm-0" style="border: 1px solid white; border-radius: 5px">
<div class="input-group-addon" style="background-color: transparent">
<i class="fal fa-user" style="color: white;"></i>
</div>
<input type="text" class="form-control" id="joinUsFullName" placeholder="Your Name"
required style="background: transparent; color: white">
<div class="invalid-feedback">
Please provide us with your name.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<label for="joinUsEmailAddress" class="sr-only">Email Address</label>
<div class="input-group mb-2 mb-sm-0" style="border: 1px solid white; border-radius: 5px">
<div class="input-group-addon" style="background-color: transparent">
<i class="fal fa-envelope" style="color: white;"></i>
</div>
<input type="email" class="form-control" id="joinUsEmailAddress"
placeholder="Email Address"
required style="background: transparent; color: white">
<div class="invalid-feedback">
Please provide a valid email.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<label for="joinUsWorkAs" class="sr-only">Work as..</label>
<div class="input-group mb-2 mb-sm-0" style="border: 1px solid white; border-radius: 5px">
<div class="input-group-addon" style="background-color: transparent">
<i class="fal fa-tasks" style="color: white;"></i>
</div>
<input type="text" class="form-control" id="joinUsWorkAs"
placeholder="e.g: Designer, App Developer ..."
required style="background: transparent; color: white">
<div class="invalid-feedback">
Please provide a valid work as.
</div>
</div>
</div>
</div>
<button id="joinUsButton" class="btn btn-warning btn-rounded" type="submit" onClick="joinUsButtonCalled()">Get in Touch</button>
</form>
<script>
function joinUsButtonCalled(event){
$('#join-us-form').preventDefault();
console.log('I am being called here in Join Us ()');
event.preventDefault();
}
</script>

Since you are using JQUERY I would try something like this:
$('#join-us-form').submit(function(ev) {
ev.preventDefault(); //to stop the form from submitting
//do your validation stuff
this.submit(); // If all the validations succeeded
});
$('#joinUsButton').on('click', function(ev){
ev.preventDefault(); //to stop the form from submitting
//do your validation stuff
$('#join-us-form').submit();// If all the validations succeeded
});
The problem with your script was that "event" was actually "undefined" cause "onSubmit" doesn't pass any argument to the function "joinUsButtonCalled".
Same for "$('#join-us-form').preventDefault();" cause preventDefault() is not a method of a generic JQUERY object, it belong to the EventObject, like the ones fired by a user click.
I guess your console was full of "undefined" error.
Finally you can get rid of the "onSumbit" and "onClick" attribute:
<form id="join-us-form" class="container">
...
<button id="joinUsButton" class="btn btn-warning btn-rounded" type="submit">Get in Touch</button>
</form>

how to disable Angular required field msg?

I'm trying to disable this message "Please fill out this field.":
I would like to use my own custom message; I'm suspecting this comes from Angular, but can't seem to disable it. I thought about disabling it through css, but don't know the class or id. I tried to do 'inspect element', but this message goes away when I try.
Here is the html form if it helps.
<form name="personalForm" role="form" ng-submit="updatePersonal(updatePersonalForm)"
ng-init="updatePersonalForm = {first_name: userFirstName,
last_name: userLastName, job_title: userJobTitle, company_name: userCompanyName,
location: userLocation, website: userWebsite}">
<div class="auth-body">
<div class="row" style="margin: 0;">
<div class="col-sm-6 account-input-container" style="padding: 0;">
<div class="form-group personal-form-group">
<label>first name</label>
<input type="text" name="first_name"
required class="form-control" ng-model="updatePersonalForm.first_name"
ng-class="{ 'error-input': personalForm.first_name.$invalid}">
</div>
</div>
<div class="col-sm-6 account-input-container" style="padding: 0;">
<div class="form-group personal-form-group">
<label>last name</label>
<input type="text" name="last_name"
required class="form-control" ng-model="updatePersonalForm.last_name"
ng-class="{ 'error-input': personalForm.last_name.$invalid}">
</div>
</div>
</div>
<div class="row" style="margin: 0;">
<div class="col-sm-6 account-input-container" style="padding: 0;">
<div class="form-group personal-form-group">
<label>job title</label>
<input type="text" name="job_title" ng-model="updatePersonalForm.job_title"
class="form-control">
</div>
</div>
<div class="col-sm-6 account-input-container" style="padding: 0;">
<div class="form-group personal-form-group">
<label>location</label>
<input type="text" name="location" ng-model="updatePersonalForm.location"
class="form-control">
</div>
</div>
</div>
<div class="row" style="margin: 0;">
<div class="col-sm-6 account-input-container" style="padding: 0;">
<div class="form-group personal-form-group">
<label>company name</label>
<input type="text" name="company_name" ng-model="updatePersonalForm.company_name"
class="form-control">
</div>
</div>
<div class="col-sm-6 account-input-container" style="padding: 0;">
<div class="form-group personal-form-group">
<label>personal website</label>
<input type="text" name="personal_website" ng-model="updatePersonalForm.website"
class="form-control">
</div>
</div>
</div>
<div class="row" style="margin: 0;">
<div class="col-sm-6 account-input-container" style="padding: 0;">
<button type="submit" class="bubble-btn submit-btn pull-left" style="float: none !important;">update</button>
</div>
</div>
</div>
</form>
I was able to print out these options, but can't seem to find the option for that required msg, maybe it's not even there.
Thanks in advance for your help!

The above validation is fired by HTML5 and not by AngularJS. You can turn this off by adding the novalidate attribute in yourform as below,
<form novalidate name="personalForm" role="form" ng-submit="updatePersonal(updatePersonalForm)"
ng-init="updatePersonalForm = {first_name: userFirstName,
last_name: userLastName, job_title: userJobTitle, company_name: userCompanyName,
location: userLocation, website: userWebsite}">
</form>

Add novalidate to your form tag. This will prevent default HTML5 validation.
<form action=" " novalidate>
//form body
</form>

If you want to set this behavior for all fields inside the form do this:
<form name="formName" novalidate>
<!-- all fields... -->
</form>
... or... if you want to set that behavior just for specific fields, do the same to those fields. When you set the attribute for a specific field, it overrides the parent form behavior
<form name="formName">
<label> Enter your text here </label>
<input type="text" formnovalidate />
</form>

If you want to disable it for a specific field just take off the required or ng-required directive.