We Keep Coding

Submit Laravel form after Authentication

I have a modal form with tabs. I use AJAX to submit the form, which works fine. I want the form should be public: if the user is not logged in it should display the login, and submit the form after logging in using AJAX and Laravel.
public function acServices()
{
$id = Auth::user()->id;
$post = new Ac_services_request ;
$post->user_id = $id;
$post->services = Request::input('service');
$post->ac_type = Request::input('ac_type');
$post->type_services = Request::input('ac_services');
$post->no_of_ac = Request::input('no_of_ac');
$post->other_info = Request::input('other_info');
$post->address = Request::input('addr');
$post->landmark = Request::input('landmark');
$post->lga = Request::input('lga');
$post->specific_location = Request::input('specific_location');
$post->date = Request::input('date');
$post->time = Request::input('time');
$post->mobile = Request::input('');
$post->code = $string."".$id;
$post->save();
return 'success';
}
<div class="modal fade ac-services ativa-scroll" data-backdrop="static"
data-keyboard="false" id="ac-services" tabindex="-1" role="dialog">
<div class="modal-dialog " role="document">
<div class="modal-content " >
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span style="color: white;" aria-hidden="true">×</span>
</button>
<form class="contact" >
<div class="setup-content" id="step-1">
<div class="form-group input-group col-md-9">
<p>Select AC type</p>
<select required="required" class="form-control lg" name="ac_type">
<option></option>
<option>Window AC(S)</option>
<option>Split AC(S)</option>
<option>Window AC(S) and Split AC(S)</option>
</select>
</div>
<input type="hidden" name="service" value="A/C Repairs and Services">
<div class="form-group input-group col-md-9">
<p>Select type of service you need</p>
<select required="required" class="form-control lg" name="ac_services">
<option></option>
<option>Installation of new AC</option>
<option>General Cleaning</option>
<option>Un-installation of existing AC</option>
<option>Repairs (Diagnosis and rectification of AC(s)</option>
</select>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right"
type="button">Next</button>
</div>
<div class="row setup-content" id="step-2">
<div class="form-group input-group col-md-9">
<p>How many AC(s)</p>
<input type="number" required="required" class="form-control lg"
name="no_of_ac" placeholder="Enter Number of AC e.g 2" >
</div>
<div class="form-group ">
<p>Other Informations</p>
<textarea required="required" rows="5" cols="65" name="other_info">
</textarea>
</div>
<button class="btn btn-primary prevBtn btn-lg pull-left"
type="button">Back</button>
<button class="btn btn-primary nextBtn btn-lg pull-right"
type="button">Next</button>
</div>
<div class="row setup-content" id="step-3">
<div class="form-group input-group col-md-9">
<p>Where do you need the services ?</p>
<span>House/Flat No, Street, City</span>
<input type="text" required="required" class="form-control lg"
name="addr">
</div>
<div class="form-group input-group col-md-9">
<span>Landmark</span>
<input type="text" required="required" class="form-control lg"
name="landmark">
</div>
<div class="form-group input-group col-md-9">
<span>LGA</span>
<input type="text" required="required" class="form-control lg"
name="lga" >
</div>
<div class="form-group input-group col-md-9">
<span>Any other specific location direction/description?</span>
<input type="text" required="required" class="form-control lg"
name="specific_location"><br>
<span><b> Note: Accurate location helps us reach you promptly </b>
</span>
</div>
<input type="hidden" name="userid" value="1">
<button class="btn btn-primary prevBtn btn-lg pull-left"
type="button">Back</button>
<button class="btn btn-primary nextBtn btn-lg pull-right"
type="button">Next</button>
</div>
<div class="row setup-content" id="step-4">
<div class="form-group input-group col-md-9">
<p>Pick Date</p>
<input type="date" required="required" class="form-control lg"
name="date"> </div>
<div class="form-group ">
<p>Select Service Time</p>
<select required="required" class="form-control lg" name="time">
<option></option>
<option>10:00am - 11:00am</option>
<option>11:00am - 12:00pm</option>
<option>12:00pm - 1:00pm</option>
<option>1:00pm - 2:00pm</option>
<option>2:00pm -3:00pm</option>
<option>3:00pm - 4:00pm</option>
<option>4:00pm - 5:00pm</option>
</select>
</div>
<button class="btn btn-primary prevBtn btn-lg pull-left" type="button">Back</button>
<button class="btn btn-primary prevBtn btn-lg pull-right" id="submit" data-target=".success">submit</button>
</div>
<script>
$('#ac-services').on('hidden.bs.modal', function () {
location.reload();
})
$(function() {
$("button#submit").click(function(){
$.ajax({
url: 'ac-booked-service',
type: "post",
data: $('form.contact').serialize(),
beforeSend: function() {
$empty = $('form.contact').find("input").filter(function() {
return this.value === "";
});
if($empty.length) {
alert('Please fill all the field');
return false;
}else{
return true;
};
},
success: function (result) {
window.location.replace('/user/dashboard');
},
error: function(){
alert("failure");
}
});
});
});
</script>

It might be beneficial for you to follow a few tutorials to gain some understanding around this concept.
Simple and Easy Laravel Login Authentication
Laravel Docs on Auth
Auth0 Tutorial

angularjs clear form input type file

I'm trying to clear my form every time I click publish:
$scope.product = {};
$scope.upload = function(user) {
var formData = new FormData;
$scope.product.owner = user;
for (key in $scope.product) {
formData.append(key, $scope.product[key]);
//console.log(key, ".........");
//console.log($scope.product[key]);
};
//getting the file
var file = $('#file')[0].files[0];
formData.append('image', file);
$http.post('http://localhost:3000/products', formData, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
}).then(function(res) {
$scope.item = res.data;
console.log($scope.item.image);
products.displayuserlist.push({
owner: $scope.product.owner,
car: $scope.product.newCar,
//seaters: 5,
price: $scope.product.newPrice,
//contact: 38880000,
area: $scope.product.businessArea,
image: $scope.item.image
});
$scope.product = null;
});
};
All the input fill has been clear except for
<form ng-submit="upload(currentUser())">
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Car</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="Perodua Myvi" class="form-control" ng-model="product.newCar" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Price(RM) per day</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="80" class="form-control" ng-model="product.newPrice" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Business Area</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="Universiti Malaysia Sabah" class="form-control" ng-model="product.businessArea" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Insert Car Image</label>
<br>
</div>
<div class="col-xs-5">
<!--<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-picture"></span> Image
</button>-->
<input type="file" id="file" ng-model="product.postimage" />
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
</div>
<div class="col-xs-5">
<button type="submit" class="btn btn-primary btn-sm pull-right">
<span class="glyphicon glyphicon-globe"></span> Publish
</button>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<br>
<br>
</form>
I have tried to use angular.element("input[type='file']").val(null); and $setPristine() but it does not work. How do I do this?

