Trying submit a form with parsley js and blade - javascript

I'm using parsley js with blade to validate the form but I can not submit. Inputs are being validated normally but nothing happens. My code looks like this:
{{ Form::open(['method' => 'PUT', 'id' => 'form-cronoanalise-edit', 'data-parsley-validate']) }}
<input type="hidden" name="pro-id" id="hidden-id">
<div id="show-maquina">
<div class="form-group">
<label>Referência da Máquina</label>
<select class="form-control" name="ref-maquina" id="ref-maquina"></select>
</div>
<div class="form-group">
<label>Tempo</label>
<input class="form-control" type="text" name="tempo-maquina" id="tempo-maquina" data-parsley-required="true">
</div>
</div>
<div id="show-funcionario">
<div class="form-group">
<label>Setor</label>
<select class="form-control" name="setor" id="setor-edit"></select>
</div>
<div class="form-group">
<label>Funcionário</label>
<select class="form-control" name="funcionario" id="funcionario-edit"></select>
</div>
<div class="form-group">
<label>Tempo</label>
<input class="form-control" type="text" name="tempo-funcionario" id="tempo-funcionario" data-parsley-required="true" data-parsley-type="number">
</div>
</div>
<div class="btn-group">
{{ Form::submit('Alterar', ['class' => 'btn btn-warning', 'id' => 'btn-submeter']) }}
Cancelar
</div>
{{ Form::close() }}
This form is displayed within a modal bootstrap. Can anyone help?

As usual, without a working example, it's very hard to tell exactly what's going on.
I'd try removing the data-parsley-validate and binding it yourself with Javascript once the modal is open.

Related

How to charge data in a summernote with meteor JS?

Im using meteor JS and try to implement a summernote.
The problem is, when i try to open a summernote with my data, it work just sometimes.
when i charge the page for the first time, nothing appears in the summernote, but if i change something in my code and save it, the content will appear in the summernote.
please, help me :'(
<template name="consigneModif">
<div class="container">
<div class = "col text-center">
<h1>Modification de {{{this.Name}}}</h1>
</div>
<form class="formConsigne">
<div class="form-group">
<label for="Description"><h4>Nom :</h4></label>
<textarea class="summernote" id="Name" name="Name">{{{this.Name}}}</textarea>
</div>
<div class="form-group">
<label for="Description"><h4>Description :</h4></label>
<textarea class="summernote" id="Description" name="Description" rows="3">{{{this.Description}}}</textarea>
</div>
<div class="form-group">
<label for="Condition"><h4>Condition d'application de la consigne : </h4></label>
<textarea class="summernote" id="Condition" name = "Condition" rows="3">{{{this.Condition}}}</textarea>
</div>
<div class="form-group">
<label for="Mode"><h4>Mode opératoire :</h4></label>
<textarea class="summernote" id="Mode" name ="Mode" rows="3">{{{this.Mode}}}</textarea>
</div>
<div class="form-group">
<label for="Date"><p>Date effective :</p></label>
<input type="Date" id="Date" name = Date>
</div>
<div class="form-group">
<label for="DateFin"><p>Date de fin :</p></label>
<input type="Date" id="DateFin" name = DateFin>
</div>
<div>
<button type="submit" class ="btn btn-success" id="AddConsignButton">Modifier</button>
</div>
</form>
</div>
{{>footerNavbar}}
<script>
$('.summernote').summernote('code');
</script>
</template>
I think the issue is with the script tag you are using to activate the summernote. It should work if you use the onRender method of the template instead.
This may work:
Template.consigneModif.onRendered(function () {
this.$('.summernote').summernote('code');
});

How to automatically submit form when input is inserted?

