how to pass arrays through ajax PHP
Hi all how to get multiple values into an array then how to pass arrays through ajax to PHP
HTML CODE
<input type='hidden' value='Jhon' class='pnm name' id='name-1'>
<input type='hidden' value='jamma' class='pnm name' id='name-2'>
<input type='hidden' value='saki' class='pnm name' id='name-3'>
<input type='hidden' value='Jhon' class='pnm id' id='id-1'>
<input type='hidden' value='jamma'class='pnm id' id='id-2'>
<input type='hidden' value='saki' class='pnm id' id='id-3'>
<input type='button' class='tn' value='send'>
AJAX CODE
$(".tn").click(function(){
var trid[]=$('.id').val();
var name[]=$('.name').val();
$.post("/free/",
{trid:trid, name:name},
function(data){
alert(data);
});
});
});
Please Help me how to pass two arrays in a single request through ajax, Thank you in advance
If you need to pass all variables to AJAX, use .serialize().
var data = $('#form_id').serialize();
Related
See question -
I've tried this:
echo "<form action='index.php' method='post'>
Use the previous input of participants: <input type='radio' name='participants[]'value='$participants[0]'>
OR <br>
<form action='index.html' method='post'>
Use a different input of participants: <input type='radio' name='participants[]' value='0'>
<input type='submit' value='send' name='send'> </form> <br>";
Both of the radio button lead me to index.php when I want to be able to go to index.html in case i press on the second radio button.
You may solve it by using JQuery
<form action='index.php' method='post'>
Use the previous input of participants:
<input type='radio' name='participants[]' value='$participants[0]'>
<br/>OR <br>
Use a different input of participants:
<input type='radio' name='participants[]' value='0'>
<input type='submit' value='send' name='send'>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var form = $('form');
var input = $('input[type=radio]');
input.on('click', function() {
if ($(this).val()==0) {
form.prop('action', 'index.html');
} else {
form.prop('action', 'index.php');
}
});
});
</script>
I made a html and a php page. I put 3 images in html page showing different genre of movies- horror, fantasy, romance. I want the images to work as form submit button and should get redirected to the php page and the php page should get the genre of the image.
What I already tried- I tried lot of different things but nothing worked.
And I wonder how php page will take different inputs from different images using $_POST method.
Expected output-
Suppose if user clicked on image of genre 'horror', then in php page value of $genre should be Horror.
You can use an <img> tag inside a <button> element.
<form method="post">
<button name="genre" value="horror" type="submit"><img src="./img/horror.jpg"></button>
<button name="genre" value="comedy" type="submit"><img src="./img/comedy.jpg"></button>
</form>
You can access the value of the submit button in your PHP using $_POST['genre'] (or whatever the name attribute of your buttons is)
The images should have an href tag that redirects to your PHP page. Note that this method will mean that you should get the value through $_REQUEST variables and not POST or GET. For example lets say href='myphp.php?genre=horror'. and in the PHP file $genre = $_REQUEST['genre'];
You could try something similar to the following:
<input class='genre' type='image' src='/images/genres/horror.jpg' data-genre='horror' />
<input class='genre' type='image' src='/images/genres/sci-fi.jpg' data-genre='sci-fi' />
<input class='genre' type='image' src='/images/genres/chickflick.jpg' data-genre='chickflick' />
<script>
Array.prototype.slice.call( document.querySelectorAll('input.genre') ).forEach( function(input){
input.addEventListener('click', function(e){
e.preventDefault();
location.href='info.php?genre='+this.dataset.genre
});
})
</script>
Assign each input a dataset attribute which you query later in the click handler. That dataset value is then used to construct the url...
Alternatively a slightly different approach would be to POST the data by setting the value of a hidden field to the dataset attribute value- like:
<form name='genres' method='post'>
<input class='genre' type='image' src='/images/genres/horror.jpg' data-genre='horror' />
<input class='genre' type='image' src='/images/genres/sci-fi.jpg' data-genre='sci-fi' />
<input class='genre' type='image' src='/images/genres/chickflick.jpg' data-genre='chickflick' />
<input class='genre' type='image' src='/images/genres/thriller.jpg' data-genre='thriller' />
<input class='genre' type='image' src='/images/genres/adventure.jpg' data-genre='adventure' />
<input class='genre' type='image' src='/images/genres/period-drama.jpg' data-genre='period-drama' />
<input type='hidden' name='genre' />
</form>
<script>
let form=document.forms.genres;
let genre=form.genre;
Array.prototype.slice.call( document.querySelectorAll('input.genre') ).forEach( function(input){
input.addEventListener('click', function(e){
e.preventDefault();
/* set hidden input value */
genre.value=this.dataset.genre;
/* append the genre to the qction/querystring */
form.action='?genre='+this.dataset.genre;
/* go */
form.submit();
});
})
</script>
I'm trying to send a GET Request using a normal form with checkboxes
<form action="" method="get">
<input type='checkbox' value='1' name='checkbox[]' value='1'>
<input type='checkbox' value='2' name='checkbox[]' value='2'>
<input type='checkbox' value='3' name='checkbox[]' value='3'>
<button type='submit' name='submit'>Submit</button>
</form>
Right now, When i submit the form, I get the following URL
Firefox: www.domain.com/page.php?checkbox[]=1&checkbox[]=2&checkbox[]=3
Chrome: www.domain.com/page.php?checkbox%5B%5D=1&checkbox%5B%5D=2&checkbox%5B%5D=3
both URLs doesn't seems good for SEO and ease of use.
How can i turn the URL to something prettier and simpler like
www.domain.com/page.php?checkbox=1,2,3
Jquery/javascript ajax the post.
Leaving out some of the JS assuming that would be more or less intuitive.
$(document).on('submit','.form-class',function(e){
e.preventDefault();//stops all posts...
var checkboxes = $(this).find('input[name="checkbox"]');
if(checkboxes.length > 0)
{
$.each(checkboxes,function(){
//Loop through each to add to a string or array and concat with "," or explode and implode it with commas.
//Than do an ajax get/post to a url with query param of your choosing.
});
}
});
Is there a way to get only a certain set of information from a form? Eg
<form>
<input name='I want this' value='one' type=text />
<input name='and this' value='one' type=text />
<input name='but not this' value='one' type=text />
</form>
Where, obviously, i only want the first two fields but not the third one? I've got a user inventory on my website that looks like this:
<form action="" method="POST">
<input name='item_id' value='1' type='hidden'>
<input type='button' name='slot1' value='1'>
<input type='button' name='slot2' value='2'>
<input name='item_id' value='2' type='hidden'>
<input type='button' name='slot1' value='1'>
<input type='button' name='slot2' value='2'>
</form>
I want the users to be able to select, item 1 and equip it to slot 1 but The only way i can think of doing this right now is to have them all be separate forms. and i feel like that would be bad coding.
Yes, using jquery, select only the first element and second elements value, post it using ajax, and retrieve and process data server side.
var i1 = $('form').eq(0).find('[name="item_id"]').val() //Values from first form only
var i2 = $('form').eq(0).find('[name="slot1"]').val()
$.ajax({
url: "test.php",
data: {i1:i1, i2:i2}, //Send this to php file.
}).done(function() {
$(this).addClass("done");
});
When you submit a form the values of all inputs associated with that form will be added to the $_POST (array) variable. You can always choose to ignore values when certain conditions apply. If that's not an option, I think you should opt for separate forms.
Another thing you could do—I do not understand the context of your problem, so I'm not sure if it applies to your situation—is have a user choose between "Item 1" and "Item 2" via radio buttons in your form. You can then base your form handling logic on the choice people made in the form.
I have multiple forms on one page all are like this: The ID value changes but the options can be similar.
<form class="test"><td>4000</td>
<td align='center'><input type='radio' name='radio' value='car' checked></td>
<td align='center'><input type='radio' name='radio' value='boat' ></td>
<td align='center'><input type='radio' name='radio' value='Plane' ></td>
<input type='hidden' name='id' value='4000'/>
<input type='hidden' name='location' value='local'/>
<div class="form" style="display: none;">
</div></form>
Using JQuery I'm trying to submit this when any of the 3 radio buttons are selected.
<script>
$("input[name='radio']").click(function() {
var CurrectForm=$(this).parents('.test:first');
$.post(
'do.php',
CurrectForm.serialize(),
function( response ) {
CurrectForm.find('#form').html( response );
show( response );
}
);
} );
</script>
I've used similar to the above with checkboxes and dropdown lists, which have worked fine. But this doesn't seem to submit the values to the do.php page. The values that are submitted are show in the div form. Doing a var_dump($_POST); results in an empty array.
Can someone point me in the right direction ?
Thanks
Changing the form ti this seems to work ?
<td><form class="test">
<input type='radio' name='radio' value='car' checked>
<input type='radio' name='radio' value='boat' >
<input type='radio' name='radio' value='Plane' >
<input type='hidden' name='id' value='4000'/>
<input type='hidden' name='location' value='local'/>
<div class="form" style="display: none;">
</div></form></td>
Why does changing the cause it to work ?
Jfiddle with working example :) http://jsfiddle.net/QvpH5/
My guess is that there are multiple forms on your page with the class test. What is happening, is when you use parents(), you don't realize it first finds all of the ancestors, and then searches for .test:first. This will return the very first form's values, regardless of which form is clicked.
Look at this jsFiddle to see the fix (change .parents to .parent): http://jsfiddle.net/SDzzr/