You can try this
$scope.product.postimage = null;
$('#file').val('');

How to add fileds dynamically using javascript with Bootstrap?

I got the code add fields dynamically here Add fields dynamically - link
when I try use this code insight my form class <form class="form-horizontal" action="create.php" method="post"> it won't work but when put this filed out from form class it will work I know have to changes in java script but I'm new to JS so please help me the changes
this my form:
<body>
<form class="form-horizontal" action="create.php" method="post">
<div class="form-group">
<label for="des" class="col-sm-2 control-label">To Address</label>
<div class="col-sm-8">
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group ">
<input class="form-control"name="fields[]"type="text" placeholder="To....." />
<span class="input-group-btn">
<button class="btn btn-success btn-add"type="button">
<span class="glyphicon glyphicon-plus"></span> </button> </span>
</div>
</form>
</div>
</div>
</div>
<div class="form-group">
<input name="submit" class="btn btn-success" type="submit" value="Save" id="search"/>
</div>
</form>
</body>
myscript :
<script>
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
</script>

You made a mistake in your HTML markup, adding a form inside another form, and i had a look at your reference, you would see you did make a mistake.
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<label class="control-label" for="field1">Nice Multiple Form Fields</label>
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-3">
<input class="form-control" name="fields[]" type="text" placeholder="Type something" />
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
<br>
<small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :)</small>
</div>
</div>
</div>
So if you wanted to add your POST method, you would add it into the form tag there, and not create a new one.
Hope this helps.

here i did a mistake to add form insight form the easy way to add multiple fields :
<label for="des" class=" control-label">Description</label>
<div class="multi-field-wrapper ">
<div class="multi-fields">
<div class="multi-field">
<div class="col-sm-8">
<input id="des" type="text" class="form-control" name="descrip[]"></div>
<span class="remove-field">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span></button></span>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
script funtion :
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});

Why is my controller not firing my function.js script

