javascript - Changing the input value in real time with jquery or javascript

Question

I am having a problem changing the input value text to reflect the same on the site in real time. I am able to change the buttons text value in the html but it does not reflect the change on the site. I assume this is b/c it changes the value after the page loads. Is there a way to make this happen? I need to change its value to Spanish and this cart page is a hosted solution so it must be done by javascript/jQuery.

Any help would be awesome!

Live example: https://www.mcssl.com/SecureCart/Checkout.aspx?mid=A3C36989-8F1B-4C02-B59C-B62589F52BDB&sctoken=d31d3c20452f48b684ebbf476aec968b&bhcp=1

Here is the code.

$( document ).ready(function() {
$('.actions input.return-cart').val('Retornar al Carrito');
});

Here is the html that shows it changed.

<div class="actions">
<input type="submit" class="button return-cart" id="ctl00_ctl00_mainContent_scPageContent_backToCartButton" value="Retornar al Carrito" name="ctl00$ctl00$mainContent$scPageContent$backToCartButton">
</div>

However the button shows "Return to Cart" instead of "Retornar al Carrito"

Answer 1

It doesn't appear the have jQuery. You'll need to either include that or rewrite your code in plain js

window.addEventListener('load', function() {

    document.querySelector('.actions input.return-cart').value = 'Retornar al Carrito';

});

Note querySelector has some legacy issues, so if you can include jQuery maybe do that or give the button an ID and use

document.getElementById()

Answer 2

Make sure the container element of the input has a class called actions.

Works as expected in a fiddle: http://jsfiddle.net/EJCvB/

UPDATE:

After looking at the live page you added to your question, I suspect the problem has to do with the console errors that are being thrown. Specifically:

1. [blocked] The page at https://www.mcssl.com/SecureCart/Checkout.aspx?mid=A3C36989-8F1B-4C02-B59C-B62589F52BDB&sctoken=d31d3c20452f48b684ebbf476aec968b&bhcp=1 ran insecure content from http://code.jquery.com/jquery-1.10.1.min.js. /SecureCart/Checkout.aspx?mid=A3C36989-8F1B-4C02-B59C-B62589F52BDB&sctoken=d31d3c20452f48b684ebbf476aec968b&bhcp=1:1

2. Uncaught ReferenceError: $ is not defined

Try loading jQuery using HTTPS.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

Answer 3

Well I guess the class .actions isn't part of the input tag.

Answer 4

$(".return-cart").attr('value', 'Retornar al Carrito'); //versions older than 1.6

$(".return-cart").prop('value', 'Retornar al Carrito'); //versions newer than 1.6

Answer 5

$('#input1').val('this is the new value');

//before jQuery 1.6

$('#input1').attr('defaultValue', 'this is the new value');

//after jQuery 1.5.2

$('#input1').attr('value', 'this is the new value');

Try the above