Array Passing through javascript - javascript

Here is my view:
<div class="form-group col-md-3">
<label class="sup col-md-12 control-label">Employees</label>
<?php
if(isset($hiddenEmpArray)){
if(is_array($hiddenEmpArray)){
foreach($hiddenEmpArray as $hiddenEmpArraySingle){
echo '<input type="hidden" name="selectall[]" id="selectall" value="'. $hiddenEmpArraySingle. '">';
}
}
}
?>
</div>
Javascript:
$('#form').submit(function(e){
e.preventDefault();
var selectall =$("#selectall").val();
$.ajax({
type: "POST",
url: "<?php echo base_url()?>",
data: {selectall:selectall},
success: function (data) {
//alert(data);
},
error: function () {
alert("Server Error! Please try again later.");
}
});
});
Here I want to Submit this form through javascript.Here selectall is an array.When I Submit the form,Only One value is received .How Can I pass this array through javascript.Please help me

The serialize() method creates a URL encoded text string by
serializing form values.
$('#form').submit(function(e){
e.preventDefault();
var formId = $(this).attr('id');//getting form id
$.ajax({
type: "POST",
url: "<?php echo base_url()?>",
data: $('#' + formId).serialize(),//jquery id selector for the form
success: function (data) {
//alert(data);
},
error: function () {
alert("Server Error! Please try again later.");
}
});
});

you can just use this
var selectall = $("input[name='selectall[]']").map(function(){return $(this).val();}).get();
and then in success just do console.log(data);

you may use jquery each function to collect data
var selectall=[];
$.each($("input[name='selectall[]']"), function(){
selectall.push($(this).val());
});

Related

Populating dynamically created div's using ajax

