I build search query with option value.i get the country,state,city by json code.i get country list on onload by json code.but when i change value of country then top content are also show before get result with pagination.The loading img work fine in pagination but not in option values.
this is first link of select option image:-https://www.dropbox.com/s/jvie2x82l2vx4kp/search1.png?dl=0
second link is search image:-https://www.dropbox.com/s/1pe5r5uy9wi19m8/search2.png?dl=0
session_start();
if(isset($_GET['search']))
{
$q=$_GET['profession'];
$_SESSION['name']=$_GET['profession'];
}
else
{
session_unset();
}
if(isset($_GET['country']))
{
$_SESSION['country']=$_GET['country'];
}
if(isset($_GET['state']))
{
$_SESSION['state']=$_GET['state'];
}
if(isset($_GET['region']))
{
$_SESSION['region']=$_GET['region'];
}
enter code here
<script>
$(document).ready(function(){
$("#country").bind("change", function() {
$.ajax({
type: "GET",
data: "country="+$("#country").val(),
cache: false,
beforeSend: function(){ $("#ajaxLoader").show(); },
complete: function(){ $("#ajaxLoader").hide(); },
success: function(html) {
$("#pagination").html(html).show();
}
});
});
});
</script>
<div id="mhead"><h2>Search Result</h2></div>
<div class="content">
<body onload="listOfCountries('country');">
<form>
<p>Country:
<select name="country" id="country" onchange="listOfStatesOrCities(this,'state');" style="width:150px;"> */
<option value=""></option>
</select>
State:
<select name="state" id="state" onchange="listOfStatesOrCities(this,'region');" style="width:150px;">
<option value=""></option>
</select>
city:
<select name="region" id="region" style="width:150px;" >
<option value=""></option>
</select>
</p>
</form>
<div id="ajaxLoader" style="display:none"><img src="images/loading.gif" alt="loading..."></div>
<div id="loading" style="display:none"><img src="images/loading.gif" alt="loading..."></div>
<div id="pagination" cellspacing="0">
</div>
</div>
You can pass selector #pagination to fetch only the div with id pagination.
Try this:
$("#country").bind("change", function() {
$("#ajaxLoader").show();
$("#pagination").load(window.location.href + ' #pagination', { country: $("#country").val() }, function() {
$("#ajaxLoader").hide();
});
});
Related
How to set value to customerNumber(field from Marketing table) from database when I select an option from Request Number drop down list?
<div class="col-sm-2">
<label class="label" for="request_id">Request Number:</label>
<select class="form-control option" id="request_id">
<option >0 - Request Number</option>
#foreach ($customer_requests as $customer_request)
<option value={{$customer_request->id}}>{{$customer_request->id}} -{{$customer_request->requestNumber}} </option>
#endforeach
</select>
</div>
<div class="col-sm-2">
<label class="label" for="customerNumber" >Customer Number:</label>
<input type="text" class="form-control text" id="customerNumber" name="customerNumber">
</div>
I am a learner of laravel and I want to know should jQuery be used or not? And how?
<script>
$("#request_id").on({
click: function() {
}, keypress: function() {
$( this ).addClass( "inside" );
var val = $(this).val();
var data = Marketing::find(val);
$("#customerNumber").attr("value", data[customerNumber] );
}
});
</script>
for the jquery you can try like this one:
$('#request_id').change(function() {
var req_id= $(this).val();
$.ajax({
url:'{{url('/get/ref')}}/'+req_id,
method:'GET',
contentType: false,
processData: false,
success:function(result){
$("#customerNumber").val(result);
}
});
});
then, create a new controller to return customerNumber. something like:
public function customerNumber($req_id = 0){
$data = Marketing::find($req_id);
return $data->customerNumber;
}
I am trying to make a dependent select field but When I select the first field Nothing happen to the other field. I think the ajax code is not working because I use an alert in the starting of the function call by ajax and alert didn't appear but still I am not sure what's the problem. What's wrong with my code can anyone help me in solving this problem.
Html code
<form method="POST" action="{{url('search')}}">
#csrf
<div class="input-group col-sm-10 mt-5 offset-sm-1">
<select class="form-control" name="city">
<option value="none">---Choose City---</option>
<?php foreach ($result['city_data'] as $city) {
?>
<option value="<?php echo $city->id;?>"> <?php echo $city->name;?> </option>
<?php } ?>
</select>
<select class="form-control" name="area">
<option>Choose City</option>
</select>
<div class="input-group-append">
<input type="submit" class="btn searchbutton" value="Search" name="search_button">
</div>
</form>
Ajax code
<script type="text/javascript">
$(document).ready(function() {
$('select[name="city"]').on('change', function(e) {
var cityID = $(this).val();
if(cityID) {
$.ajaxSetup({
headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }})
e.preventDefault();
$.ajax({
url: '/myform/ajax/'+cityID,
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="area"]').empty();
$.each(data, function(key, value) {
$('select[name="area"]').append('<option value="'+ key +'">'+value+'</option>');
});
}
});
}
else{
$('select[name="area"]').empty();
}
});
});
</script>
web.php
Route::get('myform/ajax/{id}','services4uController#myformAjax');
Controller.php
public function myformAjax($id)
{
echo "<script>alert('Code reached to this stage');</script>";
$area = DB::table("area")
->where("id_city",$id)
->lists("name","id");
return json_encode($area);
}
When my select field loads, it successfully renders. Once I type at least the two character, it successfully pulls items from the server and lists them as options. However, if I try to select one of them, nothing happens. The drop-down popup stays open. Nothing gets put in the actual field. There are no errors in the JavaScript console. Its like I didn't click anything.
$(document).ready(function() {
$(".cusName").select2({
placeholder: '--- Select Item ---',
//allowClear: true,
ajax: {
url: '<?php echo base_url();?>search',
dataType: 'json',
delay: 250,
processResults: function(data) {
console.log(data)
return {
results: data
};
},
cache: true
}
});
$(".cusName").on('change', function() {
var data = $(".cusName").select2('data')[0];
console.log(data);
$("#cus_id").val(data.customer_id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet" />
<select class="cusName form-control" name="cusName"> </select>
<div class="col-sm-8">
<input type="text" class="form-control" id="cus_id" name="cus_id" value="">
</div>
since your problem was not ajax call as per your description i replaced it with the hardcoded values see below code snippet, if it works as you wanted it to
$(document).ready(function() {
$(".cusName").select2({
placeholder: '--- Select Item ---',
allowClear: false
});
$(".cusName").on('change', function() {
var data = $(".cusName").val();
console.log(data);
$("#cus_id").val(data);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet" />
<select class="cusName form-control" name="cusName">
<option value="">select Any</options>
<option value="apple">apple</options>
<option value="mango">mango</options>
<option value="juice">juice</options>
</select>
<div class="col-sm-8">
<input type="text" class="form-control" id="cus_id" name="cus_id" value="">
</div>
How do I want to post a form using jquery serialize function? I tried to post the form value but on the php part, the value is not shown. Below are my codes:
html
<form name="myform">
ID : <input type="text" name="id_staff" id="id_staff">
<select name="sort" id="sort">
<option value="0">Choose Status</option>
<option value="1">All</option>
<option value="2">Pending</option>
<option value="3">Approve</option>
<option value="4">Not Approve</option>
</select> <input type="button" id="submit" value="Papar" />
<div id="loader"></div>
</form>
jQuery
$(document).on("click", "#submit", function(e){
e.preventDefault();
var sort = $("#sort").val(),
id_staff = $("#id_staff").val(),
data = $('form').serialize();
$.post('result.php',
{
data : data
}, function(data){
$("#loader").fadeOut(400);
$("#result").html(data);
});
});
PHP
if(isset($_REQUEST["sort"])){
$sort = $_REQUEST['sort'];
$id_staff = $_REQUEST['id_staff'];
echo "Your Id : $id_staff <p/>";
echo "You choose : $sort";
}
If I console.log(data), I get: id_staff=12345&sort=1
Your server is receiving a string that looks something like this (which it should if you're using jQuery serialize()):
"param1=someVal¶m2=someOtherVal"
...something like this is probably all you need:
$params = array();
parse_str($_GET, $params);
$params should then be an array that contains all the form element as indexes
If you are using .serialize, you can get rid of this:
var sort = $("#sort").val(),
id_staff = $("#id_staff").val(),
You data will be available as follows with .serialize:
your-url.com/sort=yoursortvalue&id_staff=youridstaff
It should be:
$(document).ready(function(e) {
$("#myform").submit(function() {
var datastring = $( this ).serialize();
$.post('result.php',
{
data : datastring
}, function(data){
$("#loader").fadeOut(400);
$("#result").html(data);
});
})
})
On PHP side you simple need to access it using the $_GET['sort'].
Edit:
To view the data, you should define a div with id result so that the result returned is displayed within this div.
Example:
<div id="result"></div>
<form name="myform">
ID : <input type="text" name="id_staff" id="id_staff">
<select name="sort" id="sort">
<option value="0">Choose Status</option>
<option value="1">All</option>
<option value="2">Pending</option>
<option value="3">Approve</option>
<option value="4">Not Approve</option>
</select> <input type="button" id="submit" value="Papar" />
<div id="loader"></div>
</form>
I am able to do it this way:
jQuery
<script type="text/javascript">
$(document).ready(function() {
var form = $("#myform");
$("#myform").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: 'result.php',
data: form.serialize(),
success: function(response) {
console.log(response);
$("#result").html(response);
},
error: function() {
alert('Error Submitting');
}
})
})
})
</script>
PHP
if(isset($_POST["id_staff"])){
$sort = $_POST['sort'];
$id_staff = $_POST['id_staff'];
echo "<p>Your Id : $id_staff</p>";
echo "You choose : $sort";
}
Do give a comment if it need improvement or better solution.
I am new in SE 4.20. I am having a problem of creating a form element onchange of this form element.
For explanation,
I have a form. I am able to return some select option value on change of this form element. But now I want to add a form element on change of this element.
You want to add a form element, like a text box, if the user changes the select box? Maybe something like:
$("#selectBoxId").change(function (){
$("#formId").append("<input type='text' name='additionalFormElement' />");
});
Here is the html:
<div class="form-elements">
<div id="typeName-wrapper" class="form-wrapper">
<div id="typeName-label" class="form-label">
<label for="typeName" class="required">Type</label>
</div>
<div id="typeName-element" class="form-element">
<select name="typeName" id="typeName">
<option value="Grant">Grant</option>
<option value="Cooperative Agreements">Cooperative Agreements</option>
<option value="Publication">Publication</option>
</select>
</div>
</div>
<div id="resourceName-wrapper" class="form-wrapper">
<div id="resourceName-label" class="form-label">
<label for="resourceName" class="required">Name</label>
</div>
<div id="resourceName-element" class="form-element">
<select name="resourceName" id="resourceName">
<option value="ABC">ABC</option>
<option value="XYZ">XYZ</option>
</select>
</div>
</div>
Here are the mootool js:
$('typeName').addEvent('change', function(event) {
var typeName = $('typeName').value;
var base_path = "<?php echo $this->baseUrl();?>/";
var url = 'http://xxxxxxx.com/test/resource/getresourcebytype';
var request= new Request.JSON({
url: url,
method: 'GET',
data: {"typeName":typeName},
onSuccess: function( response )
{
console.log(response);
//clear the select box
var name = $('resourceName');
while (name.firstChild) {
name.removeChild(name.firstChild);
}
//now add new option
for (var i = 0; i < response.length; i++){
console.log(response[i]);
new Element('option', {'value': response[i].value, 'text':response[i].label}).inject(name);
}
}, onFailure: function(){
console.log('failed');
}
});
request.send();
});