I tried to serialize rather to push the elements value but still I get the array with no value. please anyone to help me figure out my problem
this is what I am trying to
<input type="checkbox" class="benf" name="benf[]" value="Angelus">
var arr=[];
$('input[name*="benf"]').each(function(){
if($(this).attr('checked')){
arr.push($(this).attr('value'))
}
});
var p = $('input .benf').serializeArray();
console.log(p);
console.log(arr);
$.ajax({
url:'myphp.php',
type:'post',
dataType:'text',
data:{mylist:arr},
success:function(data){
console.log(data);
},
error:function(xx){
console.log(xx);
}
});
You can do like this:
var arr=[];
$("input:checkbox[name*=benf]:checked").each(function(){
arr.push($(this).val());
});
var p = $('input.benf').serializeArray();
console.log(p);
console.log(arr);
$.ajax({
url:'myphp.php',
type:'post',
dataType:'text',
data:{mylist:arr},
success:function(data){
console.log(data);
},
error:function(xx){
console.log(xx);
}
});
var arr=[];
$.each($("input[name='approve_blog']:checked"), function(){
arr.push($(this).val());
});
console.log(arr);
$.ajax({
url:'myphp.php',
type:'post',
data:{'mylist' : arr },
success:function(data){
console.log(data);
},
error:function(xx){
console.log(xx);
}
});
<input type="checkbox" class="blog_checkbox" name="approve_blog" value="1" />
<input type="checkbox" class="blog_checkbox" name="approve_blog" value="2" />
Related
How can I send input values through AJAX on button click? My code is below. Thanks in advance.
while
{
<form class="commentform">
<input type="hidden" class="proid" name="proid" value="<?=$rr['id']?>">
<input type="text" class="form-control" name="comval" placeholder="Write a comment.." autocomplete="off">
<button class="btn btn-post" type="button">Post</button>
</div>
</form>
}
$(document).ready(function() {
$(document).on('click', '.btn-post', function(){
var thePostID = $(this).val;
$.ajax({
url: 'fetch_comments.php',
data: { postID: thePostID },
type: 'POST',
success: function() {
alert(data);
}
});
Firstly, the correct method is $(this).val(), not just $(this).val.
Secondly, you can simplify your code by getting the data from the closest form element using serialize(). Try this:
$(document).on('click', '.btn-post', function() {
var $form = $(this).closest('form');
$.ajax({
url: 'fetch_comments.php',
data: $form.serialize(),
type: 'POST',
success: function() {
alert(data);
}
});
});
$("form").serialize();
Serialize a form to a query string, that could be sent to a server in an Ajax request.
I am trying to get the query results by hitting the enter button on the drop down of the autocomplete results. It works fine if I use the mouse to click the result i want but wont work if i use the enter key.
The first function gets the autocomplete results and the second submits the result to get the data from that particular id.
JQUERY
$(document).ready(function () {
$("#equipment").autocomplete({
source: "search.php",
minLength: 2,
select: function(event, ui) {
$('#eq_id').val(ui.item.id);
}
});
$(document).off("keypress", "#equipment");
$(document).on("keypress", "#equipment", function(event) {
//if (!e) e = window.event;
if (event.keyCode == '13'){
$('#loading').show();
var eq_id = $("#eq_id").val();
var dataString = 'eq_id=' + eq_id;
$.ajax({
type: "POST",
url: "updateForm.php",
data: dataString,
success: function(html){
$("#formAddEquip").hide();
$("#showuserresult").show();
$("#showuserresult").html(html);
$("#equipment").val("");
$('#loading').hide();
}
});
return false;
}
});
});
And here is the form
<form action="" method="post" id="#somesearch">
<label for="equipment" id="eq_id_label">Search Equipment</label>
<input type="text" id="equipment" name="equipment" />
<input type="hidden" id="eq_id" name="eq_id" />
</form>
Start with these improvements
$(function() { // only one "load"
$("#equipment").autocomplete({
source: "search.php",
minLength: 2,
select: function(event, ui) {
$('#eq_id').val(ui.item.id);
}
});
$("#somesearch ").on("submit", function(e) {
e.preventDefault(); // stop submission
});
$(document).on("keypress", "#equipment", function(event) {
//if (!e) e = window.event;
if (event.keyCode == '13') {
$('#loading').show();
var eq_id = $("#eq_id").val();
var dataString = 'eq_id=' + eq_id;
$.ajax({
type: "POST",
url: "updateForm.php",
data: dataString,
success: function(html) {
$("#formAddEquip").hide();
$("#showuserresult").show();
$("#showuserresult").html(html);
$("#equipment").val("");
$('#loading').hide();
}
});
}
});
});
What I have here is ajax that's post information into textbox from database. This ajax work's in input field, but when I tried to use select box it doesn't working. Why is that?
not working
<select id="tag"><option value="">none</option><option value="crs">crs</option></select>
working
<input name="tag" id="tag" type="text" value="" />
Index.php
<select id="tag"><option value="">none</option><option value="crs">crs</option></select>
<input name="output" id="output" type="text" value="" />
<script type="text/javascript">
$(document).ready(function()
{
$('input[id="tag"]').change(function()
{
var prjt_code = $("#tag").val();
$.ajax({
type: "POST",
url: "autocomplete-ajax.php",
data :"prjt_code="+prjt_code,
dataType:'html',
type:'POST',
success:function(data){
//alert(data);
$('#output').val(data);
}
});
return false;
});
});
</script>
autocomplete-ajax.php
<?php
if(isset($_POST['prjt_code'])) {
$prjt_code = $_POST['prjt_code'];
$sql = $mysqli1->query("SELECT * FROM project WHERE project='$prjt_code'");
while($row1 = $sql->fetch_assoc())
{
$code = $row1['project_code'];
}
echo $code;
}
?>
You are targeting input[id="tag"] when you want select[id="tag"]
http://jsfiddle.net/releaf/U28jb/
$(document).ready(function() {
$('select[id="tag"]').on('change', function() {
var prjt_code = $("#tag").val();
alert(prjt_code);
$.ajax({
type: "POST",
url: "autocomplete-ajax.php",
data :"prjt_code="+prjt_code,
dataType:'html',
type:'POST',
success:function(data){
//alert(data);
$('#output').val(data);
}
});
return false;
});
});
i have a website with a jquery search form. I have the searchboxes in every page of the site indide the header. Once you enter the searchwords there it redirects you the the search.php
What i want to do is to make the form submitted as soon as the page loads, because i send the data to the searchbox inside the search.php
Example: in page 1 i enter something and click submit. In search.php loads and in the main search field i have somethis(what i entered before). But i have to click again the submit to see the results. Any idea how can i make the form autosubmit when im being redirected? So i can see the results instantly.
Here's the code:
<form method="get" id="myForm" name="myForm" >
<input type="text" name="search" id="search_box" value="<?php $_GET['q']; ?>" placeholder="Enter band, artist, name..." autofocus/>
<input type="submit" value="Go" />
<br />
</form>
and the jquery:
<script type="text/javascript">
$(function() {
//-------------- Update Button-----------------
$(".search_button").click(function() {
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
if(search_word==''){
} else {
$.ajax({
type: "GET",
url: "searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html) {
document.getElementById("insert_search").innerHTML = '';
$("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<p style="text-align:center;">Loading Results...</p>');
},
success: function(html){
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
}
});
}
return false;
});
//---------------- Delete Button----------------
});
</script>
$(function(){
$('#myForm').trigger('submit');
});
When the page is ready you simply trigger the submit using jquery.
$(function() {
$(".search_button").click(function() {
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
if(search_word==''){
} else {
$.ajax({
type: "GET",
url: "searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html) {
document.getElementById("insert_search").innerHTML = '';
$("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<p style="text-align:center;">Loading Results...</p>');
},
success: function(html){
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
}
});
}
return false;
});
});
$(document).ready(function(){
$('#myForm').submit();
});
You can try this way.
<form method="get" id="myForm" name="myForm" >
<input type="text" name="search" id="search_box" value="" placeholder="Enter band, artist, name..." autofocus/>
<input id="button-submit" type="submit" value="Go" />
</form>
<script type="text/javascript">
$(function() {
function _myFunction () {
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
if(search_word==''){
} else {
$.ajax({
type: "GET",
url: "searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html) {
document.getElementById("insert_search").innerHTML = '';
$("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<p style="text-align:center;">Loading Results...</p>');
},
success: function(html){
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
}
});
}
return false;
}
$("#button-submit").click(function(e) {
e.preventDefault();
_myFunction();
return false;
});
_myFunction(); //This is where the magic happens
});
</script>
By doing that, the page will trigger on loading the function that is used when you click on the button.
I am trying to submit a form that only has a radiobutton group with name=radiob. This is the script I am using for submitting data:
<script type="text/javascript">
$(function() {
$("#myForm").submit(function() {
var dataString = $(this).serialize();
$.ajax({
type: "POST",
url: "index.php?p1=<?php echo $_GET['p1']; ?>",
data: dataString,
success: function() {
$("#ppm").fadeOut("slow");
$("#ppmPlugin").load('?p1=<?php echo $_GET['p1'];?>&result=true');
}
});
return false;
});
});
</script>
But this is what I get in my PHP script:
$_POST array - empty
Array ( )
$_GET array
Array ( [p1] => xxx [result] => true )
But if I alert(dataString); I get radiob=2, that is, the value depending on the radiobutton selected..
How do I fix this problem?
I've tested your code and it works fine. Perhaps you have some kind of redirect in index.php?p1=xxx.
P.S. Tested with this code:
<?php $_GET['p1'] = 1; ?>
<form id="myForm">
<input type="radio" name="radiob" value="1" />
<input type="radio" name="radiob" value="2" />
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
$(function() {
$("#myForm").submit(function() {
var dataString = $(this).serialize();
$.ajax({
type: "POST",
url: "index.php?p1=<?php echo $_GET['p1']; ?>",
data: dataString,
success: function(data) {
alert(data);
}
});
return false;
});
});
</script>
And in index.php I have
<?php var_dump($_GET, $_POST); ?>