I have a problem. I used Ajax autocomplete for input field and fetch my listed data form database. Its worked nicely but I want when not found data then input field not send any data to sql.
<input type="text" name="country" id="country" class="form-control" placeholder="Enter Country Name" />
<div id="countryList"></div>
Ajax
$(document).ready(function(){
$('#country').keyup(function(){
var query = $(this).val();
if(query != '')
{
$.ajax({
url:"search.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#countryList').fadeIn();
$('#countryList').html(data);
}
});
}
});
$(document).on('click', 'li', function(){
$('#country').val($(this).text());
$('#countryList').fadeOut();
});
$(document).on('click', 'body', function(){
$('#countryList').fadeOut();
});
});
You can add the required parameter in HTML to make a field required. This way, you can't submit the form before you haven't filled in something in this field.
<input required
type="text" name="country"
id="country" class="form-control"
placeholder="Enter Country Name">
Related
I want to show value in textarea from a selected dropdown input field. The code is working fine with normal input field but i need the field as textarea and if change the field to textarea the code stops working.
<textarea id="mytext" class="form-control" style="height: 300px" name="text"></textarea>
$(document).ready(function(){
$('.productid').select2();
$(".productid").on('change', function(e){
var productid = this.value;
var tr=$(this).parent().parent();
$.ajax({
url:"getsignature.php",
method:"get",
data:{id:productid},
success:function(data){
tr.find ($('#mytext').val(data["signature"]));
}
})
})
})
Here #mytext is the id of my textarea.
i have text area with tinymce.in it
<script>
tinymce.init({
selector: '#mytext'
});
<textarea id="mytext" class="form-control" style="height: 300px" name="text"></textarea>
$(document).ready(function(){
$('.productid').select2();
$(".productid").on('change', function(e){
var productid = this.value;
var tr=$(this).parent().parent();
$.ajax({
url:"getsignature.php",
method:"get",
data:{id:productid},
success:function(data){
tr.find ($('#mytext').html(data["signature"]));
}
})
})
})
As you said your script is working fine on input field then now it should work fine on textarea as well.
To get value on textarea need to use html() instead of val().
Happy coding :)
I have a select dropdown, from that I'm calling an ajax function onchange event. Posting the result in a text input. This much is working perfectly. But when I submit the form the text input value is not submitting.
This is the ajax code. teachername dowpdown and teachercode text input
$("#teachername").change(function(){
var name = $(this).val();
var dataString = "name="+name;
$.ajax({
type: "POST",
url: "get-teachercode.php",
data: dataString,
success: function(result){
$("#teachercode").val(result);
}
});
});
this is the form
<form action="insert-assign-classes.php" method="post">
<select class="form-control" name="teachername" id="teachername" required>
</select>
<input type="text" disabled style="background-color:#fff;" class="form-control" name="teachercode" id="teachercode" required>
getting the value in insert-assign-classes.php file.
$teachercode= $_POST['teachercode'];//not working
I have a form, which I have divided in to there parts using tabs, in my second tab I'm using a select option and then try to auto fill 2 text box's and one text area using Ajax ,but although console log shows that ajax return the object but it doesn't fill the required fields.
tab
<div class="tab-pane fade " id="package_details">
select option
<select name="package" id="packageid" >
<option selected > Select a Package </option>
#foreach($package as $c)
<option value="{{$c->id}}">{{$c->tour_name}}</option>
#endforeach
</select>
Text fields i need auto filling
<input type="number" name="no_of_days" id="no_of_days" class="form-control"
placeholder="Days" >
<input type="number" name="cost" id="cost" class="form-control"
placeholder="Price" >
<textarea rows="4" cols="50" class="form-control" id="description" name="description" placeholder=" Package Details" ></textarea>
my Ajax code
$(document).on('change', '#packageid', function(e) {
e.preventDefault();
var pkid = $(this).val();
$.ajax({
type:'POST',
url: "{{ route('package.tour') }}",
dataType: "json",
data:{
'_token':$('input[name=_token]').val(),
'selectedid': pkid
},
success: function(data){
// console.log(data);
$('#description').val(data.description);
$('#no_of_days').val(data.no_of_days);
$('#cost').val(data.cost);
}
});
});
Function in my controller
public function getPackage(Request $request)
{
$data = packages::where('id', $request->selectedid)->get();
return response()->json($data);
}
what is wrong with my Ajax / JQuery code ?
check using like this in ajax response :
$("textarea#description").val(data.description);
$("input#no_of_days").val(data.no_of_days);
$("input#cost").val(data.cost);
I finally figured out ,since response is an array i had to use $("#description").val(data[0].description); and it works !
I am using Wordpress, and here is my html code:
<input class="form-control text-right" name="majorhead" required="" type="number" id="majorhead"/>
<div class="result_majorhead"></div>
JS code:
<script>
jQuery("#majorhead").on("keyup",function(){
jQuery.get(ajaxurl,{'action': 'majorhead'},
function (msg) { jQuery(".result_majorhead").html(msg);
});
});
</script>
Here is my code in function.php
add_action('wp_ajax_nopriv_majorhead', 'majorhead_function');
add_action('wp_ajax_majorhead', 'majorhead_function');
function majorhead_function(){
echo 'hello';
exit();
}
For now I am able to display a simple message "Hello" in the same web page whatever I type in the input box. Now I want to display the exact value from the input-text in the display message while typing.
for example: if I type 1, it should display 1 and If I type another another 2 then it should display 12.
What you need to do in your Javascript is:
Add "change" event so that you could use the arrows to control the "number" input.
Get the value of the input.
Add the value to your GET parameters.
jQuery("#majorhead").on("keyup change",function(){
var majorhead_value = $(this).val();
jQuery.get(ajaxurl,{'action': 'majorhead','majorhead_value': majorhead_value},
function (msg) { jQuery(".result_majorhead").html(msg);
});
});
In your PHP script you should display the GET value:
function majorhead_function(){
echo $_GET['majorhead_value'];
exit();
}
If you have multiple inputs you may process them like this:
jQuery("#text1, #text2, #text3").on("keyup change",function(){
var majorhead_value = parseInt(0+$("#text1").val());
majorhead_value += parseInt(0+$("#text2").val());
majorhead_value += parseInt(0+$("#text3").val());
jQuery.get(ajaxurl,{'action': 'majorhead','majorhead_value': majorhead_value},
function (msg) { jQuery(".result_majorhead").html(msg);
});
});
I assume that your HTML will look like this:
<input class="form-control text-right" name="text1" required="" type="number" id="text1"/>
<input class="form-control text-right" name="text2" required="" type="number" id="text2"/>
<input class="form-control text-right" name="text3" required="" type="number" id="text3"/>
<div class="result_majorhead"></div>
HTML CODE
<input class="form-control" placeholder="Search Service" id="search_service" name="service" type="text" autocomplete="off" value="">
Here is my Ajax Function in function.php
function search_service() {
$search_ser = $_POST['search_ser'];
echo $search_ser;
die();
}
add_action('wp_ajax_search_service', 'search_service');
add_action('wp_ajax_nopriv_search_service', 'search_service');
JS Code:
jQuery( "#search_service" ).keyup( function() {
var search_ser = jQuery(this).val();
var ajax_url = jQuery('#ajax_url_input').val();
jQuery.ajax({
type:'POST',
url: ajax_url,
data: {
action: 'search_service',
search_ser: search_ser,
},
beforeSend: function(){
},
success:function(data){
jQuery("._services_list").html(data);
}
});
});
i have a ScanField. In this field i'm scanning a barcode. After that i'm cutting the last four character of the bardcode-string and give it to the hiddenField. And from that hidden field when i click on the search button i pass it to the php site via ajax.
for example: i'm scanning a barcode: TWRG000000009102 in the hiddenfield shows 9102 and after that im passing the value to ajax.
Everthing works fine but i would like to do it automatically. When the hidden inputField was filled it should fire an event and pass the value to ajax.
my code:
<label for="myType">
<select id="myType" name="myType" size="5">
<option value="01">B&C</option>
<option value="02">James Nicholson</option>
<option value="F.O.L">Fruit Of The Loom</option>
<option value="TeeJays">TeeJays</option>
</select>
</label>
<br>
<label for="hiddenField">hiddenField:</label>
<input type="text" name="hiddenField" style="width:300px"><br>
<label for="myScan">Scanfield:</label>
<input type="text" name="myScan" style="width:300px" autofocus>
<button type="submit">Search</button>
<div id="result"></div>
<script>
$(document).ready(function(){
$('input[name=myScan]').on('keypress', function(e){
if(e.which == 13) {
var scanField = $(this).val();
console.log(scanField);
var lastFour = scanField.substr(scanField.length - 4);
$('input[name=hiddenField]').val(lastFour);
}
});
$('button').on('click', function(){
var postForm = {
'myType' : $('#myType').val(),
'myScan' : $('input[name=hiddenField]').val()
};
$.ajax({
url: "index.php",
type: "POST",
data: postForm,
dataType: "text",
success: function(data){
$('#result').html(data);
}
});
});
});
here the html example: https://jsfiddle.net/froouf9f/
Once you save value to hidden field, you can trigger button click event using:
$("button").trigger("click");
Try this:
$('input[name=myScan]').on('keypress', function(e){
if(e.which == 13) {
var scanField = $(this).val();
console.log(scanField);
var lastFour = scanField.substr(scanField.length - 4);
$('input[name=hiddenField]').val(lastFour);
$("button").trigger("click");
}
});