JS - problem z submit()

pytanie zadane 31 stycznia 2018 w JavaScript przez kingkushlee Gaduła (3,960 p.)

Witam, mam taki kod:

        var komendy = $('#cmds > input').length;
        var cmds = Array();
        $('#dodaj').click(function(){
            const cmd = document.createElement('input');
            var komendy = $('#cmds > input').length;
            cmd.name = "cmd" + komendy;
            cmd.id = "cmd" + komendy;
            cmd.type = "text";
            var komendyNapis = komendy + 1;
            cmd.className = "form-control inputW";
            if (komendy == 0){cmd.placeholder = "Komenda 1";}
            else {cmd.placeholder = "Komenda " + komendyNapis;}
            
            const div = document.querySelector("#cmds");
            div.appendChild(cmd);
            var komendy = $('#cmds > input').length;
        });
        function Usun (id){
            var el2 = "#cmd" + id;
            const el = document.querySelector(el2);
            el.remove();
        }
        
        $('#odejmij').click (function (){
            var komendy = $('#cmds > input').length - 1;
            Usun(komendy);
        });
        $ ('#formularz-wyslij').click (function(){
            var komendy = $('#cmds > input').length;
            for (i = 0; i <= komendy; i++){
                var komenda = document.querySelector("#cmd" + i).value;
                cmds.push (komenda);
$("#form1").submit();

            }
        });

Formularz nie chce się wysłać. W konsoli wypluwa błąd: "Uncaught TypeError: Cannot read property 'value' of null
at HTMLButtonElement.<anonymous> (addservice.php:107)
at HTMLButtonElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLButtonElement.y.handle (jquery-3.3.1.min.js:2)". Chciałbym jeszcze wysłać tablicę do pliku PHP. Próbowałem AJAKSEM, ale się nie udało. Powie mi ktoś, dlaczego nie mogę wysłać formularza oraz jak wysłać tablicę do PHP?

1 odpowiedź

odpowiedź 31 stycznia 2018 przez imklau Nałogowiec (42,090 p.)
wybrane 31 stycznia 2018 przez kingkushlee

Najlepsza

Mógłbyś dorzucić jeszcze kod html? Bo masz problem w tej linijce:

var komenda = document.querySelector("#cmd" + i).value;

I to chyba problem z Twoim elementem HTML, tzn nie wiem czy dobry element wybrałeś :)

komentarz 31 stycznia 2018 przez kingkushlee Gaduła (3,960 p.)
edycja 31 stycznia 2018 przez kingkushlee

Proszę

