Skocz do zawartości
Pecetowicz Forum komputerowe

Dynamiczny kalkulator online w JS lub PHP bez przeładowania


Rekomendowane odpowiedzi

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.

Odnośnik do odpowiedzi
Udostępnij na innych stronach
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 ^^

Odnośnik do odpowiedzi
Udostępnij na innych stronach
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?

Odnośnik do odpowiedzi
Udostępnij na innych stronach
<?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>
Odnośnik do odpowiedzi
Udostępnij na innych stronach
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ś.

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Administrator

@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.

  • Lubię to! 1
Odnośnik do odpowiedzi
Udostępnij na innych stronach
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.

Odnośnik do odpowiedzi
Udostępnij na innych stronach
21 minut temu, Mativve napisał:

O to Ci chodziło?

 

 

Ukryta zawartość

    Zareaguj na post lub odpowiedz w temacie aby zobaczyć ukrytą zawartość.

21 minut temu, Mativve napisał:

O to Ci chodziło?

 

 

Ukryta zawartość

    Zareaguj na post lub odpowiedz w temacie aby zobaczyć ukrytą zawartość.

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

Np. Np. 2 * 5 = 10

Odnośnik do odpowiedzi
Udostępnij na innych stronach
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>

Odnośnik do odpowiedzi
Udostępnij na innych stronach
<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>
Odnośnik do odpowiedzi
Udostępnij na innych stronach
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ć.

Odnośnik do odpowiedzi
Udostępnij na innych stronach
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>
Odnośnik do odpowiedzi
Udostępnij na innych stronach
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/

Odnośnik do odpowiedzi
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
×
×
  • Dodaj nową pozycję...