I have function.js script which includes onClickClear() and onValidate() functions, but they are not firing at all. I injected the loginCtrl in the function but it still does not fire the onClickClear() and onValidate() functions. Here is the function.js code which clears text boxes and adds validation and my main.cshtml:
var app = angular.module('HelloWorld', []);
app.controller("loginCtrl", function ($scope) {
$scope.onClickClear = function () {
$scope.UsernameTxtBox = "";
$scope.passwordTxtBox = "";
$scope.rememberMeCheckBox = "";
};
$scope.onValidate = function () {
return ($scope.UsernameTxtBox != "" && $scope.UsernameTxtBox != null) &&
($scope.passwordTxtBox != "" && $scope.passwordTxtBox != null);
};
});
<body ng-app="HelloWorld">
<div ng-controller="loginCtrl">
<div class="container">
<div class="row">
<div class="col-xs-2 col-xs-push-5">
<h3>Login</h3>
<p>
Username:<br />
<input type="text" autofocus name="UsernameTxtBox" ng-model="UsernameTxtBox" ng-minlength="3" ng-maxlength="20" placeholder="Username" required>
<span style="color: red" ng-show="form1.UsernameTxtBox.$error.minlength">Userame Should Contain Atleast 3 Characters</span>
<span style="color: red" ng-show="form1.UsernameTxtBox.$error.maxlength">Limit Exceeded</span>
</p>
<p ng-bind="name"></p>
<p>
Password:<br />
<input type="password" name="passwordTxtBox" ng-model="passwordTxtBox" ng-minlength="3" ng-maxlength="20" placeholder="Password" required>
<span style="color: red" data-ng-show="form1.passwordTxtBox.$error.minlength">Password Should Contain Atleast 3 Characters</span>
<span style="color: red" data-ng-show="form1.passwordTxtBox.$error.maxlength">Limit exceeded</span>
</p>
<p ng-bind="surname"></p>
<div class="checkbox">
<label>
<input type="checkbox" data-ng-model="rememberMeCheckBox" data-ng-disabled="!onValidate()">Remember me</label>
</div>
<button type="button" class="btn btn-success btn-success btn-sm" data-ng-click="onClickClear()" ng-disabled="!onValidate()">Clear</button>
<button type="button" class="btn btn-primary btn-sm" data-ng-click="onClickLogin()" ng-disabled="!onValidate()">Login</button>
<button type="button" class="btn btn-link btn-xs" data-ng-click="onClickOpen()">Not A Member? Register</button>
</div>
</div>
</div>
</div>
</body>

