Develop Reference

Submit without reloading (Ajax, Codeigniter)

I've been studying and trying ajax for a couple of days. This code is totally working when page is reloading, However, my target is when I submit the form, it will not reload.
I've been trying it for couple days and it's really not working. It is submitting and reloading instead of not reloading.
I have provided my code below:
Views:
<form method="post" action="" onsubmit="return post();" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputEmail1"></label>
<input type="number" class="form-control" name="fightIDa" id="fightID" aria-describedby="emailHelp" placeholder="FIGHT NUMBER" hidden />
</div>
<input type="text" id="arenaID" name="arenaID" hidden />
<div class="form-group">
<label for="exampleInputEmail1"><i class="fas fa-user mr-2"></i>Handler Name</label>
<input type="text" class="form-control" name="handlerName" id="handlerName" aria-describedby="emailHelp" placeholder="Enter Handler Name" required />
</div>
<!-- <div class="form-group"> -->
<!-- <label for="exampleInputEmail1"><i class="fas fa-clipboard mr-2"></i>Position</label> -->
<!-- <input type="text" class="form-control" name="position" value="MERON" id="meron1" aria-describedby="emailHelp" placeholder="Enter Rooster Description" required> -->
<!-- </div> -->
<label for="exampleInputEmail1"><i class="fas fa-clipboard mr-2"></i>Rooster Specifications</label>
<div class="row">
<div class="form-group col-3">
<input type="text" class="form-control" name="bodyColor" id="bodyColor" aria-describedby="emailHelp" placeholder="Body Color" required />
</div>
<div class="form-group col-3">
<input type="text" class="form-control" name="legColor" id="legColor" aria-describedby="emailHelp" placeholder="Leg Color" required />
</div>
<div class="form-group col-2">
<input type="text" class="form-control" name="wingSpan" id="wingSpan" aria-describedby="emailHelp" placeholder="Wing Span" required />
</div>
<div class="form-group col-2">
<input type="text" class="form-control" name="weight" id="weight" aria-describedby="emailHelp" placeholder="Weight" required />
</div>
<div class="form-group col-2">
<input type="text" class="form-control" name="tailColor" id="tailColor" aria-describedby="emailHelp" placeholder="tailColor" required />
</div>
<div class="form-group col-2">
<input type="text" class="form-control" name="breed" id="breed" aria-describedby="emailHelp" placeholder="Breed" required />
</div>
</div>
<!-- <div class="form-group"> -->
<!-- <label for="exampleInputEmail1">Rooster Photo</label> -->
<!-- <input type="email" class="form-control" name="email" aria-describedby="emailHelp" placeholder="Enter Date Added" required> -->
<!-- </div> -->
<div class="form-group">
<label for="pic_file"><i class="fas fa-images mr-2"></i>Rooster Image</label>
<input type="file" name="roosterPhoto" class="form-control btn-sm" id="roosterPhoto" />
</div>
<!-- <div class="form-group"> -->
<!-- <label for="exampleInputEmail1">Date Added</label> -->
<!-- <input type="date" class="form-control" name="date" value="" id="addedBy" aria-describedby="emailHelp" placeholder="Enter Date Added" required> -->
<!-- </div> -->
<!-- <div class="form-group"> -->
<!-- <label for="exampleInputEmail1"><i class="fas fa-at mr-2"></i>Added By</label> -->
<!-- <input type="text" class="form-control" name="addedBy" aria-describedby="emailHelp" placeholder="USERNAME" disabled> -->
<!-- </div> -->
<!-- select -->
<button type="submit" class="btn btn-success btn-danger text-bold float-right" id="meron" value="save">Submit</button>
</form>
<p id="status"></p>
<!-- end form -->
Controller:
public function creates(){
$id = $this->input->post('arenaID');
$data = array (
'fightID' => '0',
'handlerName' => $this->input->post('handlerName'),
'position' => 'meron',
'bodyColor' => $this->input->post('bodyColor'),
'legColor' => $this->input->post('legColor'),
'wingSpan' => $this->input->post('wingSpan'),
'weight' => $this->input->post('weight'),
'breed' => $this->input->post('breed'),
'tailColor' => $this->input->post('tailColor'),
'addedBy' => $this->session->userdata('uid'),
'fightStatus' => 'on-queue',
'arenaID' =>$id,
'roosterPhoto' => $this->upload(),
);
$this->db->insert('fight_entries', $data);
echo 'Added successfully.';
}
Script & Ajax:
function post() {
var fightID = document.getElementById("fightID").value;
var arena = document.getElementById("arenaID").value;
var handlername = document.getElementById("handlerName").value;
var bodycolor = document.getElementById("bodyColor").value;
var legcolor = document.getElementById("legColor").value;
var wing = document.getElementById("wingSpan").value;
var weight = document.getElementById("weight").value;
var tail = document.getElementById("tailColor").value;
var breed = document.getElementById("breed").value;
var photo = document.getElementById("roosterPhoto").value;
if (fightID && arenaID && handlerName && bodyColor && legColor && wingSpan && weight && tailColor && breed && roosterPhoto)
$.ajax({
type: "POST",
url: "<?=site_url('arena/creates')?>",
data: {
fightID: fightID,
arenaid: arenaID,
handler_Name: handlerName,
body_Color: bodyColor,
leg_Color: legColor,
wing_Span: wingSpan,
weight: weight,
tail_Color: tailColor,
breed: breed,
rooster_Photo: roosterPhoto
},
success: function(response) {
document.getElementById("status").innerHTML = "Form Submitted Successfully";
}
});
return false;
}

