When I click the submit on button, the appended elements are not submitted. I already tried to change append() to appendTo() and html(). Please help.
$('select[name="bidang"]').on('change', function(e) {
e.preventDefault();
var id_bidang = $(this).val();
// AJAX request
$.ajax({
url: '<?php echo base_url()?>form_jurnal/getSubBidang',
method: 'GET',
data: {
id_bidang: id_bidang
},
dataType: "json",
success: function(response) {
$('select[id="sub_bidang"]').empty();
$.each(response, function(key, value) {
$('select[id="sub_bidang"]')
.append('<option value="' + value.id_subbidang + '
selected ">'+ value.nama_subbidang +'</option>');
});
}
});
});
<label>Sub Bidang :</label>
<select id="sub_bidang" name="sub_bidang">
<option>--Pilih Sub Bidang--</option>
</select>
Related
I want to create an ajax post request that gets the value of the radio button then use it in a PHP conditional statement.
So far i have tried this code (all code is from one php file):
$(document).ready(function () {
$('.radio-buttons input[type="radio"]').click(function(){
var subject= $(this).val();
$.ajax({
url: 'home.php',
type: 'POST',
data: {
'subject': subject
},
success: function(response) {
alert(response);
}
});
});
});
<form id="form1" method="POST" class="radio-buttons ">
<input class="radio-filter" type="radio" name="subject" value="A">A</input>
<input class="radio-filter" type="radio" name="subject" value="B">B</input>
</form>
if (isset($_POST['subject'])) {
echo "Showing!";
}
the alert message shows the value of the radio button when I clicked them but the echo in PHP condition is not showing.
You are using alert(subject); which will just alert the value of the radio button as you've mentioned.
Change that line to alert(response); to alert the response on success.
The alert(subject) needs to be alert(response).
Change alert(subject) to alert(response)
because 'subject' is what you have been sent! so after it 'subject' will receipt by your PHP process and returned as response(echo "Showing") on value of the function an object success: function(response)
and alert the response to see data/text "Showing"
$(document).ready(function () {
$('.radio-buttons input[type="radio"]').click(function(){
var subject= $(this).val();
$.ajax({
url: 'home.php',
type: 'POST',
data: {
'subject': subject
},
success: function(response) {
alert(response);
}
});
});
});
i want to make a ajax call to controller when a value
is selected from select box.
this is my code:
<select class="form-control required" name="law_name" id="law_name">
#foreach($law_name as $lawname)
<option value="{{$lawname->id}}">{{$lawname->law_name}}
</option>
#endforeach
</select>
<script>
$("#law_name").on('change', function(){
alert('123');
$.ajax({
type: 'POST',
dataType: "json",
data: data,
url: "{{ URL::to('admin/SubLawController/index') }}",
success: function (response) {
}
});
});
</script>
my script is not running when i change value from select box
following is jquery code for making ajax call on change event of dropdown box,
$(function() {
$("#law_name").change(function () {
alert( $('option:selected', this).text() );
$.ajax({url: "http://xyz"+ $( this ).text(), success: function(result)
{
$("#div1").html(result);
}});
});
});
Code is in jquery , you have to use xmlhttprequest object for pain javascript.
I am getting Id value from my AJAX and I am also able to display it. I set the Id value input text in the AJAX and displaying it on HTML like this <input value="4864" id="compare_id" type="hidden"> Now I have to pass that value to PHP to get the result from database.
Is there any idea how to do it?
AJAX
$(document).ready(function() {
arr = [];
$("[type=checkbox]").click(function() {
$.ajax({
type: "POST",
url: "includes/compare_process.php", //
data: 'users=' + arr,
dataType: 'json',
success: function(msg) {
$("#pics_name,#pics_Id").empty();
$.each(msg, function() {
$("#pics_Id").append("<input type=hidden value=" + this.Id + " id=compare_id name=compare_id>");
//alert(msg.id);
});
},
error: function() {
alert("failure");
}
});
});
});
//tried AJAX
$(document).ready(function(){
$('#search-button').click(function(){
$.ajax( {
type: "GET",
url: 'includes/compare_process.php?key=compare_details',
data: $('#search-form').serialize(),
success: function(response) {
//$('#response').html(response);
alert(response);
}
} );
});
});
PHP
<div class="bg-popup" style="display: none;" id="open_compare_popup">
//popup code here
<?php
$val2=htmlentities($_GET['compare_id']);
echo $val2;
$sql = "SELECT * FROM `request` WHERE Id IN($val2)";
?>
//end popup code here
This output I am getting from AJAX
<form action="#" method="get" id="search-form">
<span id="pics_Id">
<input value="4869" id="compare_id" name="compare_id" type="hidden">//output
<input value="4884" id="compare_id" name="compare_id" type="hidden">//output
<input value="5010" id="compare_id" name="compare_id" type="hidden">//output
</span>
<button class="action action--button action--compare" type="button" id="search-button" name="search-button"><span class="action__text">Compare</span></button>
</form>
I have to pass the input value to PHP after clicking on a button.
I have a page that lists a bunch of items with add to cart buttons, the user clicks the button it fires AJAX which adds the item to the php cart and adds the item to the sidebar for a visual cue of what's in the cart, with a remove button. Problem is, when i click the remove button it refreshes the page even though i have prevent default attached to the function
This works
$(document).ready(function(e) {
$('.additem').click(function(e) {
e.preventDefault();
$(this).html('Added').attr('disabled' , true);
$(this).closest('form.form_add').submit()
});
$('form.form_add').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "buy-page-handler.php",
data: $(this).serialize(),
dataType: "json",
success: function(result) {
var id = result.id;
var name = result.name;
var qty = result.qty;
var price = result.price;
$('#sidebar').append('<div class="cart_cont">'
+'<div class="desc">'+name+' '+price+'</div>'
+'<div class="remove">'
+'<form method="post" class="form_delete">'
+'<button type="submit" class="removeitem">Remove</button>'
+'<input type="hidden" name="id" value="'+id+'">'
+'<input type="hidden" name="item-remove" value="true">'
+'</form>'
+'</div>'
+'</div>');
}
});
});
This doesn't work
$('.removeitem').click(function(e) {
e.preventDefault();
$(this).closest('.form_delete').submit()
});
$('.form_delete').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "buy-page-handler.php",
data: $(this).serialize(),
success: function() {
alert("success")
}
});
});
This is my first attempt at using the jquery/ajax/php combination, so i'm sure its a bit rough.
Any help would be greatly appreciated.
The issue is that your class="removeitem" elements are added dynamically after the DOM is ready, so your new elements are not bound to $('.removeitem').click(). Try binding it by delegating to the parent -
$('#sidebar').on('click', '.removeitem', function(e) {
e.preventDefault();
$(this).closest('.form_delete').submit()
});
Just change:
<button type="submit" class="removeitem">Remove</button>
to:
<button type="button" class="removeitem">Remove</button>
How can I call another script and pass a id so I can fill another drop down pulling data from mysql. I have added the scripts below I just don't understand how to call them
$( document ).ready(function()
{
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "customer.php",
dataType: "html", //expect html to be returned
success: function(response){
$(".responsetext").html(response);
//alert(response);
}
});
});
THIS SCRIPT FILLES THE DROPDOWE BELOW USING responsetext
<select name="customer"id="customer" class="form-control input-sm responsetext">
</select>
SO WHEN I SELECT THIS IT WILL PASS THE ID AND RUN THE SCRIPT BELOW
$(function() { // document.ready
$("#id").on("change", function() {
$.ajax({
url: "contact.php",
type: "GET",
data: {
id: $(this).val()
},
success: function(data) {
$(".contactresults").html(data);
}
});
});
});
SO IT WILL FILL THIS SELECT BOX WITH contactresults
<select name="contact" class="form-control input-sm contactresults" id="contact">
</select>