I am trying to figure out how to output the ajax response from a form submission to a particular div. The form is dynamically generated buttons with data from mysql as values and for each button generated there is also a div created for the result like this.
Example form id's:
id="form1"
id="form2"
id="form3"
id="form4"
div id's:
<div class="res" id="result1">Display form1 data</div>
<div class="res" id="result2">Display form2 data</div>
<div class="res" id="result3">Display form3 data</div>
<div class="res" id="result4">Display form4 data</div>
Here is my example form. $count is incrementing the id "form" inside a while loop.
echo '<form name="v" action="test.php" value="' . $row['data'] . '" method="post" id="form' . $count . '"><input name="v" type="hidden" value="' . $row['data'] . '"><input type="submit" class="btn" value="Submit"></form>';
I can get this to work but it will fill all of the divs with the success response from clicking the submit buttons if I just use ".res" for the class which is why I need the unique id's using the incremented numbers from $count. I am unsure how to achieve to this though.
$(document).ready(function(){
$(document).on("submit", "#form", function(event)
{
event.preventDefault();
$.ajax({
url: $(this).attr("action"),
type: $(this).attr("method"),
dataType: "text",
data: new FormData(this),
processData: false,
contentType: false,
success: function(data, status) {
$(".res").html(data);
},
error: function() {
alert('An error occurred.');
}
});
});
});
Could somebody help me out? Thanks.
You could extend the form tag with an data attribute, containing the target div.
echo '<form name="v" action="test.php" value="' . $row['data'] . '" method="post" id="form' . $count . '" data-target="result' . $count . '">...';
and later inside your ajax success function, do something like this
$(document).ready(function(){
$(document).on("submit", "form[data-target]", function(event)
{
var $target = $('#' + $(this).data('target'));
event.preventDefault();
$.ajax({
url: $(this).attr("action"),
type: $(this).attr("method"),
dataType: "text",
data: new FormData(this),
processData: false,
contentType: false,
success: function(data, status) {
$target.html(data);
},
error: function() {
alert('An error occurred.');
}
});
});
});
You can use the fact that .each() provides a counter variable:
$("form").each(function (i) {
$(this).on("submit", function () {
// ...
// in the ajax success callback:
$(".res").eq(i).html(data);
IDs need to be unique so instead do
$(document).on("submit", "form", function(event) {
event.preventDefault();
var id = this.id; // form1, form2 etc
....
or
$(document).on("submit", "form[name='v']", function(event) {
event.preventDefault();
var id = this.id; // form1, form2 etc
....
and then
$("#"+id.replace("form","result")).html(data); // result1, result2 etc
OR use a data attribute on the form:
echo "<form data-id='result".$count."' ....>
and have
$(document).on("submit", "form[name='v']", function(event) {
event.preventDefault();
var id = $(this).data("id"); // result1, result2 etc
....
and then
$("#"+id).html(data); // result1, result2 etc

LARAVEL: Use a javascript variable in php

I would like to get an id from a button. I need this id in my ajax request. This is my button:
<form>
<div class="form-group">
<button class="btn btn-primary" name="deletecar" id="{{$car->id}}">Delete</button>
</div>
</form>
I'm getting the id of the button this way:
<script type="text/javascript">var JcarID = this.id;</script>
Finally my Ajax Request.
$('[name="deletecar"]').click(function (e)
{
var JcarId = this.id;
e.preventDefault();
$.ajax({
type: "POST",
url: '{{ action('CarController#delete', [$user->id, $car->id])}}',
success: function (data)
{
// alert(data);
}
});
});
Thx for reading!
SOLUTION
Changed some bits in my code. I changed the url of my request.
$('[name="deletecar"]').click(function (e)
{
e.preventDefault();
$.ajax({
type: "POST",
url: '/users/{{$user->id}}/deletecar/'+this.id,
success: function (data)
{
// alert(data);
}
});
});
Hard to guess what is your requirement yet either if you want to get the button id value
this.attr('id'); or this.prop('id');
Or if you want to set the id value of button
$('[name="deletecar"]').attr('id', yourvalue)
I think you want to use JcarId rather $car->id in ajax request. Here what you can do rather than directly using PHP code in ajax call.
$('[name="deletecar"]').click(function (e)
{
var JcarId = this.id;
e.preventDefault();
$.ajax({
type: "POST",
url: '/CarController/delete',
data: {'carId':JcarId}
success: function (data)
{
// alert(data);
}
});
});

Passing prompt data from javascript to php using ajax

First of all i know there are multiple topics about this on stackoverflow, i read most of them but i still cant figure out why the following is not working.
So i have a form like this:
echo "<td> <form action=\"admin.php\" method=\"GET\" onsubmit=\" modifyPassword();\">
this is the modifyPassword function:
function modifyPassword(){
var newpw=prompt("Enter a new password");
if(newpw !== null){
$.ajax({
type: "GET",
url: "admin.php",
data: newpw,
success: function(data)
{
console.log(data);
}
});
}}
And when the form is actually submitted i want to get the value from what is typed in like this:
echo $_GET['data'];
This is all in the same file.
The output of $_GET['data'] does not show anything.
Can someone tell me what i am doing wrong?
//edit, more code:
I am using multiple forms, so here is the code that handles the form:
}elseif (isset($_GET['Modify'])){
echo $_GET['data'];
Form itself:
echo "<td> <form action=\"admin.php\" method=\"GET\" onsubmit=\" modifyPassword();\">
<input type='hidden' name='counter' value=\"$count\"/>
<input type=\"submit\" value=\"Modify\" name=\"Modify\"/>
Function that is provided:
<script type="text/javascript">
function modifyPassword(){
var newpw=prompt("Enter a new password");
if(newpw !== null){
$.ajax({
type: "GET",
url: "admin.php",
data: {data: newpw}, // passing a key/value pair
success: function(data)
{
console.log(data);
}
});
}}
</script>
data: newpw, should be data: {data: newpw}, This will result in $_GET['data'] being populated. In this case 'data' becomes the key, while 'newpw' is the value.
function modifyPassword(){
var newpw=prompt("Enter a new password");
if(newpw !== null){
$.ajax({
type: "GET",
url: "admin.php",
data: {data: newpw}, // passing a key/value pair
success: function(data)
{
console.log(data);
}
});
}}
I will argue that you should not use so many variables with the same name - just to make things less confusing during bug hunting.

Calling js function on button click isn't working

Any reason why this isn't running when clicked? I can't seem to figure it out.
<button id="button-container-like" onclick="rate($(this).attr(\'id\'))"><span class="thumbs-up"></span>Like</button>
<script>
function rate(rating){
var data = 'rating='+rating+'&id=<?php echo $eventId; ?>&userid56=<?PHP echo $userid55; ?>';
$.ajax({
type: 'POST',
url: 'includes/rate.php', //POSTS FORM TO THIS FILE
data: data,
success: function(e){
$(".ratings").html(e); //REPLACES THE TEXT OF view.php
}
});
}
</script>
here you go:
<button id="button-container-like" ><span class="thumbs-up"></span>Like</button>
<script>
jQuery(document).ready(function () {
$("#button-container-like").click(function() {
rate($(this).attr("id"));
});
function rate(rating) {
var data = 'rating=' + rating + '&id=<?php echo $eventId; ?>&userid56=<?PHP echo $userid55; ?>';
$.ajax({
type: 'POST',
url: 'includes/rate.php', //POSTS FORM TO THIS FILE
data: data,
success: function(e) {
$(".ratings").html(e); //REPLACES THE TEXT OF view.php
}
});
}
});
</script>
If there's nothing else going on in this code, then remove the slashes from your onclick code. They are unnecessary and cause an error.
onclick="rate($(this).attr('id'))"

What is the proper or best way to get data from ajax?

I have this javascript code with ajax.
$('#btnCart').click(function() {
var pName = document.getElementById('prodName').value;
$.ajax({
url: 'index.php',
data: 'prdName='+pName,
success: function(data) {
$('#prod').html(data);
}
});
});
I want to get the value of pName to be returned on my php. Here's my code on my index.php side:
<?php
$prodName = $_GET['prdName'];
echo $prodName;
?>
But it returns Unidentified index: prdName.
How can I get the value from ajax to my php? Please help...
if(isset($_GET['prdName'])){
$prodName = $_GET['prdName'];
echo $prodName;
}
You should send the data as:
data: {prdName: pName},
add this to your PHP code:
if(!empty($_GET['prdName'])){
$prodName = $_GET['prdName'];
echo cartTable($prodName);
}
also some corrections in js:
$('#btnCart').click(function() {
var pName = $('#prodName').val();
$.ajax({
url: 'index.php',
data: {prdName:pName},
success: function(data) {
$('#prod').html(data);
}
});
});
In index.php Get the prdName value from $_POST[] global array.
to send data to index.php file add type type:'POST' in ajax code
$.ajax({
type:'POST',
url: 'index.php',
data: {'prdName': pName},
success: function(data) {
$('#prod').html(data);
}
});
or you can use $.post() method in jQuery
$.post(
'index.php',
{'prdName='+pName},
function(data) {
$('#prod').html(data);
}
});
in index.php
if(isset($_POST['prdName']){
$prodName = $_POST['prdName'];
echo $prodName;
}

Categories