<?php
    require_once ("skrypty/config.php");
    session_start();
    if(!isset($_SESSION['adminl']) || !$_SESSION['adminl'] == true){
        header('Location: admin.php');
    }
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dodaj usługę</title>
    <link rel="stylesheet" href="css/fontello.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="style.css">
    <style>
        .inputW {
            margin-left: auto;
            margin-right: auto;
            width: 550px;
            text-align: center;
            background-color: green;
            border: 1.2px solid #000;
            border-radius: 30px;
            height: 40px;
            font-size: 24px;
            display: block;
            margin-bottom: 20px;
            outline: none;
        }
        .inputW:focus {
            background-color: lightgreen;
            outline: none;
        }    
        .icon-plus:hover {
            cursor: pointer;
            color: #2c6119;
        }
        .icon-minus:hover {
            cursor: pointer;
            color: #bf222b;
        }
        .inputW > placeholder {
            color: lightblue;
        }
        .btn-primary {
            border-radius: 30px;
            margin-bottom: 15px;
        }
        input[type=file]{
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <?= $tytulSerwer ?>
    </header>  
   <div class="content">
       <form action="add.php" id="form1" method="post" enctype="multipart/form-data">
          <label for="nazwa"><h2>Nazwa usługi</h2></label>
           <input id="nazwa" name="nazwa" type="text" class="form-control inputW">
           <label for="cena"><h2>Cena usługi (w żetonach)</h2></label>
           <input id="cena" name="cena" type="number" class="form-control inputW">
           <h2>Ikona usługi (najlepiej 300x300 pikseli)</h2>
           <input type="file" name="image"><br /><br />
           <label for="czyranga">Czy usługa to ranga?</label>
           <input id="czyranga" name="czyranga" type="checkbox"><br /><br />
            <label for="czylog">Czy gracz musi być na serwerze aby wykonać usługę? (zaznacz to jeśli komendą jest give)</label>
           <input id="czylog" name="czylog" type="checkbox">
           <h2>Komendy </h2>
           <h4>Użyj {GRACZ} w miejsce nicku gracza</h4>
           <i id="dodaj" class="icon-plus"></i><i id="odejmij" class="icon-minus"></i>     
           <div id="cmds"></div>        
       </form>
       <button id="formularz-wyslij" style="cursor: pointer;" class="btn btn-primary">Dodaj usługę</button>
    </div>
    <script>
        var komendy = $('#cmds > input').length;
        var cmds = Array();
        $('#dodaj').click(function(){
            const cmd = document.createElement('input');
            var komendy = $('#cmds > input').length;
            cmd.name = "cmd" + komendy;
            cmd.id = "cmd" + komendy;
            cmd.type = "text";
            var komendyNapis = komendy + 1;
            cmd.className = "form-control inputW";
            if (komendy == 0){cmd.placeholder = "Komenda 1";}
            else {cmd.placeholder = "Komenda " + komendyNapis;}
            
            const div = document.querySelector("#cmds");
            div.appendChild(cmd);
            var komendy = $('#cmds > input').length;
        });
        function Usun (id){
            var el2 = "#cmd" + id;
            const el = document.querySelector(el2);
            el.remove();
        }
        
        $('#odejmij').click (function (){
            var komendy = $('#cmds > input').length - 1;
            Usun(komendy);
        });
        $ ('#formularz-wyslij').click (function(){
            var komendy = $('#cmds > input').length;
            for (i = 0; i <= komendy; i++){
                var komenda = document.querySelector("#cmd" + i).value;
                cmds.push (komenda);
            }
        });    
    </script>
    <footer>&copy; <a class="link" target="_blank" href="https://www.youtube.com/">chumanista</a>. Wszelkie prawa zastrzeżone.</footer>    
</body>
</html>

komentarz 31 stycznia 2018 przez kingkushlee Gaduła (3,960 p.)

Elementy #cmd są generowane przez JavaScript

1	komentarz 31 stycznia 2018 przez imklau Nałogowiec (42,090 p.) matko, masz strasznie namieszane w kodzie :D i strasznie ciężko się go czyta Spróbuj sobie wykonsolować poszczególne zmienne i zobaczysz co wychodzi, bo ja się nie odnajduje :D

komentarz 31 stycznia 2018 przez kingkushlee Gaduła (3,960 p.)

Sorry za kod, ale dopiero zaczynam :D
Działa! Zmieniłem na:

                var cmd = "#cmd" + i;
                var komenda = document.querySelector(cmd).value;
                cmds.push (komenda);
                $("#form1").submit();

Powiedziałabyś mi, jak wysłać AJAXEM tablicę do pliku PHP?

1	komentarz 31 stycznia 2018 przez imklau Nałogowiec (42,090 p.) Jak dopiero zaczynasz to taka mała wskazówka, używaj w kodzie angielskiego zamiast polskiego :P Niestety tego drugiego Ci nie powiem, gdyż sama nie wiem :(

komentarz 31 stycznia 2018 przez rafal.budzis Szeryf (85,340 p.)

Wysyłanie tablicy możesz zrobić na dwa sposoby oba zakładają wysłanie requesta poprzez starszą klase XMLHttpRequest lub nowszą funkcje fetch. W przykładzie użyje starszej alternatywy ze względu na lepszą kompatybilność. PHP czy to w POST czy GET musi dostać zwykłego stringa dla przypomnienia powiem ze wszystko możemy zapisać w formacie

klucz=wartosc&klucz2=wartosc2

pierwszym sposobem który wydaje mi się mało elegancki jest stworzenie tekstu w postaci

array[1]=value1&array[2]=value2&array[3]=value3&array[4]=value4

zrobił bym to w ten sposób

const data = [
    "some",
    "data",
    "in",
    "array"
];
var request = new XMLHttpRequest();
request.open('POST', 'index.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data.map(function(value, index){
    return 'arrayName[' + index + ']=' + element;
}).join("&"));

Dzięki temu w PHP będziemy mogli się odwołać do poszczególnych wartości

$arr = $_POST['arrayName'];
echo $arr[0]; // some
echo $arr[1]; // data

Drugim rozwiązaniem jest skorzystanie w formatu JSON z którym bez problemu radzi sobie PHP i JavaScript. Nasz wysyłany tekst będzie w formacie

myData=COS_W_JSON

Nie będziemy mieli w nim zadnych znaków & kod JSa bedzie prezentował się następująco.

const data = [
    "some",
    "data",
    "in",
    "array"
];
var request = new XMLHttpRequest();
request.open('POST', 'index.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send("myData=" + JSON.stringify(data));

Baz zmian nie obędzie się po stronie PHP teraz musimy zamienić JSONa zpowrotem na tablice. Zrobimy to tak :

$arr = json_decode($_POST['myData'], true);
echo $arr[0]; // some
echo $arr[1]; // data

Podobne pytania

0 głosów

1 odpowiedź 175 wizyt

Firefox nieobsługuje submit?

pytanie zadane 28 sierpnia 2017 w JavaScript przez MsMaciek123 Pasjonat (24,760 p.)

0 głosów

1 odpowiedź 845 wizyt

nie działający przycisk type="submit" po dodaniu go przez js

pytanie zadane 18 stycznia 2017 w JavaScript przez Q_Nick Mądrala (5,010 p.)

0 głosów

3 odpowiedzi 327 wizyt

Zamiast SUBMIT - ODŚWIEŻENIE

pytanie zadane 11 grudnia 2015 w JavaScript przez artimal Gaduła (4,800 p.)

JS - problem z submit()

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci