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>
Related
I have this form and it's plain html and css. How do I send a multipart request? I need to send this to my api.
In postman, my api takes form data in the body in this format.
company -enter a string here
excelFile - enter excel file here
plan_type-enter a string here
I need to append the other two company ahd plan_type from my local storage.
My concern is how to take file from this form and send api requests.
<form name=”myForm” enctype=”multipart/form-data”>
<div class="row pt-2 pl-3">
<div class="col-md-5 p-0">
<img src="assets/images/Policy-doc-without.jpg" style="width: 200px; float: left; height: 80px;box-shadow: 0 3px 6px 0 rgba(0, 150, 11, 0.16);" />
</div>
<div class="col-md-5 pl-0 position-relative bg-upload-file">
<input type="file" name="file" class="input-file">
</div>
</div>
<div class="pt-5 text-left pb-4">
<button class="button--light btn-next">SUBMIT</button>
</div>
</form>
It will give you a FormData object when you submit this form. Then append you other variables using FormData.append('VARIABLE_NAME', VALUE).
<form action="myform" method="post" enctype="multipart/form-data">
<div class="row pt-2 pl-3">
<div class="col-md-5 p-0">
<a href="assets/exl/company-employee-email-ID.xlsx" target="_blank" > <img src="assets/images/Policy-doc-without.jpg" style="width: 200px;
float: left;
height: 80px;box-shadow: 0 3px 6px 0 rgba(0, 150, 11, 0.16);" /></a>
</div>
<div>
<label for="company_id">Company</label>
<input type="text" name="company " id="company _id">
</div>
<div class="col-md-5 pl-0 position-relative bg-upload-file">
<label for="file_id">Upload File</label>
<input type="file" name="file" id="file_id" class="input-file">
</div>
<label for="plane_type_id">Plane Text</label>
<input type="text" name="plane_type" id="plane_type_id">
</div>
<div class="pt-5 text-left pb-4">
<button type="submit" class="button--light btn-next">SUBMIT</button>
</div>
</form>
It takes 3 parameters Company,file upload ,plane text and sended to myform.
I hope it works for you
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.
I have a Twitter Bootstrap form that gets an orange border-bottom when it gets into focus. But the icon that is on the input line has its own border-bottom and i dont know how to bind the focus event in Angular to a function that makes the border-bottom of the icon also orange.
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="emailInputIcon"><i class="fal fa-envelope"></i></div>
</div>
<input type="email" class="form-control" id="emailInputLogin" aria-describedby="emailHelp" placeholder="EMAIL">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="passwordInputIcon"><i class="fal fa-key"></i></div>
</div>
<input type="password" class="form-control" id="passwordInputLogin" placeholder="PASSWORD">
</div>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
A simple way would be like this (simplified for readability):
HTML:
<input (focus)="onInputFocused()" (blur)="onInputBlurred()" />
<div class="icon" #icon></div>
TS:
#ViewChild('icon') icon: ElementRef;
onInputFocused() {
this.icon.nativeElement.style.borderBottom = 'orange 1px solid';
}
onInputBlurred() {
this.icon.nativeElement.style.borderBottom = '';
}
More elegant:
HTML:
<input (focus)="onInputFocused()" (blur)="onInputBlurred()" />
<div class="icon" [ngClass]={'withBorder': focused}></div>
TS:
focused = false;
onInputFocused() {
this.focused = true;
}
onInputBlurred() {
this.focused = false;
}
CSS:
.withBorder {
border-bottom: orange 1px solid;
}
Without Angular, a plain CSS solution (preferable):
HTML:
<div class="has-input">
<input type="text" />
<div class="icon"></div>
</div>
CSS:
.has-input input:focus + .icon {
border-bottom: orange 1px solid;
}
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.
Person,
I have a page with 2 input text and 2 input file when I get the ajax response, send clear the entire form as the code below, but only a field is not cleared the field:
Here my page
<input class="fileUploadAudio" id="fileUploadAudio" name="fileUploadAudio" type="file"></span>
I believe we should have some conflict, I have done everything and I can not clear this blessed country.
PS: If you need I publish the page to take a look.
<div class="form-group">
<label class="col-sm-3 control-label">Imagem para Push</label>
<div class="col-sm-6">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://placehold.it/190x140/7761A7/ffffff" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
<div>
<span class="btn btn-primary btn-file"><span class="fileinput-new">Selecionar imagem</span><span class="fileinput-exists">Alterar</span>
<input class="arquivo" id="arquivo" name="arquivo" type="file"></span>
Remover
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Áudio para a campanha</label>
<div class="col-sm-6">
<div class="fileinput fileinput-new" data-provides="fileinput">
<input name="..." value="" type="hidden">
<span class="btn btn-primary btn-file"><span class="fileinput-new">Selecionar áudio</span>
<span class="fileinput-exists">Alterar</span>
<input class="fileUploadAudio" id="fileUploadAudio" name="fileUploadAudio" type="file"></span>
<span class="fileinput-filename"></span>
×
</div>
</div>
</div>
In return I send ajax clear the form fields like this:
$(".formulario")[0].reset();
$(".formulario").get(0).reset();
$('#cancelButton').hide();
$("#fileUploadAudio").val("");
$('#submitButton').hide();
I have even tried to clear only the input file this way:
$('#fileUploadAudio').val('');
I assume that you are trying to reset the whole form.
Change the outer div tag to formas followings:
Replace
<div class="form-group">...</div>
with
<form class="form-group" id="formulario">...</form>
Reset form using jQuery
$("#formulario")[0].reset();
if native java script reset function is not working you need to trigger the reset function
$("#formulario").trigger("reset");