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.
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);
}
});
});
});
Been looking at some tutorials, since I'm not quite sure how this works (which is the reason to why I'm here: my script is not working as it should). Anyway, what I'm trying to do is to insert data into my database using a PHP file called shoutboxform.php BUT since I plan to use it as some sort of a chat/shoutbox, I don't want it to reload the page when it submits the form.
jQuery:
$(document).ready(function() {
$(document).on('submit', 'form#shoutboxform', function () {
$.ajax({
type: 'POST',
url: 'shoutboxform.php',
data: form.serialize(),
dataType:'html',
success: function(data) {alert('yes');},
error: function(data) {
alert('no');
}
});
return false;
});
});
PHP:
<?php
require_once("core/global.php");
if(isset($_POST["subsbox"])) {
$sboxmsg = $kunaiDB->real_escape_string($_POST["shtbox_msg"]);
if(!empty($sboxmsg)) {
$addmsg = $kunaiDB->query("INSERT INTO kunai_shoutbox (poster, message, date) VALUES('".$_SESSION['username']."', '".$sboxmsg."'. '".date('Y-m-d H:i:s')."')");
}
}
And HTML:
<form method="post" id="shoutboxform" action="">
<input type="text" class="as-input" style="width: 100%;margin-bottom:-10px;" id="shbox_field" name="shtbox_msg" placeholder="Insert a message here..." maxlength="155">
<input type="submit" name="subsbox" id="shbox_button" value="Post">
</form>
When I submit anything, it just reloads the page and nothing is added to the database.
Prevent the default submit behavior
$(document).on('submit', 'form#shoutboxform', function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'shoutboxform.php',
data: $(this).serialize(),
dataType: 'html',
success: function(data) {
alert('yes');
},
error: function(data) {
alert('no');
}
});
return false;
});
Use the following structure:
$('form#shoutboxform').on('submit', function(e) {
e.preventDefault();
// your ajax
}
Or https://api.jquery.com/submit/ :
$("form#shoutboxform").submit(function(e) {
e.preventDefault();
// your ajax
});
How to post one variable in ajax call to multiple php file's using URL method..
My data is as follow..
<select name="districts" id="district_list" class="update" onChange="getDist(this.value)" >
<option value="d1">east</option>
<option value="d2">west</option>
</select>
I want to pass these id value to another two php files using ajax and i tried as follow..
function getState(val) {
$.ajax({
type: "POST",
url: "get_dist.php",
url: "get_city.php",
data:'states_id='+val,
success: function(data){
$("#district_list").html(data);
}
});
}
Please try this
<select name="districts" id="district_list" class="update" onChange="getDist(this.value) ; getCity(this.value)" >
<option value="d1">east</option>
<option value="d2">west</option>
</select>
<script>
function getDist(val){
$.ajax({
type: "POST",
url: "get_dist.php",
data:'states_id='+val,
success: function(data){
$("#district_list").html(data);
}
});
}
function getCity(val){
$.ajax({
type: "POST",
url: "get_city.php",
data:'states_id='+val,
success: function(data){
$("#city_list").html(data);
}
});
}
</script>
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>
I am working on a login form that gets loaded inside a div (parent of .messageboxcontent) with .load on a button press. It all works till the 3rd time I press submit where the div disappears again (I guess by reload of the page and the div CSS is hidden). The URL has the $_POST data added after the 3rd submit (?username=<whatever_I_Fill_In_As_3rd>).
<div class="messageboxcontent">
<form id="ajaxform">
<table>
<tr>
<td>Gebruikersnaam: </td><td><input type="text" name="username" /></td><td>
</tr>
</table>
<input type="submit" value="Registreer" id="submit" />
</form>
</div>
<script>
$('form').on('submit', function( event )
{
var dataString = $(this).serialize();
event.stopPropagation();
//event.preventDefault();
$.ajax(
{
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$('.messageboxcontent').html(response);//FIXED by changing .messageboxcontent to parent.
}
});
return false;
});
</script>
I tried different kind of approaches like:
$('form').submit(function(event) {
//..
}
//
$('#ajaxform').submit(function(event) {
//..
}
//
$(document).ready(function()
{
$("#ajaxform").on("submit", function( event )
{
var dataString = $(this).serialize();
//event.stopPropagation();
event.preventDefault();
$.ajax(
{
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$("div.messageboxcontent").html(response);
}
});
return false; //with and without this.
});
});
Be consistent with quotes. Also close your div (<div class="messageboxcontent"></div>)
Try this:
$(document).ready(function(){
$("#ajaxform").on("submit", function( event ){
var dataString = $(this).serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$("div.messageboxcontent").html(response);
}
});
return false;
});
});
Hope that helps.
return false; or event.preventDefault(); inside your ajax function would stop the page from reloading.
Secondly, jQuery works with selector methods via class or id - so, in your case, you will want to use $('#ajaxform').
Lastly, the possible reason why you are facing with unexpected result like after 3rd time is because your form is wrapped inside a div that you want to manipulate the result. So, try rewrapping your DIV element to this: <div class="messageboxcontent"></div> and have your <form> stand on its own separately from messageboxcontent div.