Hello i try to display a price form an AJAX call, i putted an input just to check if you get the price and it's work but i can't display the price result on a span.
{{$product->price}} have default value but it's change depending the size, i would like to display the result also in the space and hide the input.
someone knows how to do that ?
Here my html :
<input type="text" placeholder="{{$product->price}}"value="{{$product->price}}">
<div id="price">
<span class="text-muted text-normal" id="price"> {{$product->price}}€</span>
</div>
<input type="hidden" name="price" id="price" value="{{$product->price}}" />
Here my javascript :
<script>
$('#size').change(function () {
$.ajax({
type: 'GET',
url : '../{{$product->id}}/ballons-entrainement/size-price',
dataType: "json",
data : {
size : document.getElementById('size').value
},
success:function(data){
console.log(data);
$('input').attr('value', data.price);
}
});
});
</script>
You try with .html() like
<script>
$('#size').change(function () {
$.ajax({
type: 'GET',
url : '../{{$product->id}}/ballons-entrainement/size-price',
dataType: "json",
data : {
size : document.getElementById('size').value
},
success:function(data){
$('span#price').html( data.price );
}
});
});
</script>
Related
i new to use laravel framework,,
i want to passing datepicker value after user select the date
i try to give button, to submit that value, but i got error.
Anybody have idea to passing value without button ?
this is my blade :
<form id="myform" name="myform">
<input type="text" id="datepicker" name="datepicker" value="Date"/>
<input placeholder="Submit" type="button" id="submitMe" style="width:
100px;"/>
//can i passing this value without button?
<script>
$('#datepicker').datepicker({
format : 'yyyy-mm-dd'
});
</script>
</form>
<script>
$("#submitMe").click(function() {
$.ajax({
type: 'POST',
url: "/index/getDate",
method: "POST",
dataType: "json",
data: $('#myform').serialize(),
success: function(data) {
console.log("Done");
}
});
return false;
})
</script>
this is my route :
Route::post('index/getDate', 'UserController#getDate')-
>name('Usercontroller.getDate');
this is my controller :
function getDate(Request $request){
$date = urldecode ($_GET['datepicker']);
echo "chosen date is: ".$date;
}
i try to get output like this :
thankyou so much, if somebody want to help me :))
try this in your controller:
function getDate(Request $request){
$date = $request->datepicker;
return "chosen date is: ".$date;
}
then in your view:
<input type="text" id="datepicker" name="datepicker" value="Date"/>
<label id="dateSelected"></label>
<script>
$("#submitMe").click(function() {
$.ajax({
type: 'POST',
url: "/index/getDate",
method: "POST",
data: $('#myform').serialize(),
success: function(data) {
console.log(data);
$('#dateSelected').text(data);
}
});
return false;
})
</script>
you pass the form data with POST method, so you can get the parameter with
$request->input('datepicker');
I don't know how to write a proper question. But please let me explain this. I sent from with ajax and return with json. Each json value contain its status. So I need to test/evaluate the status and do something with it.
JSON
{url:"error",email:"ok",name:"ok"}
JS
//new port
$('#pflBtn').on('click',function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: 'inc/wcont8_port_db.php',
data :$(this).closest('form').serialize(),
dataType: 'json',
success: function(data){
if(data.url=="err"){//if url=error
$('#plf_url').addClass('error');//will add .error into #plf_url class
}else{
$('#plf_url').addClass('success');
}
}
})//ajax
})
html
<form class="pflForm">
<div class="form-group form-float">
<div class="form-line" id="pfl_url">
<input type="text" class="form-control" name="pfl_url" value="URL" required />
<label class="form-label">URL (www.domain.com)</label>
</div>
</div><!-- form-group form-float -->
<button type="submit" id="pflBtn">Save</button>
</form>
There are two mistakes you have made, check my comments with the code and try again by changing them:
$('#pflBtn').on('click',function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: 'inc/wcont8_port_db.php',
data :$(this).closest('form').serialize(),
dataType: 'json',
success: function(data){
if(data.url=="error"){// url has value 'error', but this was checking 'err'
$('#plf_url').addClass('error');//will add .error into #plf_url class but the class is not available in your html,
}else{
$('#plf_url').addClass('success');
}
}
})//ajax
})
Hello everyone I want to parse array to Codeigniter controller but my code is not working can you please tell me where is a mistake in this code. I am a new in jQuery I know it is a very basic mistake.
jQuery Code:
$("#add_state").click(function(){
var addstate = {
State: $.trim($('#statename').val()
}
$.ajax({
type: "POST",
url: "<?php echo base_url()?>/index.php/geo/add_state",
data: addstate,
success: function(response){
alert(response);
}
});
event.preventDefault();
});
HTML Code:
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">State Name</label>
<input type="text" name="State" class="form-control" id="statename" placeholder="Enter State Name">
</div>
<button type="submit" class="btn btn-info" id="add_state">Submit</button>
</form>
trim is not closed properly
it suppose to be like this
$("#add_state").click(function(){
var addstate = {
State: $.trim($('#statename').val())
}
$.ajax({
type: "POST",
url: "<?php echo base_url()?>/index.php/geo/add_state",
data: addstate,
success: function(response){
alert(response);
}
});
event.preventDefault();
});
Missing ) in State: $.trim($('#statename').val(). Change it to State: $.trim($('#statename').val()).
Use $(document).on('click', '#add_state', function() { instead$("#add_state").click(function(){. Because first solution will work, if you add script before dom element was created.
Check url, maybe it's incorrect.
I created a simple contact us form that would capture the data and send to the server end via JSON and display it on the PHP page. I'm a beginner to this whole JSON thing. Please tell me where I've gone wrong.
JavaScript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var arr = {
firstName : document.getElementById('fName').value,
lastName : document.getElementById('lName').value,
email : document.getElementById('email').value,
comment : document.getElementById('comment').value,
rate : document.getElementById('select').value
};
$.ajax({
url: 'contact.php',
type: "post",
data: arr,
contentType: 'application/json; charset=utf-8',
dataType: "json"
success: function(msg) {
alert("msg");
}
});
});
</script>
PHP
<?php
$example = $_POST['arr'];
echo $example;
?>
HTML
<body>
<h1> Contact Us </h1>
We value your feedback. Send in your questions, suggestions, ideas to help us improve our service.
<h2 align="Center"> Search us on Google Maps</h2>
<br>
<br>
<div id="map-canvas" > </div>
<form action="contact.php" name="form" method="post" >
<div id= "result">
<br>Name :<br>
<input type="text" name="fName" id="fName" required >
<input type="text" name="lName" id="lName" required >
<br> <br>
Email: <br>
<input type="email" name="email" id="email" required >
<br> <br>
Comment: <br>
<textarea name= "comment" rows="8" cols="50" autofocus></textarea>
<br> <br>
Rate our Website <select name="select" id="selected" autofocus>
<option value = "1" name= "rate"> 1 </option>
<option value = "2" name= "rate"> 2 </option>
<option value = "3" name= "rate"> 3 </option>
<option value = "4" name= "rate"> 4 </option>
<option value = "5" name= "rate"> 5 </option>
</select>
<br> <br>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
</body>
replace
data: ({name: 145}),
with
data: {arr: arr},
In your AJAX call, your data that you are sending over is just "name : 145", so the only thing in your post will be $_POST['name']. The arr value is never passed to you AJAX function, so it will not pass 'arr' over.
What you are looking for would be this if you want the PHP side to remain the same:
$(document).ready(function(){
var arr = {arr: {
firstName : document.getElementById('fName').value,
lastName : document.getElementById('lName').value,
email : document.getElementById('email').value,
comment : document.getElementById('comment').value,
rate : document.getElementById('select').value
}};
$.ajax({
url: 'contact.php',
type: "post",
data: arr,
contentType: 'application/json; charset=utf-8',
dataType: "json"
success: function(msg) {
alert("msg");
}
});
});
When you use JSON, what gets sent through the post request looks like this:
For a JSON array that is formatted in this way:
var json = { 'name' : 'leneya', 'id' : '74'}
Your PHP $_POST array will look like:
$_POST['name'] => 'leneya'
$_POST['id'] => '74'
If I were you, I'd probably format my JSON as such:
$(document).ready(function(){
var arr = {
firstName : document.getElementById('fName').value,
lastName : document.getElementById('lName').value,
email : document.getElementById('email').value,
comment : document.getElementById('comment').value,
rate : document.getElementById('select').value
};
$.ajax({
url: 'contact.php',
type: "post",
data: arr,
contentType: 'application/json; charset=utf-8',
dataType: "json"
success: function(msg) {
alert("msg");
}
});
});
Notice how I pass the arr variable into data, because that is how you send JSON through the AJAX request.
Then on the PHP side, you can now use $_POST['firstName'] to get just the first name, $_POST['email'] to get the email, and so on.
Edit
Since your are running $.ajax on $(document).ready(), jQuery is running the ajax function as soon as the page loads. What I'm assuming you want is to submit the form once the user clicks the "Submit" button. To do this, you need to adjust your javascript:
$(document).ready(function(){
//this line binds the ajax functionality to the click of the submit button
$('input[type="submit"]').on('click',function(e){
//this prevents the form from submitting itself to php.
e.preventDefault();
var arr = {
firstName : document.getElementById('fName').value,
lastName : document.getElementById('lName').value,
email : document.getElementById('email').value,
comment : document.getElementById('comment').value,
rate : document.getElementById('select').value
};
$.ajax({
url: 'contact.php',
type: "post",
data: arr,
contentType: 'application/json; charset=utf-8',
dataType: "json"
success: function(msg) {
alert("msg");
}
});
});
});
On the PHP side, you will now be able to access your keys according to the JSON array.
$_POST['firstName'],
$_POST['lastName'],
$_POST['email'] ...
Again, the keys in your post array should match up with the keys in your JSON array. If they don't, then your AJAX is still not working. In addition, you will be able to tell if the AJAX is working, because you should get an "alert" from javascript that displays whatever message you have echoed from PHP.
The following code is my original code. In the code, I tried to post value of an input for each checkbox which is checked.
<tbody class="myFormSaldo">
<tr>
<td> <input name="checkbox['.$i.']" type="checkbox" value="'.$i.'" id="chb'.$ref.'" onchange="enableList(this);" class="chb_group" /> </td>
<td> <input name="items['.$i.']" type="text" readonly value="'.$obj->items.'" /> </td>
<td> <input name="size['.$i.']" type="text" readonly value="'.$obj->size.'Kg" /> </td>
<td> <input name="quantity['.$i.']" type="text" readonly value="'.$obj->myquantity.'" /> </td>
if($_SERVER["REQUEST_METHOD"] == "POST") {
foreach($_POST['checkbox'] as $i) {
$product_name=$_POST['items'][$i];
$product_size=$_POST['size'][$i];
The code above is working fine. It post the value of each inputs for each checkbox which were checked. For example; if there were three checkedbox which were checked and the form was submited, then it would post three arrays (3 loop) of : $product_name,$product_size,etc..
What I want now is to use Ajax. Like this:
var product_name= document.getElementById('product_name').value;
var product_size = document.getElementById('product_size').value;
$.ajax(
{
type: "POST",
url: "../actions/selectReferenceOrder.php",
data: product_name='+product_name+'&product_size ='+product_size ,
cache: false,
success:function(html)
{
document.getElementById('outputReference').innerHTML = html;
}
});
But it doesn't count or find the checkbox
So my question now is how to do the same as the php do with foreach($_POST['checkbox'] as $i) in ajax?
I am just a beginner in all of these things.
Thank you for any help.
You are using your product_name as a string, not as a variable:
Try this:
data: 'product_name='+product_name+'&product_size='+product_size,
Or, as Ghost sad in comments, use formdata.
var dataString = $('form').serialize();
and later, in the ajax:
data: dataString,
...
Try this...
<script>
$.ajax({
type: "POST",
url: "../actions/selectReferenceOrder.php",
data: "{'product_name':" + product_name + ", 'product_size':" + product_size+ "}",
cache: false,
dataType: "html"
success:function(html)
{
document.getElementById('outputReference').innerHTML = html;
}
});
</script>
Try this
Ajax is simplified check here
var data = $('form').serialize();
$.post( "../actions/selectReferenceOrder.php", { name: data}).done(function( data ) {
alert( "Data Loaded: " + data );
});
OR
$.post( "../actions/selectReferenceOrder.php", { product_name: product_name, product_size : product_size }).done(function( data ) {
alert( "Data Loaded: " + data );
});