You need to return false bottom of the submit function
like this
<script type="text/javascript">
$('form').submit(function (e) {
e.preventDefault();
var handlerName = $("input[name='handlerName']").val();
var bodyColor = $("input[name='bodyColor']").val();
var legColor = $("input[name='legColor']").val();
var wingSpan = $("input[name='wingSpan']").val();
var weight = $("input[name='weight']").val();
var breed = $("input[name='breed']").val();
var tailColor = $("input[name='tailColor']").val();
var roosterPhoto = $("input[name='roosterPhoto']").val();
$.ajax({
type: "POST",
url: "<?= site_url('arena/creates')?>",
data: {
handlerName: handlerName,
bodyColor: bodyColor
legColor: legColor,
wingSpan: wingSpan,
weight: weight,
breed: breed,
tailColor: tailColor
roosterPhoto: roosterPhoto
},
dataType: "json",
error: function () {
alert('Something is wrong');
},
success: function (data) {
alert('form was submitted');
}
});
return false;
}
</script>

My data is not getting posted to the server in AngularJS

I have added all the scripts required. The services are in asp.net, I have added as well the HTTP POST method in web.config file.
HTML form:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/InsertSession.js"></script>
</head>
<body ng-app="myModule1">
<div ng-controller="mycontroller1">
<form class="form-horizontal style-form" name="myform" >
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Event Title </label>
<div class="col-sm-10">
<input type="text" id="title" name="title" class="form-control" ng-model="title1">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Date of Event </label>
<div class="col-md-4">
<input class="form-control" type="date" id="eventdate" name="eventdate" ng-model="eventdate">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Time of Event </label>
<div class="col-md-4">
<input class="form-control" type="time" id="eventtime" name="eventtime" ng-model="eventtime">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Event Location</label>
<div class="col-sm-10">
<input type="text" id="location" name="location" class="form-control" ng-model="eventlocation1">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Event description</label>
<div class="col-sm-10">
<input type="text" id="description" name=" description" class="form-control" ng-model="description1">
</div>
</div>
<div>
<button class="btn btn-theme btn-block" value="Create Event" ng-click="registereventdata()"> Submit </button>
</div>
</form>
<!--ng-click="registereventdata()" , ng-click="Insert(formdata)" ,type="submit"-->
</div>
</body>
</html>
AngularJS code:
var myapp = angular.module('myModule1', []);
myapp.controller("mycontroller1", function ($scope, $http,$window) {
$scope.registereventdata = function () {
$http({
method: 'POST',
url: 'WebService1.asmx/InsertSessionData',
headers: {
'content-type': 'application/json; charset=utf-8',
'datatype': 'json'
},
data: { Title: $scope.title1, Date: $scope.eventdate, Time: $scope.eventtime, Location: $scope.eventlocation1, Description: $scope.description1, CreatedDate: $scope.eventdate, Email: "xyz", IsActive: true, IsDelete: false }
}).then(function (response) {
if (response.data.d > 0) {
alert("event add successfully.");
}
else {
alert("opss!!!not register event..try again");
}
})
}
});

Forn Validation ignored with AJAX call

I have a form that uses an AJAX call to submit the info to Google Sheets which is working fine except when I try to add form validation. Then it is just running the AJAX call.
Below is my HTML Form:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>MooWoos Stall Booking</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--build:css css/styles.min.css-->
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/style.css">
<!--endbuild-->
</head>
<body>
<!-- Page Content -->
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<a class="logo"><img src="assets/logo_opt.png"></a>
</nav>
<hr>
<div class="modal fade" id="redirect_page" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 bookingform">
<h1>Stall Booking Form</h1>
<p class="lead">
Fill out the form to book and pay for your stall!
</p>
<form id="bookingForm">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
</div>
<div class="form-group">
<label for="address">Address: </label>
<textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address"></textarea>
</div>
<div class="form-group">
<label for="phone">Telephone Number: </label>
<input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on"/>
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address"/>
</div>
<div class="form-group">
<label for="date">Which date would you like to book?: </label>
<p><input type="radio" name="date" value="13th September" /> Sunday 13th September</p>
<p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
</div>
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input type="radio" name="stallType" id="stallType-Preloved" value="Preloved">
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail?: </label>
<input type="radio" name="c-rail" value="Yes" /> Yes
<input type="radio" name="c-rail" value="No" /> No
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
<label for="insurance">Do you have Public Liability Insurance?</label>
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
</div>
</div>
</div>
<input type="button" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © MooWoos 2018. Website by Luke Brewerton</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!--build:js js/mwbookings-min.js -->
<script src="js/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.serialize-object.min.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
</body>
</html>
And my JS file:
var $form = $('form#bookingForm'),
url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'
function validateForm() {
var errorMessage="";
var name=document.forms["bookingForm"]["name"].value;
if (name==null ||name==""){
errorMessage = "Your Name is required.\
";
}
if (errorMessage !=""){
alert(errorMessage);
return false;
}
}
$('#submit-form').on('click', function(e) {
//e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject(),
success: function () {
$('#redirect_page').modal('show');
window.setTimeout(function(){location.reload()},3000);
}
});
});
I have a sneaky feeling that I need to do my form validation within the submit function before the AJAX call but I am new to using JS to do this, previously I have used PHP to do it all.

