невозможно добавить формат валюты к общему количеству входных данных - PullRequest
Новая
       30

невозможно добавить формат валюты к общему количеству входных данных

0 голосов
/ 23 ноября 2018

Вот мой вопрос: мне нужно сложить 3 входа, а затем они должны отображаться на четвертом входе «итого».Значение всех этих входных данных должно быть отформатировано как валюта.

В коде, который я прикрепил, сумма выполнена хорошо, и я получаю отформатировать 3 первых ввода, но не общий ввод

* 1004Может ли кто-нибудь иметь представление о том, как это сделать?как я могу добавить формат к общему вводу?

Спасибо!береги себя! 

<!DOCTYPE html>
<html>
<head>

         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
    
    html {
  box-sizing: border-box;
    font-family: 'PT Sans', sans-serif;
-webkit-font-smoothing: antialiased;
}
*, 
*:before, 
*:after {
  box-sizing: inherit;
}
body {
    background-color: #f3f3f3;
}
form {
    width: 100%;
    max-width: 300px;
    margin: 60px auto;
}
form input {
    font-size: 30px;
    padding: 0;
    border: 2px solid #ccc;
    border-left: 0;
    width: 100%;
    color: #666;
    border-radius: 0 7px 7px 0;
    font-family: 'PT Sans', sans-serif;
    font-weight: bold;
}
form input:focus {
    outline: 0;
}
form input.error {
    border-color: #ff0000;  
}
form label.error {
    background-color: #ff0000;
    color: #fff;
    padding: 6px;
    font-size: 11px;
}

label {
    color: #999;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.05em
}
.flex {
    display: flex;
    justify-content: flex-start;
}
.flex input {
    max-width: 300px;
    flex: 1 1 300px;
}
.flex .currency {
    font-size: 30px;
    padding: 0 10px 0 20px;
    color: #999;
    border: 2px solid #ccc;
    border-right: 0;
    line-height: 2.5;
    border-radius: 7px 0 0 7px;
    background: white;
}
</style>

<script>
    


    (function($, undefined) {

    "use strict";

    // When ready.
    $(function() {
        
        var $form = $( "#form" );
        var $input = $form.find( "input" );

        $input.on( "keyup", function( event ) { //a function when the user presses then releases a keyboard key.
            
            
            //When user select text in the document, also abort.
            var selection = window.getSelection().toString();
            if ( selection !== '' ) {
                return;
            }
            
            // When the arrow keys are pressed, abort.
            if ( $.inArray( event.keyCode, [38,40,37,39] ) !== -1 ) {
                return;
            }
            
            
            var $this = $( this );  
            
            //Retrieve the value from the input.
            var input = $this.val();
            
            var input = input.replace(/[\D\s\._\-]+/g, ""); //Sanitize the value using RegEx by removing unnecessary characters such as spaces, underscores, dashes, and letters.
                    input = input ? parseInt( input, 10 ) : 0; // function to make sure the value is an integer (a round number).

                    $this.val( function() {
                        return ( input === 0 ) ? "" : input.toLocaleString( "de-DE" ); //Add the thousand separator with the toLocaleString() function, then pass the sanitised value back to the input element.
                    } );
        } );
        
        /**
         * ==================================
         * When Form Submitted
         * ==================================
         */
        $form.on( "submit", function( event ) {
            
            var $this = $( this );  
            var arr = $this.serializeArray();
        
            for (var i = 0; i < arr.length; i++) {
                    arr[i].value = arr[i].value.replace(/[($)\s\._\-]+/g, ''); 
            };
            
            console.log( arr );
            
            event.preventDefault();
        });
        
    });
})(jQuery);

     function sumar() { // input sum

  var total = 0;

  $(".monto").each(function() {

    if (isNaN(parseFloat($(this).val()))) {

      total += 0;

    } else {

   var $this = $( this );
    var input = $this.val();

    var input = input.replace(/[\D\s\._\-]+/g, ""); //Sanitize the value again so that the sum can be made

    input = input ? parseInt( input, 10 ) : 0;


    total += input; //Sum input and put it in total variable

 

   

    }

  });

  //alert(total);
  document.getElementById('amount').value = total; //  deliver the total value to the input "id=amount" 

}








</script>

</head>
<body>

<form id="form" method="post" action="">
 
    <label>Valor #1</label> <br>
 <div class="flex">
     <span class="currency">$</span>
    <input type="text" id="txt_campo_1" class="monto" onkeyup="sumar();">
 </div>
<br>

<label>Valor #2</label><br>
<div class="flex">
     <span class="currency">$</span>
    <input type="text" id="txt_campo_2" class="monto" onkeyup="sumar();">
</div>
<br>

<label>Valor #3</label> <br>
<div class="flex">
     <span class="currency">$</span>
    <input type="text" id="txt_campo_3" class="monto" onkeyup="sumar();">