I want to auto submit my form when value is inserted in the "Thumb_Print_Code" Field. below is my form. I want to do this without clicking on save nutton
Im working on Php Laravel Framework.
<form method="POST" action="{{ route('added') }}" id="myform">
#csrf
<div class="form-group row">
<label for="Thumb_Print_Code" class="col-md-4 col-form-label text-md-right">{{ __('Thumb Print Code') }}</label>
<div class="col-md-6">
<input id="Thumb_Print_Code" type="int" class="form-control #error('Thumb_Print_Code') is-invalid #enderror" name="Thumb_Print_Code" value="{{ old('Thumb_Print_Code') }}" required autocomplete="Thumb_Print_Code">
#error('Thumb_Print_Code')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Save Attendance ') }}
</button>
</div>
</div>
<br>
</div>
</form>
Please let me know how can I achieve my end goals ?

Why am I getting null values when submitting a form after editing some values with JS?

I have a form with some inputs that are filled from the result of an AJAX request. When I submit the form I get only null on the back-end. I tried to submit the values without editing it and it works
this is my java script code
editPayment = function() {
if ($('#entrytransId').val() != '') {
if ($('#entryReceiptTypesselect').val() == "1") {
$.ajax({
type: "GET",
url: "#Url.Action("GetInvoiceNumber", "Payment")",
data: {transId: $('#entrytransId').val()},
success: function(response) {
if (response.invNo == 0) {
window.location.reload();
} else {
$('#reciptNo').val(response.invNo);
$('#enteryAmt').val(response.Amt);
$('#entrytransId').attr("disabled", "true");
$('#enteryhide').show(500);
}
},
error: function(reponse) {
window.location.reload();
}
});
}
}
This is Exactly My HTML Form with inputs I have tried more times and its failures
but when I deleted the javascript function and fill the data manually its works
<form action="/Payment/EditPayment" id="MF" method="post">
<div class="row">
<div class="col-md-2">
<label class="form-control">Receipt Type</label>
</div>
<div class="col-md-8">
<select class="form-control" id="entryReceiptTypesselect"
name="entryReceiptTypes" required="true"><option value="">-Choose</option>
<option value="1">MoF</option>
<option value="2">Zakah</option>
<option value="3">Tax</option>
<option value="4">Other Taxs</option>
<option value="5">M & S</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">Trans Id</label>
</div>
<div class="col-md-3">
<input required="" type="number" class="form-control" id="entrytransId" name="entrytransId">
</div>
<div class="col-md-2" hidden="" id="btnHidden">
<button type="button" class="btn btn-primary legitRipple" onclick="editPayment()">check</button>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-md-2">
<label class="form-control" id="lblinvoice">reciptNo</label>
</div>
<div class="col-md-4">
<input required="" type="number" name="reciptNo" class="form-control" id="reciptNo">
</div>
</div>
<div class="row" hidden="" id="enteryhide">
<div class="col-md-2">
<label class="form-control">enteryAmt</label>
</div>
<div class="col-md-4">
<input required="" type="number" value="0" name="enteryAmt" class="form-control" id="enteryAmt">
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">E15 userName</label>
</div>
<div class="col-md-8">
<input required="" type="text" class="form-control" id="userName" name="userName">
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">password</label>
</div>
<div class="col-md-8">
<input required="" type="password" class="form-control" id="password" name="password">
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<input type="submit" value="submit" class="btn btn-block btn-success legitRipple" id="enterysubmit">
</div>
</div>
</form>
The issue is not with setting the values via javascript/jquery, but specifically with setting the inputs to disabled.
$('#entrytransId').attr("disabled", "true");
when an input is set to disabled, it is not included (it is excluded) from the form's POST, so will appear as null in the server-side code.
You can:
- not set them to disabled (will affect your UX)
- enable them just before POST (icky)
- use hidden fields
MVC does this for checkboxes, so you can copy that idea here:
<input type='text' name='entryid' />
<input type='hidden' name='entryid' />
POST uses the input's name field, not its id, so it's ok to have multiple inputs with the same name.
POST will then use the first input that is not disabled (so don't put the hidden one first...)
Then just update the jquery to apply the value to both inputs (if you also want it shown in the UI) rather than by id, eg:
$("name[entryid]").each(function() { $(this).val(newvalue); });
(other ways to set this may be better, not checked if .val() will apply to all, likely only applies to the first)
The proplem was on $('#entrytransId').attr("disabled", "true");
i have another function onselectChange() is disabled all inputs , i tried $('#entrytransId').attr("disabled", "true"); and its works well

ng-submit is not working

I HAVE A FORM BUT NG SBMIT DOESNOT CALL THE FUNCTION
I dont understand why this form not submitting . i have check every thing but it not even call the alert button also
HTML
<form role="form" name="frmCashback" method="post" ng-submit="CashbackUser(frmCashback, Rates)">
<!-- Personal Details Start -->
<div class="well">
<legend> Cashback Details </legend>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="Store">Store:</label>
<select name="Store" class="form-control" ng-model="Rates.Store" ng-options="stores.StoreID as stores.StoreName for stores in StoreList" >
<option value="">Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Store">Category:</label>
<select name="Category" class="form-control" ng-model="Rates.Category" ng-options="Cate.CategoryID as Cate.CategoryName for Cate in CategoryList" >
<option value="">Select</option>
</select>
</div>
<!-- Modal -->
<!---------Model End-------->
</div>
<div class="col-md-4">
<div class="form-group">
<label for="usr">Cash Back Rate:</label>
<input type="text" class="form-control" name="Cashback" id="Cashback" ng-model="Rates.Cashback" required>
</div>
</div>
</div>
<!---------Model End-------->
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" type="submit">Add Cashback</button>
</div>
</div>
</div>
<!-- Personal Details End -->
</form>
Here is my controller
CONTROLLER
$scope.CashbackUser = function(frm, Rates) {
alert('Hi');
//query_params.Status = CheckStatus.Action;
//console.log(Rates);
}
I have check :
function is within the controller
I am figthing with this for 4 hr kindly help me.
Your template seems to be having error ,form submit will not work if your template having error think so
<!---------Model End-------->
</div>
</div>
In your form, you can use this:
ng-submit="CashbackUser()"
And in your controller:
$scope.CashbackUser = function(){
console.log($scope.frmCashback);
console.log($scope.Rates);
}

Send form data in a querystring to url with AngularJS

I am trying to create a simple for that then passes the data into a querystring.
ie capturing:
first name
last name
email
Which when submitted with give soemthing like:
http://www.url.com?FirstName=John&LastName=Smith&johnsmith#url.com
I thought I would try 2 way binding and add the querystrings via the action but obviously this gave me an error. I don't need to save this data trust transfer it from a small form to the main application.
I also tried doing this all on submit which works however the link is still clickable when the form is blank. Any suggestions would be very welcome.
<form class="form" name="appForm" novalidate action="https://www.url.com?FirstName={{firstname}}" method="Post">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-11 flowuplabels">
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="appfirstname" class="fieldLabel fl_label">
First name<span class="text-danger">*</span>
</label>
<input type="text" name="appfirstname" id="appfirstname" class="form-control fl_input" data-ng-model="firstname" ng-required />
<span class="form-bar"></span>
</div>
</div>
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="applastname" class="fieldLabel fl_label">
Last name<span class="text-danger">*</span>
</label>
<input type="text" name="applastname" id="applastname" class="form-control fl_input" data-ng-model="lastname" ng-required />
<span class="form-bar"></span>
</div>
</div>
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="appemail" class="fieldLabel fl_label">
Email<span class="text-danger">*</span>
</label>
<input type="email" name="appemail" id="appemail" class="form-control fl_input" data-ng-model="email" ng-required />
<span class="form-bar"></span>
<p ng-show="appForm.appemail.$invalid && !appForm.appemail.$pristine" class="help-block">Enter a valid email.</p>
</div>
</div>
<div class="form-group">
<button id="btnSend" class="btn btn-red" ng-disabled="!firstname || !lastname || !email">Join us</button>
</div>
</div>
</div>
</div>
</div>
</form>
Typical as soon as I ask I solve
should have used get and just put the url ie:
It will then ass the query string using the input name as the query name so much simpler that what I was trying to do

Categories