Jump to content
Sign in to follow this  
Mentosx2

Dynamiczny kalkulator online w JS lub PHP bez przeładowania

Recommended Posts

Witam, piszę z pytaniem odnośnie kalkulatora w JS albo może i być w PHP.

 

Ale bardziej chodzi mi o taki kalkulator że po wpisaniu w pierwsze pole "5" i w drugie pole "6" odrazu pokazuje mi się wynik że jest

to "1", bez żadnego klikania w button aby pokazał się wynik.

 

Z góry dzięki.

Share this post


Link to post

Możesz zrobić to w PHP w inputach, w JS tylko odświeżanie danego inputa (w Twoim przypadku z wynikiem).

Share this post


Link to post

Tylko za pomocą Angulara.

Share this post


Link to post
6 minut temu, cskopytko napisał:

Możesz zrobić to w PHP w inputach, w JS tylko odświeżanie danego inputa (w Twoim przypadku z wynikiem).

 

heheh to i ja wiem że mogę tak zrobić ☺️ tylko bardziej gorzej będzie z kodem ^^

Share this post


Link to post
Teraz, Mentosx2 napisał:

 

heheh to i ja wiem że mogę tak zrobić ☺️ tylko bardziej gorzej będzie z kodem ^^

Robisz zwykły formularz HTML, pobierasz $_POST z forumularza i w zmiennej zapisujesz wynik... Co w tym trudnego?

 

Share this post


Link to post

Komuś stąd robiłem już coś podobnego:

Możesz przerobić jak chcesz.

  • Like 1

Share this post


Link to post
<?php
@$a=$_POST['11'];
@$b=$_POST['22'];
if(isset($_POST['licz']))
{
	@$sum=$a-$b;
}
?>
<form method="post" action="index1.php">
<input type="text" placeholder="Wpisz 1-wsza liczbe" name="11">
<input type="text" placeholder="Wpisz 2-ga liczbe" name="22">
<input type="text" placeholder="Wynik" value="<?php $sum ?>">
<input type="submit" value="licz" name="Policz">
</form>

 

Share this post


Link to post
2 godziny temu, Salva napisał:

Komuś stąd robiłem już coś podobnego:

Możesz przerobić jak chcesz.

 

Hmm dodałem ten kod do siebie ale nie działa nie wiem o co chodzi a na tej stronie śmiga.

 

2 godziny temu, ShanonWEB napisał:

<?php
@$a=$_POST['11'];
@$b=$_POST['22'];
if(isset($_POST['licz']))
{
	@$sum=$a-$b;
}
?>
<form method="post" action="index1.php">
<input type="text" placeholder="Wpisz 1-wsza liczbe" name="11">
<input type="text" placeholder="Wpisz 2-ga liczbe" name="22">
<input type="text" placeholder="Wynik" value="<?php $sum ?>">
<input type="submit" value="licz" name="Policz">
</form>

 

 

no tak, a jak wykonać aby JS wyświetlił wynik auto bez kliania ? jeśli wpisze w 1 i 2 pole coś.

Share this post


Link to post

@Mentosx2 Do tego pierwszego co wziąłeś z codepena dodaj u siebie w <head> ... </head> tą linijkę kodu:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Musisz podpiąć bibliotekę JQuery.

  • Like 1

Share this post


Link to post
42 minuty temu, Mativve napisał:

@Mentosx2 Do tego pierwszego co wziąłeś z codepena dodaj u siebie w <head> ... </head> tą linijkę kodu:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Musisz podpiąć bibliotekę JQuery.

 

podpiąłem i nadal nie działa.

Share this post


Link to post
Teraz, cskopytko napisał:

link?

 

http://no.5v.pl/

Share this post


Link to post

O to Ci chodziło?

 

 

strona.html

  • Like 1

Share this post


Link to post
21 minut temu, Mativve napisał:

O to Ci chodziło?

 

 

strona.html

 

21 minut temu, Mativve napisał:

O to Ci chodziło?

 

 

strona.html

 

No to mi działa. a jak zrobić żeby było * ?

Np. Np. 2 * 5 = 10

Share this post


Link to post
5 minut temu, cskopytko napisał:

@$sum=$a*$b;

 

 

za pomocą tego kodu:

 


<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <style>
        button {
            background: red;
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
            display: block;
            padding: 10px 15px;
        }
    </style>
</head>

<body>

    <button>Add input</button>
    <br>
    <div style="width:100%">
        <input type="number" value="0" autofocus> <br>
        <input type="number" value="0" autofocus> <br>
        <br>
        <input type="text" class="sum" placeholder="Sum" readonly>
    </div>

    <script type="text/javascript">
