I am using bootstrap-datepicker with vue js. The problem is, when I select date it comes to the input field but whenever I shift to another input field, the date vanishes. how do I make the date stay even if I switch to another field. below is my code
$('.datepicker').datepicker();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha256-bqVeqGdJ7h/lYPq6xrPv/YGzMEb6dNxlfiTUHSgRCp8=" crossorigin="anonymous"></script>
<div class="input-group">
<div class="input-group-prepend">
<span v-bind:style="{ width: prependWidth + 'px' }" class="input-group-text">Acceptance Date</span>
</div>
<input data-provide="datepicker" v-model="formData.acceptance_date" id="acceptance_date" name="acceptance_date" type="text" placeholder="" class="form-control">
</div>
here is my vue data
formData: {
event_name: '',
ba_alt: '',
bn_alt: '',
acceptance_date: ''
},
Related
I'm currently working on an E-learning platform, where we sell courses to users that registers and make payments for that courses.
I have a HTML form and it's integrated with PayPal Checkout (sandbox) and actually the behavior I expect is that when the payment is accepted (onApprove function) the form is submited with the data I need to process on the server.
But, I was trying to imitate malicious behavior and I entered the command: document.forms[0].submit() and the form is submited without the paypal payment in between. So anybody can have the course for free.
I want to fix this issue, and I have no very much knowledge in web security. My questions:
How can I only submit the form when the Paypal payment is successful?
(Optional) Where can I learn more about this and other security issues?
payment.blade.php
<div class="container">
<form action="{{action("RegistersController#inscribir",["curso" => $curso->id])}}" method="POST">
<div class="row">
<div class="col-12 col-md-8">
<h1>Llena el formulario</h1>
#csrf
<div class="form-group">
<label for="Nombre">Ingresa tu nombre</label>
<input class="form-control" name="name" id="name" type="text" value="{{Auth::user()->name}}"/>
</div>
<div class="form-group">
<label for="email">Ingresa tu correo</label>
<input class="form-control" name="email" id="email" type="text" value="{{Auth::user()->email}}"/>
</div>
<div class="form-group">
<label for="phone">Ingresa tu número de teléfono</label>
<input class="form-control" name="phone" placeholder="+01 234 567 8910" id="phone" type="text" value=""/>
</div>
</div>
<div class="col-12 col-md-4">
<h4 class="my-3">Pagar Curso</h4>
<img src="/storage/img/cursos/{{$curso->image_square}}" alt="{{$curso->title}}" width="200px">
<h5 class="p-0 m-0">{{$curso->title}}</h5>
<small>{{substr($curso->description,0,150)}}</small>
<br>
<p>Precio: <b> <span id="price">{{number_format($curso->price,2,".","")}}</span> USD</b></p>
<br>
<input type="submit" class="btn btn-apple" style="display: none">
#if ($curso->price > 0)
<div id="paypal-button-container"></div>
#endif
</div>
</div>
</form>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=<MY_CLIENT_ID>"> // Replace YOUR_SB_CLIENT_ID with your sandbox client ID
</script>
<script>
var price = document.getElementById("price").innerText;
var paypal_button = document.getElementById("paypal-button-container");
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: {{$curso->price}}
}
}]
});
},
style: {
color: 'blue',
size: 'responsive'
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
// Submit the form
console.log(details);
document.forms[0].submit();
});
},
onError: function(err){
alert("Error completando la transacción");
console.error(err);
window.location.href = "/";
}
}).render('#paypal-button-container');
</script>
Marking something as paid and receiving associated form information are two separate things. One part will always need to be completed before the next can proceed. If you require the PayPal payment to be completed before the form is submitted, this will lead to issues if the process is interrupted after payment, which you must design for. Vice-versa also leads to a potential disconnect (receiving form information without a payment), which must be designed for.
The issue in your question is how to verify that a PayPal payment has taken place. This must be done on your server. The most robust way to do it is to capture the payment from your server using a server-side integration.
You'll need two server-side routes, one for 'Create an Order' and one for 'Capture Order', documented here.
The best approval front-end to pair your two routes with is: https://developer.paypal.com/demo/checkout/#/pattern/server
I am trying to get two values. For one, it is working but for another one it is not. Here is my code:
<div class="product-price">
<div class="lefts-column">
<span>₹</span>
<span id="priceval"> {{$weights[0]->price}} </span>
<input type="hidden" class="priceval1" value="{{$weights[0]->id}}" id="pro_ids">
</div>
<div class="choose-weight">
<!-- original reads <select onchange="yes(this.value,this.data)"> -->
<select onchange="yes(this.value,this.name)">
#foreach($weights as $weight)
<option id="red" name="{{$weight->id}}" data-id="{{$weight->id}}"
class="weight" value="{{$weight->price}}">
{{$weight->weight}}
</option>
#endforeach
</select>
</div>
</div>
<!--jquery function-->
<script>
function yes(pid , uid)
{
$('#priceval').html(pid);
alert(uid);
//$('#pro_ids').val(uid);
}
</script>
Now I use alert to check if the value is retrieve or not (alert shows nothing then).
this.value is working and this.name is not. Is there any way to resolve it?
i have a laravel page which contains a reserve form i redirect my user after selecting date now for number of people and counting the price i use vuejs but i want to pass the data to the laravel form and submit that from laravel with all the other data so here is a part of my code :
your final price
<input type="number" style=" background-color:#fff; border:none" v-model="finalPrice" disabled/>
and here is js part i cuted out code for better reading :
<script>
this.epic_price = this.sum_price + (this.total_price * this.sum_day)
this.$emit('input', this.epic_price)
</script>
although this form is not complete yet but i want to use it here in this page so i just paste it consider the form is not complete at all :
<form class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed"
action="/properties/savereserve/" method="post">
<div class="row">
#foreach($price as $key => $prices)
<div class="col-lg-2 text-center">
{{$date[$key]}}
<hr>
{{$prices}}
</div>
#endforeach
</div>
</form>
//exacly on the same page i use my vue component so they are on the same page
<reserve
:sum_price="{{$sumprice}}"
:sum_day="{{$sumday}}"
:base_price="{{$property->base_price}}"
:property_id="{{$property->id}}"
:user_id="{{Auth::user()->id}}"
></reserve>
I have a dynamic field and I can't get the old value because I added this dynamic field with jQuery, but after validation I don't have the fields.
My jQuery code:
var fielddd = 1;
$(document).on('click', '.btn.add-field', function() {
fielddd++;
$('#newfield').append('<textarea class="from-control" name="somename[]" id="field_' + field + '"></textarea>' + '<button class="btn add-field">add</button>' + '<textarea class="from-control" name="somename2[]" id="field_' + field + '"></textarea>');
});
HTML code:
<div class="row">
<div class="{{($errors->has('somename[]')}}"
<textarea class="from-control" name="somename[]" id="field">
</textarea>
{!! $errors->first('somename[]',:message) !!}
</div>
<button class="btn add-field">add</button>
<div class="{{($errors->has('name[]')}}"
<textarea class="from-control" name="name[]" id="field">
</textarea>
{!! $errors->first('somename[]',:message) !!}
</div>
</div>
<div class="row" id="newfield">
<!-- new textarea -->
</div>
How can I get the same fields with the same input after validation?
I for example some field is empty. If I press add field, and after that pressing the button submit the laravel check if the field is empty and if yes then it redirect to the same page and say to put some value inside the text area.
You could print out the old response in JavaScript in the form, that you could then fetch from. If you printed out old('somefield[]') as JSON, you could then read each value and re-populate the form with textareas.
var oldValues = json_encode(old('somefield[]'))
Then you could use oldValues
oldValues.forEach(function(oldValue) {
// create new textarea using oldValue as value
})
I'm working with Laravel 5, in a view I'm using the bootstrap datetimepicker I have a timestamp saved in the database, and when the user load that view I want to preload that date in the datetimepicker. As I read there's a method datepicker('setDate',startDate); to set the date, but I need to assign the value that is accesible trought PHP, as I am using blade my timestamp is accesible with:
{{$contract->myTimestamp}}
So, I can I do it?
HTML Code:
<div class="col-sm-10" style="height:10px;">
<div class="form-group">
<div class='input-group date' data-date-startdate="{{$contract->myTimestamp}}" name="datepicker" data-date-format="yyyy-mm-dd hh:mm:ss" id='datetimepicker{{$contract->id}}' >
<input type='text' class="form-control" id="fecha">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
in the JS I added:
$(document).ready(function(){
$(this).datetimepicker().datetimepicker('setDate',startDate);
});
Now It shows me the date, but doesn't let me edit it, I mean when I click on the button to chage the date nothing happens,So I whas thinking that it could be a trouble with the format of the date, because in the database I have something like 2015-11-28 20:10:14 and in the datetimepicker I have 12/03/2015 12:00 AM and they are differents formats. So how can I transform the date?thanks!