I've used jquery to get an "id" as a value for an input according to a dropdown value. Now the problem is, I want to use the 'id' to insert value to some other inputs. I don't know which event method to be used. For testing, I used the keyup method to check if the code works, when I manually type in a number, it works. So the problem is with the event method I choose. Please give me some suggestions.
//Get id
$(document).ready(function() {
$('#salary_eid').change(function() {
var sid = $(this).val();
var data_String = 'sid=' + sid;
$.get('search1.php', data_String, function(result) {
$.each(result, function(){
$('#can').val(this.c_id);
});
});
});
//display other information
$('#can').change(function() {
var id = $(this).val();
var data_String1 = 'id=' + id;
$.get('search.php', data_String1, function(result1) {
$.each(result1, function(){
$('#morning_rate').val(this.cMorning);
$('#night_rate').val(this.cNight);
$('#ot_rate').val(this.clientOt);
});
});
});
});
<label>Name</label>
<input type="text" name="salary_eid" />
<select id="salary_eid">
<option>opt1</option>
<option>opt2</option>
</select>
<input type="hidden" name="can" id="can" class="form-control" >
You can trigger the keyup() event from the id code, this will then work through a manual or jQuery edit,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
//Get id
$(document).ready(function() {
$('#salary_eid').change(function() {
var sid = $(this).val();
$('#can').val(sid).keyup();
});
});
//display other information
$(document).on('keyup', '#can', function() {
console.log($(this).val())
});
</script>
<label>Name</label>
<input type="text" name="salary_eid" />
<select id="salary_eid">
<option>opt1</option>
<option>opt2</option>
</select>
<input type="text" name="can" id="can" class="form-control" />
If you are going to hide the second input then I might suggest using a function instead without an input,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
//Get id
$(document).ready(function() {
$('#salary_eid').change(function() {
var sid = $(this).val();
display_info(sid)
});
});
//display other information
function display_info(value) {
console.log(value)
};
</script>
<label>Name</label>
<input type="text" name="salary_eid" />
<select id="salary_eid">
<option>opt1</option>
<option>opt2</option>
</select>
Related
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 this code:
<div id = "askpost" class="row">
<input type="hidden" name="askid" id="askid" value="<?php echo $askpostid ?>">
</div>
and i want to get the id of the hidden input but when tried using this:
<script>
$(document).ready(function() {
$('input[name="iaskcomment"]').on('keyup', function(e){
e.preventDefault();
var comment = $(this).val();
var ask_id = $(this).siblings('.askid').val();
alert(ask_id); <----undefined
});
});
</script>
i even used this code :
var sid = $(this).closest("div#askpost").find("input[type='hidden']").val();
but also i get "undefined". what i wanted to do is to get the id of $askpostid
direct use $("#askid").val(). No need to use anything like siblings()
Example:-
$(document).ready(function() {
$('input[name="iaskcomment"]').on('keyup', function(e){
e.preventDefault();
var comment = $(this).val();
var ask_id = $('#askid').val();
alert(ask_id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "askpost" class="row">
<input name = "iaskcomment"><br>
<input type="hidden" name="askid" id="askid" value="2">
</div>
Note:- Your code doesn't have any input with name iaskcomment. I have added in my example to just show you how it will work.So check at your end.
The textarea will show when I click add row. The textarea has item in autosuggestion on keyup. My problem is the first one shows autocomplete. anothers are not working
<textarea id="name" class="name" name="name"></textarea><ul></ul>
<textarea id="name" class="name" name="name"></textarea><ul></ul>
<textarea id="name" class="name" name="name"></textarea><ul></ul>
<script type="text/javascript">
$(document).ready(function(){
$(".name").keyup(function(){
var name = $(this).val();
$.ajax({
url:"ajax.php",
type:"POST",
data:{name:name},
success:function(res)
{
$(".name + ul").append("<li class=item>"+res+"</li>");
}
});
});
$("ul").on("click", "li", function(){
var item = $(this).text();
$(".name").val(item);
$("ul li").remove();
});
});
</script>
Here is an example that does not need any id associated with the text areas.
<textarea class="name" name="name1"></textarea><ul></ul>
<textarea class="name" name="name2"></textarea><ul></ul>
<textarea class="name" name="name3"></textarea><ul></ul>
<script type="text/javascript">
$(document).ready(function(){
$(".name").keyup(function(){
var field = $(this);
var name = field.val();
$.ajax({
url:"ajax.php",
type:"POST",
data:{name:name},
success:function(res)
{
field.next("ul").append("<li class=item>" + res + "</li>");
}
});
});
$("ul").on("click", "li", function(){
var li = $(this);
var item = li.text();
li.parent('ul').empty().prev('.name').val(item);
});
});
</script>
try
var name = $(this).val();
var data = name + "&Sessid=" + Math.random();
$.ajax({
url:"ajax.php",
type:"POST",
data:data,
success:function(res)
{
$(".name + ul").append("<li class=item>"+res+"</li>");
}
});
});
First of all, change id and name fields for your textarea. It's not good idea to give same id name to your elements.
<textarea id="name1" class="name" name="name1"></textarea><ul></ul>
<textarea id="name2" class="name" name="name2"></textarea><ul></ul>
<textarea id="name3" class="name" name="name3"></textarea><ul></ul>
Now, get id name by this:
var which_id = $(this).attr('id');
And use which_id variable to your ajax response.
$.ajax({
url:"ajax.php",
type:"POST",
data:{name:name},
success:function(res)
{
$("#"+which_id+" + ul").append("<li class=item>"+res+"</li>");
}
});
My form
<div class="replymsg">
<form class="mainform" action="reply.php" method="POST">
<textarea class="replytext" ></textarea>
<button data-value="<?php echo $id; ?>"
class="replybutton">Submit</button>
</form>
</div>
$id comes from a MYSQL database. The following "test" code gives me the id of the reply form using Jquery:
<script>
$(".replybutton").click(function(){
alert($(this).data("value"));
});
</script>
Value of commentid :id is not passed when I use "actual" code for the website as follows (reply:replytext ... sends message is working):
<script>
$(document).ready(function(){
$(".replybutton").click(function(){
var id = $(this).data("value");
var replytext = $(".replytext").val();
$.post("reply.php",{ commentid: id, reply: replytext },function(data){
$("#result").html(data);
});
});
});
</script>
Any ideas,any help is appreciated?
Most probably you should stop the form to submit if you are using ajax because a buttons default behavior is to submit the form:
<script>
$(document).ready(function(){
$(".replybutton").click(function(e){
e.preventDefault(); //<---------------stops the form submission here
var id = $(this).data("value");
var replytext = $(".replytext").val();
$.post("reply.php",{ commentid: id, reply: replytext },function(data){
$("#result").html(data);
});
});
});
</script>
or add a type to the button:
<button type='button' data-value="<?php echo $id; ?>" class="replybutton">Submit</button>
//------^^^^^^^^^^^^
another way is to use .submit() event:
<script>
$(document).ready(function(){
$(".mainform").submit(function(e){ //<-----pass the event here
e.preventDefault(); //<---------------still you need this
var id = $(this).find('.replybutton').data("value"); // find the elements
var replytext = $(this).find(".replytext").val(); // and here.
$.post("reply.php",{ commentid: id, reply: replytext },function(data){
$("#result").html(data);
});
});
});
</script>
and in this case you don't need to have a type to your button, but it's good to have it.
Submitting form with AJAX
In form
<div class="replymsg">
<form class="mainform" action="" method=" ">
<textarea class="replytext" ></textarea>
<input type="text" value="<?php echo $id; ?>" name="comment_id" id="comment_id" style="display: none"> <!-- this contain the ID-->
<input type="submit" class="replybutton" id="replybutton" value="Submit">
</form>
</div>
use AJAX
<script>
$(function(){
$( "#replybutton" ).click(function(event)
{
event.preventDefault();
var comment_id = $("#comment_id").val();
var replytext = $(".replytext").val();
$.ajax(
{
type:"post",
url: "./reply.php",
data:{ id:comment_id, reply:replytext,},
success:function($data)
{
$("#result").html(data);
}
});
});
});
</script>
$(document).ready(function(){
$(".replybutton").click(function(e){
e.preventDefault();
var id = $(this).data("value");
var replytext = $(this).prev().val();
$.post("reply.php",{ commentid: id, reply: replytext
},function(data){
$("#result").html(data);
});
});
});
Thanks for the help,I figured it out,my problem was sending Id and replytext in a comment/reply system when clicking replybutton. Working code above.
<script type="text/javascript">
$(document).ready(function(){
$('#btnSubmit').bind('click', function(){
$('.hiddenId').each(function(){
var id = $(this).val();
var option = $('#option_' + id).val();
if(!option){
alert('Answer empty');
return false;
}
});
)};
});
</script>
...
<input type="hidden" class="hiddenId" name="question[]" value="<?php echo $question->id ?>" />
<input type="radio" id="option_<?php echo $question->id ?>" value="<?php print_r($option[$i]); ?>" /><?php print_r($option[$i]); ?>
...
=> I can't get value id option_$i ($i is a array have value 1->n) in jquery
It's because you are using:
var id = $(this).val();
That will return the value of the item, not the ID. To get the ID of (this), use
var id = $(this).attr('id');
I found a mistake in your code, is this your problem?
<script type="text/javascript">
$(document).ready(function(){
$('#btnSubmit').bind('click', function(){
$('.hiddenId').each(function(){
var id = $(this).val();
var option = $('#option_' + id).val();
if(!option){
alert('Answer empty');
return false;
}
});
)}; // <= Error?
});
</script>