I am not sure what you do, but the example is working in code snippet... It's basically cut and paste from your code and I just change body tag to div and add the two input box for username and password.
var app = angular.module('HelloWorld', []);
app.controller("loginCtrl", function ($scope) {
$scope.onClickClear = function () {
$scope.UsernameTxtBox = "";
$scope.passwordTxtBox = "";
$scope.rememberMeCheckBox = "";
};
$scope.onValidate = function () {
return ($scope.UsernameTxtBox != "" && $scope.UsernameTxtBox != null) &&
($scope.passwordTxtBox != "" && $scope.passwordTxtBox != null);
};
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="HelloWorld">
<div ng-controller="loginCtrl">
<div class="container">
<div class="row">
<div class="col-xs-2 col-xs-push-5">
<h3>Login</h3>
<div class="form-group"><input class="form-control" ng-model="UsernameTxtBox" placeholder="Username"></div>
<div class="form-group"><input class="form-control" type="password" ng-model="passwordTxtBox" placeholder="Password"></div>
<div class="checkbox">
<label>
<input type="checkbox" data-ng-model="rememberMeCheckBox" data-ng-disabled="!onValidate()">Remember me</label>
</div>
<button type="button" class="btn btn-success btn-success btn-sm" data-ng-click="onClickClear()" ng-disabled="!onValidate()">Clear</button>
<button type="button" class="btn btn-primary btn-sm" data-ng-click="onClickLogin()" ng-disabled="!onValidate()">Login</button>
<button type="button" class="btn btn-link btn-xs" data-ng-click="onClickOpen()">Not A Member? Register</button>
</div>
</div>
</div>
</div>
</div>

JQuery .click function only works after second click if I close a modal

i have a page where I have two buttons, one that opens a modal, and another one that only submits.
I have a .click event on the second button. If i go on the page and click the second button the click event goes fine, BUT if i first open the modal, close it and then i hit the second button, the first time does nothing and the second time it fires the .click event.
I would like to always fire the click event.
this is my code
$(document).ready(function(){
var focusout = false;
$(".prueba").click(function () {
if (focusout == false) {
focusout = true;
return;
}
});
var validator =$('#form1').validate(
{
ignore: "",
rules: {
parametros: {
required: function() { return focusout == true; },
},
terminos: {
required: function() { return focusout == true; },
}
},
highlight: function(element) {
$(element).closest('.grupo').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.grupo').removeClass('has-error');
}
});
$(".cancel").click(function() {
validator.resetForm();
});
}); // end document.ready
button 1:
<button type="submit" class="btn btn-primary" name="nueva_articulo"><i class="icon-plus"></i> Nuevo Item</button>
button 2:
<button type="submit" class="btn btn-primary prueba" name="buscar">Buscar</button>
full form:
<form action="" method="post" id="form1" enctype="multipart/form-data">
<p>
<button type="submit" class="btn btn-primary" name="nueva_articulo"><i class="icon-plus"></i> Nuevo Item</button>
<button type="submit" class="btn btn-primary" name="carga_masiva"><i class="icon-arrow-up"></i> Carga Masiva</button>
</p>
<br>
<div class="col-lg-1 grupo">
</div>
<div class="col-lg-10 grupo">
<div class="panel panel-default pagination-centered">
<div class="panel-heading">Búsqueda en Catálogo</div>
<div class="panel-body">
<div class="form-group ">
<div class="col-lg-6 grupo">
<input type="text" class="form-control " id="terminos" name="terminos" placeholder="Términos de búsqueda">
</div>
<div class="col-lg-6 grupo">
<select id="e1" name="parametros" style=" width:80%">
<option></option>
<option value="1" >Autor</option>
<option value="2" >Título</option>
</select>
</div>
</div>
<br> <br>
<div style="text-align:center">
<button type="submit" class="btn btn-primary prueba" name="buscar">Buscar</button>
</div>
</div>
</div>
</div>
<div class="col-lg-1 grupo">
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" name="myModal" data-backdrop="static" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-wide">
<div class="modal-content">
<div class="modal-header">
<button type="submit" class="close cancel" data-dismiss="modal" aria-hidden="true">×</button>
{if isset($smarty.post.nueva_articulo) }
<h4 class="modal-title">Nueva Articulo</h4>
{/if} </div>
<div class="modal-body">
{if isset($smarty.post.nueva_articulo) }
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="art_titulo" class="control-label">Título</label>
<input type="text" class="form-control input-sm" name="art_titulo">
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="art_enlace" class="control-label">Enlace</label>
<input type="text" class="form-control input-sm" name="art_enlace">
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="aut_id" class="control-label">Autor(es)</label>
<input type='hidden' id='e13' name="autores" style='width:100%'/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="art_contenido" class="control-label">Contenido</label>
<textarea class="form-control input-sm" name="art_contenido" rows="5" ></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="etiquetas" class="control-label">Etiquetas</label>
<input type="text" id="e12" name="etiquetas" style="width:100%">
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="foto" class="control-label">Imagen</label>
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-default btn-file">
Buscar… <input type="file" name="foto">
</span>
</span>
<input type="text" class="form-control" name="nombre" readonly="">
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<div class="checkbox">
<label>
<input type="checkbox" name="rating" value="si"> Habilitar Rating y Reviews
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="redes" value="si"> Habilitar Compatir en Redes Sociales
</label>
</div>
</div>
</div>
{/if}
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default cancel" data-dismiss="modal" name="cerrar">Cerrar</button>
{if isset($smarty.post.nueva_articulo) }
<button type="submit" class="btn btn-primary" name="insertar_articulo">Guardar Cambios</button>
{/if}
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
<!-- /.modal -->
</form>

They are both of type submit. You should only have 1 submit button on a form
Button 1 could just be a button
<button class="btn btn-primary" name="nueva_articulo"><i class="icon-plus"></i> Nuevo Item</button>

If you want, you can create a Form Object in javascript and generate it dynamically. That will do that you don't need to depend of the submit and forms, just fill the form object with the inputs that you want programatically (that even accept files or images).
But anyway, it seems that you have more than one click events on the same button if the one you want is triggering at the second attempt. You could try to play with event.preventDefault or $.unbind.
As you said taht you need to submit the inputs of the modal, try to place the content of the modal inside the tag and remove the submit type of one of the buttons.