jquery put value to input box

Question

I have this script

<script>
    function trigger(){
    var x = document.getElementById('xcoord');
    var y = document.getElementById('ycoord');
    var box = document.getElementById('touch');

    if (x.value >= 325 || x.value <= 300 && y.value >= 55 || y.value <= 25) {
    $('#touch').value('passed');

    }

    }  
</script>

here is the html

 <input onchange="trigger()" required type="number" id="xcoord" name="xcoord">
 <input onchange="trigger()" required type="number" id="ycoord" name="ycoord">
 <input required type="text" id="touch" name="touch">

i need a value to be displayed everytime the value of the xcoord and ycoord suits the condition, but no value is printed even the condition is true.

(x.value >= 325 || x.value <= 300) && (y.value >= 55 || y.value <= 25) — Tushar
– Tushar, Commented Jan 15, 2018 at 10:16
please replace the 'value()' to val() in the "$('#touch').value('passed');" line — imdisney
– imdisney, Commented Jan 15, 2018 at 10:20
jsfiddle.net/ahfzr0af/#&togetherjs=mGjbrUA0kn this fiddle will help, have replaced some abitilies with jquery (on change of jquery instead of onchange) — Ben Yitzhaki
– Ben Yitzhaki, Commented Jan 15, 2018 at 10:31

Chayemor · Accepted Answer · 2018-01-15 10:28:23Z

You have mixed plain JavaScriptwith JQuery.

Put value to input box with JavaScript

box.value = 'passed';

CodeSnippet

function trigger(){
    var x = document.getElementById('xcoord');
    var y = document.getElementById('ycoord');
    var box = document.getElementById('touch');

    if (x.value >= 325 || x.value <= 300 && y.value >= 55 || y.value <= 25) {
         box.value = 'passed';
    }
}

<input onchange="trigger()" required type="number" id="xcoord" name="xcoord">
 <input onchange="trigger()" required type="number" id="ycoord" name="ycoord">
 <input required type="text" id="touch" name="touch">

Put value to input box with JQuery

$('#touch').val('passed'); //Although you already have the box variable

CodeSnippet

 function trigger(){
    var x = document.getElementById('xcoord');
    var y = document.getElementById('ycoord');
    var box = document.getElementById('touch');

    if (x.value >= 325 || x.value <= 300 && y.value >= 55 || y.value <= 25) {
        $('#touch').val('passed');
    }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input onchange="trigger()" required type="number" id="xcoord" name="xcoord">
 <input onchange="trigger()" required type="number" id="ycoord" name="ycoord">
 <input required type="text" id="touch" name="touch">

tl;dr;

Since you started code with plain JavaScriptyou confused how to change the value with jQuerysyntax.

JavaScript box.value = 'passed';

jQuery $('#touch').val('passed');

Farhad Bagherlo · Accepted Answer · 2018-01-15 10:36:51Z

2

You are using the jQuery Library. Use better than jQuery methods.

$("#xcoord , #ycoord").on("keyup",  function(){
    var x = $('#xcoord').val();
    var y = $('#ycoord').val();
   $('#touch').val((x >= 325 || x <= 300) && (y >= 55 || y <= 25)?'passed':'');
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input required type="number" id="xcoord" name="xcoord" value="0">
 <input  required type="number" id="ycoord" name="ycoord" value="0">
 <input required type="text" id="touch" name="touch">

edited Jan 15, 2018 at 10:36

answered Jan 15, 2018 at 10:30

Farhad Bagherlo

6,6993 gold badges30 silver badges49 bronze badges

Comments

deelde · Accepted Answer · 2018-01-15 10:20:35Z

1

it should be

 $('#touch').val('passed');

answered Jan 15, 2018 at 10:20

deelde

1,61114 silver badges26 bronze badges

Collectives™ on Stack Overflow

jquery put value to input box

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related