</div> <br>
    <label for="amount">Enter amount</label>
    <div class="flex">
        <span class="currency">$</span>
        <input id="amount" name="amount" type="text" maxlength="15" />
    </div>

</form>




</body>
</html>

Ответы [ 2 ]

0 голосов
/ 24 ноября 2018

Я добавляю этот код при вызове суммы ввода, и она работает!"document.getElementById ('amount'). value = total.toLocaleString (" de-DE ");"спасибо всем 

<!DOCTYPE html>
<html>
<head>

         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
    
    html {
  box-sizing: border-box;
    font-family: 'PT Sans', sans-serif;
-webkit-font-smoothing: antialiased;
}
*, 
*:before, 
*:after {
  box-sizing: inherit;
}
body {
    background-color: #f3f3f3;
}
form {
    width: 100%;
    max-width: 300px;
    margin: 60px auto;
}
form input {
    font-size: 30px;
    padding: 0;
    border: 2px solid #ccc;
    border-left: 0;
    width: 100%;
    color: #666;
    border-radius: 0 7px 7px 0;
    font-family: 'PT Sans', sans-serif;
    font-weight: bold;
}
form input:focus {
    outline: 0;
}
form input.error {
    border-color: #ff0000;  
}
form label.error {
    background-color: #ff0000;
    color: #fff;
    padding: 6px;
    font-size: 11px;
}

label {
    color: #999;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.05em
}
.flex {
    display: flex;
    justify-content: flex-start;
}
.flex input {
    max-width: 300px;
    flex: 1 1 300px;
}
.flex .currency {
    font-size: 30px;
    padding: 0 10px 0 20px;
    color: #999;
    border: 2px solid #ccc;
    border-right: 0;
    line-height: 2.5;
    border-radius: 7px 0 0 7px;
    background: white;
}
</style>

<script>
    


    (function($, undefined) {

    "use strict";

    // When ready.
    $(function() {
        
        var $form = $( "#form" );
        var $input = $form.find( "input" );

        $input.on( "keyup", function( event ) { //a function when the user presses then releases a keyboard key.
            
            
            //When user select text in the document, also abort.
            var selection = window.getSelection().toString();
            if ( selection !== '' ) {
                return;
            }
            
            // When the arrow keys are pressed, abort.
            if ( $.inArray( event.keyCode, [38,40,37,39] ) !== -1 ) {
                return;
            }
            
            
            var $this = $( this );  
            
            //Retrieve the value from the input.
            var input = $this.val();
            
            var input = input.replace(/[\D\s\._\-]+/g, ""); //Sanitize the value using RegEx by removing unnecessary characters such as spaces, underscores, dashes, and letters.
                    input = input ? parseInt( input, 10 ) : 0; // function to make sure the value is an integer (a round number).

                    $this.val( function() {
                        return ( input === 0 ) ? "" : input.toLocaleString( "de-DE" ); //Add the thousand separator with the toLocaleString() function, then pass the sanitised value back to the input element.
                    } );
        } );
        
        /**
         * ==================================
         * When Form Submitted
         * ==================================
         */
        $form.on( "submit", function( event ) {
            
            var $this = $( this );  
            var arr = $this.serializeArray();
        
            for (var i = 0; i < arr.length; i++) {
                    arr[i].value = arr[i].value.replace(/[($)\s\._\-]+/g, ''); 
            };
            
            console.log( arr );
            
            event.preventDefault();
        });
        
    });
})(jQuery);

     function sumar() { // input sum

  var total = 0;

  $(".monto").each(function() {

    if (isNaN(parseFloat($(this).val()))) {

      total += 0;

    } else {

   var $this = $( this );
    var input = $this.val();

    var input = input.replace(/[\D\s\._\-]+/g, ""); //Sanitize the value again so that the sum can be made

    input = input ? parseInt( input, 10 ) : 0;


    total += input; //Sum input and put it in total variable

 

   

    }

  });

  //alert(total);
  document.getElementById('amount').value = total.toLocaleString( "de-DE" ); //  deliver the total value to the input "id=amount" 

}








</script>

</head>
<body>

<form id="form" method="post" action="">
 
    <label>Valor #1</label> <br>
 <div class="flex">
     <span class="currency">$</span>
    <input type="text" id="txt_campo_1" class="monto" onkeyup="sumar();">
 </div>
<br>

<label>Valor #2</label><br>
<div class="flex">
     <span class="currency">$</span>
    <input type="text" id="txt_campo_2" class="monto" onkeyup="sumar();">
</div>
<br>

<label>Valor #3</label> <br>
<div class="flex">
     <span class="currency">$</span>
    <input type="text" id="txt_campo_3" class="monto" onkeyup="sumar();">