The main issue is that you aren't calling the validateForm() function anywhere. You need to call that before the form is submit in order to check its validity.
You should also use a type="submit" button within your form for accessibility reasons. This will also allow users to submit the form by pressing the return key while a field is in focus. You can then hook to the submit event to handle the form submission. Try this:
<form id="bookingForm">
<!-- form fields... -->
<input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>
function validateForm() {
var errorMessage = "";
var name = $('input[name="name"]').val();
if (name == null || name == "") {
errorMessage = "Your Name is required.\n";
}
return errorMessage;
}
$form.on('submit', function(e) {
e.preventDefault();
var error = validateForm();
if (error) {
alert(error);
return;
}
var jqxhr = $.ajax({
// ajax request...
});
});
You should however note that in most browsers the required attribute will achieve this logic for you without the need for any JS intervention.

var $form = $('form#bookingForm'),
url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'
function validateForm() {
var errorMessage="";
var name=document.forms["bookingForm"]["name"].value;
if (name==null ||name==""){
errorMessage = "Your Name is required.\
";
return true;
}
if (errorMessage !=""){
alert(errorMessage);
return false;
}
}
$('#submit-form').on('click', function(e) {
//e.preventDefault();
var res = validateForm();
if(res != false) {
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject(),
success: function () {
$('#redirect_page').modal('show');
window.setTimeout(function(){location.reload()},3000);
}
});
} else {
//handle else condition however u want
}
});

I want to Remove glyphicon-ok from Submit button

