i wanna to check item_price after click on particular item_code through ajax.In item_rate field if user gives price enter more than available price than i will show error message. "#Enter price under "this" available price". Both item_field and item_rate calls "onchange()" function.
i have two different input fields with onchange() method.
One is "item_code" and Second is "item_rate"
i want to call item_code onchange() function inside the item_rate onchange() function.
<input type="text"name="item_code" id="item_quantity" onchange="item_code(this.value)">
<input type="text"name="item_rate" id="item_rate" onchange="item_rate(this.value)">
function item_code(code_value){
function item_rate(rate_value){
}
}
thanks for answers this question.
Try using the .trigger() method to trigger the event on the second item:
function item_rate(code_value){
$("#item_code").trigger("change");
}
This will execute the function you assign as a listener.
ON my opinion why don't you do this?
<input type="text"name="item_code" id="item_quantity" onchange="myfunction()">
<input type="text"name="item_rate" id="item_rate" onchange="myfunction()">
<script type="text/javascript">
function myfunction(){
var subtotal=parseFloat($('#item_rate').val())*parseInt($('#item_quantity').val());
alert(subtotal);
}
</script>
In your item_code function just call on change method on item_rate element.
Also use oninput rather than on change method.
<input type="text" name="item_code" id="item_quantity" oninput="item_code(this.value)">
<input type="text" name="item_rate" id="item_rate" onchange="item_rate(this.value)">
<script>
function item_rate(rate_value){
console.log(rate_value);
}
function item_code(code_value){
console.log(code_value);
var element = document.getElementById('item_rate').onchange();
}
</script>
Related
I cannot for the life of me understand why this doesn't work.
function test(event) {
alert(event.data.fieldone);
};
$('form').submit({fieldone: $('#field').val()}, test);
I just end up with a blank alert. If I hardcode a string and pass that instead it works fine and if I declare a variable within the function and fetch the data that way it also works. What gives?
It will not process the input field , because the form submit line will be executed only ONCE at the beginning, when the input field is blank.
If you wish to make it able to alert with the text inside the input field, you need to add event listener. For example, I add a button that will trigger the alert that prints the text inside the input field in the snippet below.
function test(event) {
event.preventDefault();
console.log(event.data);
alert(event.data.fieldone);
};
$('#submit').click(function() {
var data = $('#field').val();
$('form').submit({'fieldone': data}, test);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" name="field" id="field">
<button id="submit" type="submit">submit</button>
</form>
In this version the data argument contains a reference to the #field input element and the .value property is then read at submit time and not at the time the submit event was attached to the form:
function test(event) {
event.preventDefault();
console.log(event.data.value);
};
$('form').submit($("#field")[0], test);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" name="field" id="field">
<button>submit</button>
</form>
<form id="colours" onsubmit="doSomething()">
<label for="startcolour" style="font-family:arial">Start:</label>
<input type="color" name="startcolour" id="startcolour" value="#123456">
<label for="endcolour" style="font-family:arial">End:</label>
<input type="color" name="endcolour" id="endcolour" value="#abcdef"><br><br>
<br>
<input type="submit" value="Submit">
</form>
<script>
var startcolour = document.getElementById("startcolour").value;
var endcolour = document.getElementById("endcolour").value;
function doSomething() {
google.script.run.withFailureHandler(function(error) {
console.log("error")
console.log(error.message)
}).withSuccessHandler(function(result) {
console.log("done!")
}).test(startcolour);
}
</script>
I have a Google Apps Script HTML sidebar. This is some of the code for the HTML sidebar. When I enter a colour and press 'Submit', I want it to run the test() function with the submitted value for startcolour as the input. However, it runs with '#123456', the default value, not the value the user submitted. How do I fix this?
The problem is that you are defining the "startcolour" and "endcolour" variables from outside of your doSomething function, so when that function is called, it uses the value that was defined when the page was loading, instead of a value that you could define when the form is being submitted.
The solution would be to define the variables "startcolour" and "endcolour" within your doSomething function.
i have this For-each loop in my Laravel blade engine and i'm trying to pass the id and name to my Javascript function using button click event and log it to console,
Logic: attached image as example
(1.) once button ADD is click the Student from Point A will go to Point B
(2.) once button DELETE click the student from Point A will be remove from Point B and back to Point A
Now what i have tried so far is logging the student name and id to the console using console.log, but problem is only the ID of the First student will come out. Example if i Click Student 3 = the id is 1 it is not getting the real ID of the student. how do i approach this and what is the best suggestion to achieve my goal
CODES
#foreach($students as $std)
<input id="myInput" type="button" value="{{$std->name}}" onclick="addRow()">
#endforeach
function addRow() {
var inputVal = document.getElementById("myInput").value;
console.log(inputVal);
}
Add data attributes to you input field and get them on onclick(). Here is data attribute documentation.
Code using Jquery
#foreach($students as $std)
<input id="myInput" type="button" data-name="{{$std->name}}" data-id="{{$std->id}}" value="{{$std->name}}" onclick="addRow(this)">
#endforeach
function addRow(ele)
{
var name= $(ele).attr('data-name');
var id= $(ele).attr('data-id');
console.log(name);
console.log(id);
}
1st remove id from loop id must be unique
2nd you can pass as function parameter
#foreach($students as $std)
<input type="button" value="{{$std->name}}" onclick="addRow({{$std->name}})">
#endforeach
function addRow(inputVal) {
console.log(inputVal);
}
on more solution but it need jQuery
#foreach($students as $std)
<input type="button" value="{{$std->name}}" onclick="addRow(this)">
#endforeach
function addRow() {
var inputVal = $(this).value;
console.log(inputVal);
}
Repeated Ids in the markup is the problem. If the Ids are no needed at all, remove the attr Id and inside of the function addRow.
Embrace the function addEventListener
The following approach selects the inputs using the attribute name and then binds a click event.
As you can see, inside of the handler, we can access the value of the input as follow: var inputVal = this.value;
Array.from(document.querySelectorAll("[name='myInput']")).forEach(i => {
i.addEventListener("click", function(e) {
var inputVal = this.value;
console.log(inputVal);
});
});
<input name="myInput" type="button" value="{{$std->name1}}">
<input name="myInput" type="button" value="{{$std->name2}}">
<input name="myInput" type="button" value="{{$std->name3}}">
The value of this inside the handler is a reference to the element.
You can only have one ID per element, but you can indeed have more
than one class.
Your problem is that you are using the same Id for all of your button. Next, is you are calling your dom element inside of your addRow function which Js can't find clearly if what dom value you want to get. To solve this your code should look like this.
Pure JS
#foreach($students as $std)
<input class="myInput" type="button" value="{{$std->name}}" onclick="addRow({{$std->name}})">
#endforeach
function addRow(inputVal) {
console.log(id);
}
JQUERY
// html
#foreach($students as $std)
<input class="myInput" type="button" value="{{$std->name}}">
#endforeach
// your script
$('.myInput').click(function() {
console.log(this.val())
});
In my C# MVC app, I have a series of textboxes that are generated as such...
#foreach (object item in items)
{
#Html.TextBox(....)
}
The rendered result is a series of text boxes that look like this....
<input class="item-quantities valid" data-bomid="1939" data-rid="2054" id="AddedItemIDs_1939_" name="AddedItemIDs[1939]" onchange="ChangeItemQuantity(156,78)" onkeypress="return isNumberKey(event)" type="text" value="7" aria-invalid="false">
<input class="item-quantities valid" data-bomid="1940" data-rid="1055" id="AddedItemIDs_1940_" name="AddedItemIDs[1940]" onchange="ChangeItemQuantity(159,90)" onkeypress="return isNumberKey(event)" type="text" value="1">
Now, I need a javascript / jquery function in which I can capture three values:
bomid
rid
the new value of the textbox
I am just fine capturing the value when the textbox loses focus (tab out, etc.)
I have tried this (WITHOUT onchange="ChangeItemQuantity()" in the textbox), but for some reason I can never get this event to fire. Plus, I'd rather NOT do it this way, because then I am forced to be rigid on what classes I assign to the textboxes....
$(function () {
$('.item-quantities.valid').change(function () {
var value = $(this).val();
var bomid= $(this).data('bomid');
var rid= $(this).data('rid');
});
});
And I have tried this (WITH onchange="ChangeItemQuantity(159,90)" in the textbox). I would RATHER do it this way, as it allows me to be flexible with the classes in the text box...
function ChangeItemQuantity(bomid, rid) {
// no idea how I would capture the value here.
}
Add another argument to the function to pass the element in and get it's value:
onchange="ChangeItemQuantity(156,78, this)"
function ChangeItemQuantity(bomid, rid, el) {
alert(el.value)
}
You could fetch the attribute's value like this,
function getValues(){
var actual=$(this).value;
var bomid=$(this).attr('bomid');
var rid=$(this).attr('rid');
}
I have 3 input fields which have values prepopulated and a constant value of total hours 200. I am calculating the avghours as totalhours/datediff of date1 and date2.
My Question is if i change the value of date2 then i want the avghours value to change accordingly. I am not sure which event should be used to fire the method which does the calculation
<input type="text" id ="avghours"/>
<input type="text" id ="date1"/>
<input type="text" id ="date2"/>
Javascript code
function getavg()
{
$('#avghours').val()=totalhours/datediff($('#date2').val(),$('#date1').val(),'day');//datediff is userdefined function to get the datedifference
}
change will fire only if the focus is lost so that might not be possible is there anyother event that i can use.
Thanks
Prady
change
$('#avghours').val()=totalhours/datediff($('#date2').val(),
$('#date1').val(),'day');
to
$("#date2").bind("keyup blur change mouseup",function () {
var d = parseInt(datediff($('#date2').val());
var v = (totalhours/d) + ' ' + $('#date1').val() + ' day'; <-- mergestrings
$('#avghours').val(v);
});
assign via the function instead of the right hand.
If you want to update it immediately when the user types you could use the keyup event.
you could try keypress so...
$('#date2').keypress(function() {
//do calculating average logic here
});
then this would pick up when the value of the textbox has been changed
You can use the .change() event for this.
$("#date2").change(function(){
});
[![<html>
<head>
<title></title>
<script>
function multy(val)
{
alert(val.value+"--"+val.id);
}
</script>
</head>
<body>
<input id="txtdemo" type="text" onchange="multy(this);"></br>
<input id="txtdemo" type="text" onchange="multy(this);">
</input>
</body>
</html>][1]][1]