Выходное значение в том же поле ввода

Question

Я пытаюсь использовать функцию, которая преобразует число в римские цифры, чтобы отобразить преобразованное значение в том же поле, в котором оно было введено. Like this converter.

Я попытался это:

HTML

<form name="f" onsubmit="this.box.value = convert(this.box.value); this.box.focus(); return false;"> 
    <input type="text" name="box" class="texty"> 
    <div style="padding-top:10px"></div> 
    <input type="submit" value="Convert"> 
</form> 

JS

$(document).ready(function() {  
    function convert(num) { 
     var ara = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 6, 5, 4, 1]; 
     var rom = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I']; 
     var final = ''; 
     for (var i = 0; i < rom.length; i++) { 
      while (num >= ara[i]) { 
       final += rom[i]; 
       num -= ara[i]; 
      } 
     } 
     return final; 
    } 
}); 

Но это просто обновляет страницу и ничего не делать с введенным номером ...

Here's the full code (извините, это не JSFiddle, не может получить форму для работы там).

Любая помощь была бы рада, и спасибо заранее! :)

Answer 1

Uncaught ReferenceError: convert is not defined

convert функция выходит за рамки вашего onsubmit события. Это вызывает ошибку и останавливает выполнение остальной части вашего скрипта, поэтому return false никогда не произойдет, и страница обновится.

Вы могли бы объявить convert на глобальном масштабе, прежде чем использовать его

var convert; 
$(document).ready(function() { 
    convert = function(num) 

Явное поставил на глобальную область видимости в вашей готовой функции

$(document).ready(function() { 
    window.convert = function(num) 

Или предпочтительный способ прикрепить слушателя событий не- obtrusevly в нашей готовой документации, чтобы конвертировать в объем.

$(document).ready(function (event) { 
    $("form").first().on("submit",function(){ 
    var box = document.getElementsByName("box")[0]; 
    box.value = convert(box.value); 
    return false; 
    }); 
    function convert(num) { 

Answer 2

Вы комбинируете обработчики событий inline и обработчики jQuery. Ваша функция convert не входит в форму, потому что она находится в блоке $(document).ready(). Я бы порекомендовал привязки обработчика с помощью JQuery:

<form name="f"> 
    <input type="text" name="box" id="number" class="texty"> 
    <div style="padding-top:10px"></div> 
    <input type="submit" value="Convert"> 
</form> 

---

$(document).ready(function() {  
    $('form').on(submit, function(e) { 
     e.preventDefault(); 
     var num = $('#number').val(); 
     var ara = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 6, 5, 4, 1]; 
     var rom = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I']; 
     var final = ''; 
     for (var i = 0; i < rom.length; i++) { 
      while (num >= ara[i]) { 
       final += rom[i]; 
       num -= ara[i]; 
      } 
     } 
     $('#number').val(final); 
    }); 
}); 

Answer 3

Вы должны захватить и предотвратить представить событие не произошло, поэтому форма не представляет, и перезагружает страницу.

Прямо сейчас ваша convert() функции выходит за рамки, так как обработчик рядного события ожидает, что это будет глобальным, но окружив его document.ready делает не глобальными.

Простейшим было бы использовать больше jQuery и удалить обработчики событий inline.

$(document).ready(function() { 
 
    $('form[name="f"]').on('submit', function(e) { 
 
    e.preventDefault(); 
 

 
    var ara = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 6, 5, 4, 1]; 
 
    var rom = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I']; 
 
    var box = $(this).find('[name="box"]'); 
 
    var num = box.val(); 
 
    var final = ''; 
 

 
    for (var i = 0; i < rom.length; i++) { 
 
     while (num >= ara[i]) { 
 
     final += rom[i]; 
 
     num -= ara[i]; 
 
     } 
 
    } 
 

 
    box.val(final).focus(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="f"> 
 
    <input type="text" name="box" class="texty"> 
 
    <div style="padding-top:10px"></div> 
 
    <input type="submit" value="Convert"> 
 
</form>

Answer 4

Я хотел бы использовать меньше инлайн яваскрипт и пусть JQuery делать всю работу. Вам также не нужно использовать форму, поскольку вы не передаете какие-либо данные ни на какой другой скрипт.Вы можете просто использовать вход и кнопку, чтобы сделать все.

см обновленный пример >>http://codepen.io/anon/pen/AXmwdR

$(document).ready(function() { 
    $('#convert').click(function(){ 
    convert(); 
    }); 


    function convert() { 
     var num = $('.texty').val(); 
     var ara = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 6, 5, 4, 1]; 
     var rom = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I']; 
     var final = ''; 
     for (var i = 0; i < rom.length; i++) { 
      while (num >= ara[i]) { 
       final += rom[i]; 
       num -= ara[i]; 
      } 
     } 
     $('.texty').val(final); 
    } 


});