$(document).ready(function() {
    function sum() {
        var sum = 0;
        $('input:not(.sum)').each(function(){
            sum += parseInt($(this).val());
        });
        $('.sum').val(sum);
    }
    $(document).on('keyup change', 'input:not(.sum)', function() {
        setTimeout(sum, 100);
    });
});
    </script>
</body>

</html>

Share this post


Link to post
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style>
        button {
            background: red;
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
            display: block;
            padding: 10px 15px;
        }
    </style>
</head>
<body>
    <button>Add input</button>
    <br>
    <div style="width:100%">
        <input type="number" value="0" autofocus> <br>
        <input type="number" value="0" autofocus> <br>
        <br>
        <input type="text" class="sum" placeholder="Sum" readonly>
    </div>
    <script type="text/javascript">
$(document).ready(function() {
    function sum() {
        var sum = 1;
        $('input:not(.sum)').each(function(){
            sum *= parseInt($(this).val());
        });
        $('.sum').val(sum);
    }
    $(document).on('keyup change', 'input:not(.sum)', function() {
        setTimeout(sum, 100);
    });
});
    </script>
</body>
</html>

 

Share this post


Link to post
32 minuty temu, cskopytko napisał:

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style>
        button {
            background: red;
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
            display: block;
            padding: 10px 15px;
        }
    </style>
</head>
<body>
    <button>Add input</button>
    <br>
    <div style="width:100%">
        <input type="number" value="0" autofocus> <br>
        <input type="number" value="0" autofocus> <br>
        <br>
        <input type="text" class="sum" placeholder="Sum" readonly>
    </div>
    <script type="text/javascript">
$(document).ready(function() {
    function sum() {
        var sum = 1;
        $('input:not(.sum)').each(function(){
            sum *= parseInt($(this).val());
        });
        $('.sum').val(sum);
    }
    $(document).on('keyup change', 'input:not(.sum)', function() {
        setTimeout(sum, 100);
    });
});
    </script>
</body>
</html>

 

 

No dobra śmiga, a pytanie jak zrobić aby było można używać np. 0.25, bo z tego co widzę to jest min. 1 musi być.

Share this post


Link to post
13 minut temu, Mentosx2 napisał:

 

No dobra śmiga, a pytanie jak zrobić aby było można używać np. 0.25, bo z tego co widzę to jest min. 1 musi być.

dodaj step

Share this post


Link to post

Zamień 'number' na 'text'.

Share this post


Link to post
51 minut temu, cskopytko napisał:

dodaj step

 step ? ;>

 

50 minut temu, rogue napisał:

Zamień 'number' na 'text'.

 

dałem i nic nie pomogło.

Share this post


Link to post
8 godzin temu, rogue napisał:

Tylko za pomocą Angulara.

 

8 godzin temu, cskopytko napisał:

Robisz zwykły formularz HTML, pobierasz $_POST z forumularza i w zmiennej zapisujesz wynik... Co w tym trudnego?

 

 

4 godziny temu, Mativve napisał:

@Mentosx2 Do tego pierwszego co wziąłeś z codepena dodaj u siebie w <head> ... </head> tą linijkę kodu:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Musisz podpiąć bibliotekę JQuery.

xD

jquery czy angular do kalkulatora XDD

 

onload = function () {
  var firstInput = document.getElementById('firstNumber'),
      secondInput = document.getElementById('secondNumber'),
      resultPlaceholder = document.getElementById('result');
  
  firstInput.oninput = function() {
    resultPlaceholder.innerHTML = parseInt(firstInput.value)+ parseInt(secondInput.value);
  };
  secondInput.oninput = firstInput.oninput;
};
<input type="text" id="firstNumber" placeholder="pierwsze pole">
<input type="text" id="secondNumber" placeholder="drugie pole">
<span id="result"></span>

 

Share this post


Link to post
1 godzinę temu, TrzyRazyZero napisał:

 

 

xD

jquery czy angular do kalkulatora XDD

 


onload = function () {
  var firstInput = document.getElementById('firstNumber'),
      secondInput = document.getElementById('secondNumber'),
      resultPlaceholder = document.getElementById('result');
  firstInput.oninput = function() {
    resultPlaceholder.innerHTML = parseInt(firstInput.value)+ parseInt(secondInput.value);
  };
  secondInput.oninput = firstInput.oninput;
};

<input type="text" id="firstNumber" placeholder="pierwsze pole">
<input type="text" id="secondNumber" placeholder="drugie pole">
<span id="result"></span>

 

 

nie działa to XD

 

demo: http://no.5v.pl/

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  
×
×
  • Create New...