How can I post data to backend using Javascript - javascript

I'm quite new to all this and was wondering if you could help shed some light on this. I have a datepicker widget in a form in my html and a javascript code which responds to change in date picker. What I want is when the user changes the date in the date picker widget, to post the changes to my Django backend
The html snippet is
<form id="availability_form" method="POST" action="">
{% csrf_token %}
<div class="col-sx-12 col-sm-6 col-md-6 col-lg-6">
<div class="input-group date" data-provider="datepicker">
<input class="form-control" id="id_availableDate">
<div class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
</form>
and the javascript snippet is:
...
...
$('#id_availableDate').change(
function () {
$("#availability_form").submit();
}
);
This tends to work, I see that the data is posted and my Django view receives a post, but when I examine the contents I don't see any data from the datepicker sent. What am I doing wrong?
Thanks in advance

Just add the name of the field:
<form id="availability_form" method="POST" action="">
{% csrf_token %}
<div class="col-sx-12 col-sm-6 col-md-6 col-lg-6">
<div class="input-group date" data-provider="datepicker">
<input class="form-control" id="id_availableDate" name="availableDate">
<div class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
</form>
and you can get to the value as $_POST['availableDate'];

Related

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 ?

How to get values from bootstrap modal and send them to a controller C# MVC

on button click I'm opening modal with 3 inputs, one of them is dropdown where I can choose some of active users, and two another inputs are the inputs where I can write some title and Description for that user that I previusly selected in dropdown. Now what I would like to do is to pick informations from modal and to send them to my controller (c#), and I guess I must create javascript object and send that object with selected user, title and description to my C# Controller.
Here is my modal code:
<div class="modal-content">
<div class="modal-header btn-info" style="font-weight:bold;color:white;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title modal-sm">Title</h5>
</div>
<div class="modal-body">
<form id="formCompose" class="form-horizontal form-label-left input_mask" method="post">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3">User</label>
<div class="col-md-9 col-sm-9">
#Html.DropDownList("UserID", new SelectList(ViewBag.Users, "Id", ".Name"), "Name", new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3">Title</label>
<div class="col-md-9 col-sm-9">
<input type="text" class="form-control">
<span class="fa fa-comment form-control-feedback right" aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3">Description</label>
<div class="col-md-9 col-sm-9">
<textarea id="message" rows="7" required="required" class="form-control" name="message"
data-parsley-trigger="keyup" data-parsley-minlength="20"
data-parsley-maxlength="100"
data-parsley-minlength-message="You need to enter at least a 20 caracters long description comment.."
data-parsley-validation-threshold="10"></textarea>
<span class="fa fa-language form-control-feedback right" aria-hidden="true"></span>
</div>
</div>
</form>
</div>
And here is what I have tried with javascript, if we can call it even try:
<script type="text/javascript">
var user = {User: "I need Id from dropdown here probably", Title: "Title from modal ", Description: "Description from modal" };
</script>
I really dont have idea how to get values form input and send them to a c# controller. Any kind of help would be great!
Thanks guys
Cheers
you have to add action attribute in the form to submit to action in controller
<form id="formCompose" action="#Url.Action("MyAction", "MyController")" class="form-horizontal form-label-left input_mask" method="post">
and the value of name attribute should be of same name as Property name of model
<label class="control-label col-md-3 col-sm-3">Title</label>
<div class="col-md-9 col-sm-9">
<input type="text" name="Title" class="form-control">
<span class="fa fa-comment form-control-feedback right" aria-hidden="true"></span>
</div>
and change name="message" to name="Description" and "UserID" to "User" and also add a submit button in the model to submit the form and send the data to action

Trying submit a form with parsley js and blade

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.

Bootstrap datetimepicker returning undefined value

I'm trying to get a couple of date time selector widgets working, but whenever I submit my form, the values returned are undefined. I'm still new to Javascript, and haven't worked with jQuery at all.
My code follows the basic example here: http://eonasdan.github.io/bootstrap-datetimepicker/#minimum-setup
<form method="post" action="/requser/direct-user">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="directTrainingDate">Training Date</label>
<div class='input-group date' name="directTrainingDate" id='directTrainingDate'>
<input type='text' class="form-control">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<script>
$('#directTrainingDate').datetimepicker({
format: 'YYYY-MM-DD'
});
</script>
</div>
</div>
<div class="row"> <!-- Submit button -->
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-custom">Submit</button>
</div>
</div>
</div> <!-- End Submit button -->
</form>
And then back in my Node/Express route, I'm just logging the value of req.body.directTrainingDate, and it's always undefined.
Just for documentation, from my comment above:
You put the name attribute directTrainingDate on the div instead of the input.

Preventing bootstrap from breaking between two form elements

I am using bootstrap with the bootstrap datetimepicker and have a bit of a problem.
My problem is best explained by this JSfiddle.
What I want to do is to have three separate form divs in a row and for them to stay in one row no matter the screen size. I would usually acchieve this by simply having a form-group div (as seen in the "situation I want" of the JSfiddle), however in this case, that is not possible because if I do that, then the second input messes with the javascript of the bootstrap datetimepicker, so I cannot touch the form group div.
Is there any way of acchieving what I want to do?
The HTML in which my problem is isolated is:
<div class="container">
<div class="row">
The situation right now:
<div class="col-sm-2 col-sm-offset-5">
<div class="form-inline">
<div class="form-group">
<div class="input-group date date-filter" id="start-date">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<input type="text" class="form-control" id="end-time" />
</div>
</div>
</div>
<div class="row">
The situation I want:
<div class="col-sm-2 col-sm-offset-5">
<div class="form-group">
<div class="input-group date date-filter" id="end-date">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" class="form-control" id="end-time"/>
</div>
</div>
</div>
</div>
</div>

Categories