We Keep Coding

Magento 2 How to apply jquery for getting input text value in checkout page?

I want to get input text value in checkout page.
I have tried to apply jquery in checkout page but it didn't work it. I have also worked with pure javascript but it also didn't work.
Jquery not working because checkout page working only knockout js
<script type="text/javascript">
require([ 'jquery', 'jquery/ui'], function($){
jQuery(window).load(function(){
jQuery("#shipping-new-address-form input[name='vat_id']").keyup(function(e) {
alert("test");
});
});
});
</script>
This code is working fine on console.
Please help me and solve this issue
Thanks in advance.

Hi please try the below code and it should work as i am already using something like this and it is working fine.
<script type="text/javascript">
require(['jquery', 'jquery/ui'], function($){
jQuery(document).on('keyup', '#shipping-new-address-form input[name="vat_id"]', function(e) {
alert("test");
});
});
</script>

Magento 2 works with requireJS library, so you need to use "require"/"define" function to receive the jquery.
I think that you want to change the shipping behavior, so, you can do a fallback of shipping.js from Magento_Checkout module and add your code there.
your-theme/Magento_Checkout/web/js/view/shipping.js

Flip effect condition

So I’m trying to figure out how to make a click effect work on mobile. I want the hover effect on desktop/laptop and the click effect on mobile.
Currently the hover effect is implemented. As you can see on my website's homepage: http://otownsend.ca/
What I need to figure out is how to implement the click effect at a certain screen size (e.g. 800px). So instead of the card flipping as soon as the curser hovers over ".flipper", the click effect would require the user to click ".flipper" in order for the card to flip. This would require me to place in a conditional statement - however, it isn’t working. I’m not so familiar with JQuery so it has been quite the challenge. This is what I currently have:
if (window.matchMedia('(max-width: 800px)').matches)
{
$('.flipper').click(function (e) {
$(this).toggleClass('flipped');
});
}
".flipper" is the parent element to the front and back. All the css and html is the same. I just need to integrate this JQuery stuff and then I’m set.
Any suggestions would be appreciated :)

You can use removeClass() and addClass(). I've also changed your click event with .on('click'). I recommend you to use it that way. Also, add the code in $(document).ready(). I hope this is what you need. If not, please let me know and I will try a different approach:
$(document).ready(function() {
$('.flipper').on('click', function(e) {
$('.flipped').removeClass('flipped');
$(this).addClass('flipped');
});
});
Regarding matchMedia you can see by running the test snippet that it works:
if (window.matchMedia('(max-width: 800px)').matches) {
$('.flipper').css('color', '#f00');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='flipper'>
testing matchMedia
</p>
Also, I've seen that in your code, you are doing something wrong. You are adding a <script> tag which contains jQuery source, inside another <script> tag(or you forgot to close the </script> tag). This is wrong. Please correct this:
<script type="text/javascript">
$(function(){
$(".flipper").flip({
trigger: "hover"
});
});
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
To this:
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript">
$(function() {
if (window.matchMedia('(min-width: 801px)').matches) {
$(".flipper").flip({
trigger: "hover"
});
}
});
</script>
Notice the media query added for desktop only, from 801px up.
As a suggestion, I would like to recommend you to use a library like Modernizr for the media query part. Using Modernizr's way of using media queries, you won't have to refresh the page to see the changes like when using matchMedia. This also helps when you switch from portrait to landscape on mobile devices. You can read the docs about Modernizr media queries here.

How to disable or destroy a jQuery plugin function?

I have a gallery that uses the jQuery gridrotator effect. I want to enable the effect when I click on button "enable effect".
<button id="build">Enable Effect</button>
<script type="text/javascript">
$("button#build").click(function(){
$('#ri-grid').gridrotator();
});
</script>
And the enablig effect works fine (see this test). To disable effect there is no a destroy method for this plugin. So I tried to return to false the function but doesn't work.
<button id="destroy">Disable Effect</button>
<script type="text/javascript">
$("button#destroy").click(function(){
$('#ri-grid').gridrotator(function(){
return false;
});
});
</script>
How can I disable or destroy this function?
Thank you so much for any help! :)

I made and tested a good workaround not the perfect solution but it worked.
simply remove the item from Dom tree then reload it
$('#ri-grid').html($('#ri-grid').html());

Maybe there is a better way, but this hack seems to work:
$('#ri-grid').data('gridrotator').$items.length = 0;

The gridrotator plugin does not seem to have a builtin disable feature.
Using .remove() will remove all bound events and jQuery data associated with the elements that are removed.
Try removing the element and inserting it back in its place.
$("button#destroy").click(function(){
// remove plugin class so it doesn't rebind
$("#ri-grid").removeClass("gridrotator");
var $prev = $("#ri-grid").prev();
if($prev.length) {
// put back between siblings if necessary
$prev.append($("#ri-grid").remove());
} else {
// or just re-add to its parent
var $parent = $("#ri-grid").parent();
$parent.prepend($("#ri-grid").remove());
}
});

Hope this will make you smile -
<button id="destroy">Disable Effect</button>
<script type="text/javascript">
$("button#destroy").click(function(){
$('#ri-grid').gridrotator().stop();
});
</script>
Know more on .stop() function - http://api.jquery.com/stop/

<button id="destroy">Disable Effect</button>
<script type="text/javascript">
$("button#destroy").click(function(){
$('#ri-grid').stop();
});
</script>

In Jquery dropdown menu

I have develope a program to get selected text from dropdown menu. This code is working in jsFiddle. but doesn't work in Browser. Is anything problem in jquery coding?
Dropdown
$(document).ready(function(){
$('#ddl').change(function(){
var text= $('#ddl :selected').text();
$('#ddltext').html(text);
});
});
CSPIT
ADIT
BVM
DDIT
Nirma
Thanks in advance.

try this:
$('#ddl').change(function(){
var text= $('#ddl option:selected').text();
$('#ddltext').html(text);
});
working fiddle here: http://jsfiddle.net/APNFd/
i hope it helps.

Try disabling Plugins and change global variables name if it works with Jsfiddle not in browser this mean conflict in plugins scripts.
If this does not work please show us all of the codes to detect errors.

Hide Image when another image is clicked

this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...

You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.

Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});

You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.

Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});