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 :)
Related
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 want to update data of input field with ajax. Being new to Ajax, I've tried this so far. I am passing two variables(i.e, Name and Col to identify the name and id of the input field). So now I am stuck with this. I want to update the value of the input field with name="email_id" and Column name in mysql table "Email". So I passed the two variable so that php can identify the input name. But how do I pass the new data in the field? I have done it in another form with FormData but I need help in this case. And I apologise if I am not being specific, its my first query on stackoverflow.
HTML:
<input type="email" onblur="validate()" value="<?php echo $row['Email']; ?>" id="email_id" data-toggle="tooltip" title="Invalid Email" data-placement="top" data-content="Email must be in the format xyz#abc.com/net/info/org/in" name="email_id" placeholder="E-mail ID eg. max#mymail.com" class="form-control col-sm">
Jquery:
$('input').on("change",function(){
console.log("Clicked");
var Name=$(this).attr('name');
var Col=$(this).attr('id');
console.log(Name);
$.ajax({
url:"update.php",
method:"post",
data:{"Col":Col,"Name":Name},
success:function(response){
console.log(response);
}
});
});
You can use document.getElementByID().value to grab the value of the input field:
$('input').on("change",function(){
console.log("Clicked");
var Val=document.getElementById('email_id').value;
var Name=$(this).attr('name');
var Col=$(this).attr('id');
$.ajax({
url:"update.php",
method:"post",
data:{"Col":Col,"Name":Name, "Email":Val},
success:function(response){
console.log(response);
}
});
});
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");
}
});
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">
I have here Jquery code with ajax/json. First i will discuss the flow. I have 3 textboxes, my item textbox pass it's value to auto-complete.php through ajax to get it's details. The return value is post or place into mode textbox. And if the post value is 1 or 2 the number textbox should change is css into display:none. But the problem this not working, I set the number textbox into readonly. The change function is working when I change directly the value of number textbox. Why isn't working when the value is post value?
<script>
$(document).ready(function() {
$("#number").css("display","none");
$(document).on('change','#mode',function(){
if($("#mode").val() =="1"){
$("#number").css("display","");
} else if($("#mode").val() =="2"){
$("#number").css("display","");
} else {
$("#number").css("display","none");
}
return true;
});
});
</script>
<input name="item" id="item" type="text"/>
<input name="mode" id="mode" type="text"/>
<input name="number" id="number" type="text" readonly />
<script type="text/javascript">
$(document).ready(function()
{
$('#item').change(function()
{
var item= $("#item").val();
$.ajax({
type: "POST",
url: "autocomplete-ajax.php",
data :"item="+item,
dataType:'json',
type:'POST',
success:function(data){
var mode=data.mode;
//send to element ID
$('#mode').val(mode);
}
});
return false;
});
});
</script>
When you change the value using JavaScript it won't trigger events.
A simple fix is to trigger the event yourself after you update the value.
success:function(data){
var mode=data.mode;
//send to element ID
$('#mode').val(mode).change();
/* OR */
$('#mode').val(mode).trigger('change');
}