I am working on a Registration Form. I have applied Jquery with the help of ID of the element. When I click the submit button I also got glyphicon-ok at submit button, whick i dont want to happen. Simply copy the code and past it in html file on your PC....
<html>
<head>
<title>Form Validation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function validateText(id)
{
if($("#"+id).val()==null || $("#"+id).val()=="")
{
var div = $("#"+id).closest("div");
div.removeClass("has-success");
$("#glypcn"+id).remove();
div.addClass("has-error has-feedback");
div.append('<span id="glypcn'+id+'" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>')
return false;
}
else
{
var div = $("#"+id).closest("div");
div.removeClass("has-error");
div.addClass("has-feedback has-success");
$("#glypcn"+id).remove();
div.append('<span id="glypcn'+id+'" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>')
return true;
}
}
$(document).ready(function ()
{
$("#btn1").click(function ()
{
validateText("firstname");
validateText("lastname");
validateText("username");
validateText("password");
validateText("cpassword");
validateText("date");
validateText("male");
validateText("female");
$("register-form").submit();
});
}
);
</script>
<!-- Latest compiled and minified CSS -->
<script src="static/jquery-3.1.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--<script src="C:/Users/DA_YALS/Desktop/fv/static/combodate.js" type="text/javascript"></script>-->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6" style="height:auto; border:solid black;">
<form method="post" role="form" id="register-form" autocomplete="off">
<div class="form-group">
<label for="firstname">First Name:</label>
<input class="form-control" id="firstname" placeholder="First Name" type="text" required="required">
</div>
<div class="form-group">
<label for="lastname">Last Name:</label>
<input class="form-control" id="lastname" placeholder="Last Name" type="text" name="lastname" required="required" >
</div>
<div class="form-group">
<label for="username">Username:</label>
<input class="form-control" placeholder="Username" type="text" id="username" name="username" required="required">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input class="form-control" placeholder="Password" type="password" id="password" name="password" required="required">
</div>
<div class="form-group">
<label for="cpassword">Confirm Password:</label>
<input class="form-control" placeholder="Password" type="password" id="cpassword" name="cpassword" required="required">
</div>
<div class="form-group">
<label for="date" id="text">Date of Birth:</label>
<input class="form-control" type="text" id="date" name="date" data-format="DD-MM-YYYY" data-template="D MMM YYYY" name="date" value="09-01-2013" required="required">
</div>
<div class="form-group" style="border: solid;">
<label id="gender">Gender:</label>
<label class="radio-inline"><input id="male" type="radio" name="Male" checked>Male</label>
<label class="radio-inline"><input id="female" type="radio" name="Female">Female</label>
</div>
<div class="form-group" >
<button class="btn btn-success" id="btn1" type="submit">Submit</button>
</div>
</form>
</div>
<div class="col-lg-3">
</div>
</div>
</div>
</body>
</html>

The icon is not applied on the submit buttons but on the radios.
So you have to modify your validateText function to not add the icon on radio buttons:
function validateText(id)
{
if($("#"+id).val()==null || $("#"+id).val()=="")
{
var div = $("#"+id).closest("div");
div.removeClass("has-success");
$("#glypcn"+id).remove();
div.addClass("has-error has-feedback");
if (!($("#"+id).is(':checkbox') || $("#"+id).is(':radio'))) {
div.append('<span id="glypcn'+id+'" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
}
return false;
}
else
{
var div = $("#"+id).closest("div");
div.removeClass("has-error");
div.addClass("has-feedback has-success");
$("#glypcn"+id).remove();
if (!($("#"+id).is(':checkbox') || $("#"+id).is(':radio'))) {
div.append('<span id="glypcn'+id+'" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
}
return true;
}
}

Uncaught SyntaxError: Unexpected token : error in API call to Desk.com

I am receiving an error whenever I make a call to the Desk.com API. The error is:
users?callback=jQuery1122045…_1462470520820&_=1462470520821:1 Uncaught SyntaxError: Unexpected token :
I have tried a different API endpoint as well as different settings within the AJAX method with no change. Here is my jquery:
$(document).ready(function () {
//On Click Submission
$( "#submit" ).click(function(evt) {
//Prevent Default of changing pages
evt.preventDefault();
var data;
//Variable List
var email = document.getElementById("InputEmail").value;
var password = document.getElementById("InputPassword").value;
var url = document.getElementById("InputUrl").value;
var input = document.getElementById("csv-file");
console.log(email,password,url);
// //Papa Parse Module to parse data
// Papa.parse(input.files[0], {
// header: true,
// dynamicTyping: true,
// complete: function(results) {
// data=results;
// console.log(data);
// }
// });
//Ajax request
var test_url = "https://zzz-leaflet.desk.com/api/v2/users";
var test_email = "e*******m";
var test_pw = "B****1";
$.ajax(test_url,{
'contentType':'application/json',
'accepts':{'json':'application/json'},
'username':test_email,
'password':test_pw,
'method':'GET',
'dataType':'jsonp',
success: function(data) {
console.log(data);
}
});
return;
})
});
Here is my HTML as well:
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="main.js"></script>
<script src="node_modules/papaparse/papaparse.min.js"></script>
</head>
<body>
<div>
<form>
<!-- Email Adress -->
<fieldset class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="InputEmail" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>
<!-- Password -->
<fieldset class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="InputPassword" placeholder="Password">
</fieldset>
<!-- URL -->
<fieldset class="form-group">
<label for="exampleInputUrl1">URL</label>
<input type="url" class="form-control" id="InputUrl" placeholder="URL ex. https://companyname.desk.com/">
</fieldset>
<!-- FIle Input -->
<fieldset class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" class="form-control-file" id="csv-file">
<small class="text-muted">Make sure your CSV is correctly formatted</small>
</fieldset>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Cases
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Customers
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" >
Companies
</label>
</div>
<button type="submit" id="submit" class="btn btn-primary">Submit</button>
</form>
<div>
</body>
</html>