</div> <br>
    <label for="amount">Total amount</label>
    <div class="flex">
        <span class="currency">$</span>
        <input id="amount" name="amount" type="text" maxlength="15" />
    </div>

</form>




</body>
</html>
0 голосов
/ 23 ноября 2018

Отформатируйте значение общего ввода с помощью:

document.getElementById('amount').value = total.toLocaleString( "de-DE" );

<!DOCTYPE html>
<html>
<head>

         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
    
    html {
  box-sizing: border-box;
    font-family: 'PT Sans', sans-serif;
-webkit-font-smoothing: antialiased;
}
*, 
*:before, 
*:after {
  box-sizing: inherit;
}
body {
    background-color: #f3f3f3;
}
form {
    width: 100%;
    max-width: 300px;
    margin: 60px auto;
}
form input {
    font-size: 30px;
    padding: 0;
    border: 2px solid #ccc;
    border-left: 0;
    width: 100%;
    color: #666;
    border-radius: 0 7px 7px 0;
    font-family: 'PT Sans', sans-serif;
    font-weight: bold;
}
form input:focus {
    outline: 0;
}
form input.error {
    border-color: #ff0000;  
}
form label.error {
    background-color: #ff0000;
    color: #fff;
    padding: 6px;
    font-size: 11px;
}

label {
    color: #999;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.05em
}
.flex {
    display: flex;
    justify-content: flex-start;
}
.flex input {
    max-width: 300px;
    flex: 1 1 300px;
}
.flex .currency {
    font-size: 30px;
    padding: 0 10px 0 20px;
    color: #999;
    border: 2px solid #ccc;
    border-right: 0;
    line-height: 2.5;
    border-radius: 7px 0 0 7px;
    background: white;
}
</style>

<script>
    


    (function($, undefined) {

    "use strict";

    // When ready.
    $(function() {
        
        var $form = $( "#form" );
        var $input = $form.find( "input" );

        $input.on( "keyup", function( event ) { //a function when the user presses then releases a keyboard key.
            
            
            //When user select text in the document, also abort.
            var selection = window.getSelection().toString();
            if ( selection !== '' ) {
                return;
            }
            
            // When the arrow keys are pressed, abort.
            if ( $.inArray( event.keyCode, [38,40,37,39] ) !== -1 ) {
                return;
            }
            
            
            var $this = $( this );  
            
            //Retrieve the value from the input.
            var input = $this.val();
            
            var input = input.replace(/[\D\s\._\-]+/g, ""); //Sanitize the value using RegEx by removing unnecessary characters such as spaces, underscores, dashes, and letters.
                    input = input ? parseInt( input, 10 ) : 0; // function to make sure the value is an integer (a round number).

                    $this.val( function() {
                        return ( input === 0 ) ? "" : input.toLocaleString( "de-DE" ); //Add the thousand separator with the toLocaleString() function, then pass the sanitised value back to the input element.
                    } );
        } );
        
        /**
         * ==================================
         * When Form Submitted
         * ==================================
         */
        $form.on( "submit", function( event ) {
            
            var $this = $( this );  
            var arr = $this.serializeArray();
        
            for (var i = 0; i < arr.length; i++) {
                    arr[i].value = arr[i].value.replace(/[($)\s\._\-]+/g, ''); 
            };
            
            console.log( arr );
            
            event.preventDefault();
        });
        
    });
})(jQuery);

     function sumar() { // input sum

  var total = 0;

  $(".monto").each(function() {

    if (isNaN(parseFloat($(this).val()))) {

      total += 0;

    } else {

   var $this = $( this );
    var input = $this.val();

    var input = input.replace(/[\D\s\._\-]+/g, ""); //Sanitize the value again so that the sum can be made

    input = input ? parseInt( input, 10 ) : 0;


    total += input; //Sum input and put it in total variable

 

   

    }

  });

  //alert(total);
  document.getElementById('amount').value = total.toLocaleString( "de-DE" ); //  deliver the total value to the input "id=amount" 

}








</script>

</head>
<body>

<form id="form" method="post" action="">
 
    <label>Valor #1</label> <br>
 <div class="flex">
     <span class="currency">$</span>
    <input type="text" id="txt_campo_1" class="monto" onkeyup="sumar();">
 </div>
<br>

<label>Valor #2</label><br>
<div class="flex">
     <span class="currency">$</span>
    <input type="text" id="txt_campo_2" class="monto" onkeyup="sumar();">
</div>
<br>

<label>Valor #3</label> <br>
<div class="flex">
     <span class="currency">$</span>
    <input type="text" id="txt_campo_3" class="monto" onkeyup="sumar();">
</div> <br>
    <label for="amount">Enter amount</label>
    <div class="flex">
        <span class="currency">$</span>
        <input id="amount" name="amount" type="text" maxlength="15" />
    </div>

</form>




</body>
</html>
...