Ankündigung

Einklappen
Keine Ankündigung bisher.

Ajax-Javascript Problem(mehrere Inputs mit Ajax)

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • kid01
    hat ein Thema erstellt Ajax-Javascript Problem(mehrere Inputs mit Ajax).

    Ajax-Javascript Problem(mehrere Inputs mit Ajax)

    Ich suche jemanden, der mir für einen kleinen Obulus mein Problem löst.
    Ganzes Scrpt gibts auf Anfrage.
    Ich hab mir ein Script geklaut, welches 3 Inputfelder verdoppelt.
    (Zur Eingabe von Produkt, Zutat, Menge) - ein Klick auf + erzeugt eine neue Produktmöglichkeit.

    Nun würde ich die jeweiligen Produkte gern mit Ajax befüllen. - Abfrage usw. läuft. Bei einem Produkt geht auch alles. -Nur benötige ich den Spaß ja dynamisch für alle erzeugten Produkte.

    Ja, die Bezeichnungen sind alle noch nicht schön - ich weiß.
    20€ würde ich ausgeben wollen.

    Müsste angepasst werden:
    HTML-Code:
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
    $(document).ready(function(){
        $("#search-box").keyup(function(){
            $.ajax({
            type: "POST",
            url: "<?=$Path?>ajax/readProdukt.php",
            data:'keyword='+$(this).val(),
            beforeSend: function(){
                $("#search-box").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
            },
            success: function(data){
                $("#suggesstion-box").show();
                $("#suggesstion-box").html(data);
                $("#search-box").css("background","#FFF");
            }
            });
        });
    });
    <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
    function selectCountry(val) {
        $("#search-box").val(val);
        $("#suggesstion-box").hide();
    }
    <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
    </script>
    Meine Felder
    PHP-Code:
        <tr id="zutaten">
             <td>    <div class="frmSearch">
                    <input type="text" name="Zutat[0][]" id="search-box" placeholder="Zutat" />
                    </div>
                    <div id="suggesstion-box"></div>
            </td>
            <td><input name="Zutat[1][]"></td>
            <td><select name="Zutat[2][]">    
        <?php
        
    for($i=0;$i<count($Einheit_result);$i++)
            {echo
    '<option value="'.$Einheit_result[$i]["ID"].'">'.$Einheit_result[$i]["Einheit"].'</option>';}
        
    ?></select></td>

        </tr>
        </table>
        <br><br>
        Portionsgr&ouml;&szlig;e<input name="Portionsmenge[0]">
        Einheit<select name="Portionsmenge[1]">
        <?php
        
    for($i=0;$i<count($Einheit_result);$i++)
            {echo
    '<option value="'.$Einheit_result[$i]["ID"].'">'.$Einheit_result[$i]["Einheit"].'</option>';}
        
    ?>
            </select><br>
        Zubereitung<textarea name="Zubereitung" cols="60" rows="6"></textarea>
    Script zum verdoppeln
    HTML-Code:
    <script type="text/javascript">
    (function(){
        var zutaten = document.getElementById("zutaten");
        zutaten.id = "";
        var table = zutaten.parentNode;
        table.removeChild(zutaten);
        function appendRow(){
            var newRow = zutaten.cloneNode(true);
            var deleteCell = document.createElement("td");
            newRow.appendChild(deleteCell);
            var deleteButton = document.createElement("button");
            deleteButton.type = "button";
            deleteButton.className = "minus";
            deleteButton.innerHTML = "&minus;";
            deleteButton.addEventListener("click", function(){
                table.removeChild(newRow);
            }, false);
            deleteCell.appendChild(deleteButton);
            table.insertBefore(newRow, addRow);
        }
    
        var addRow = document.createElement("tr");
        var addCell = document.createElement("td");
        addCell.colSpan = zutaten.childNodes.length + 1;
        addRow.appendChild(addCell);
        addButton = document.createElement("button");
        addButton.type = "button";
        addButton.className = "plus";
        addButton.innerHTML = "+";
        addButton.addEventListener("click", appendRow, false);
        addCell.appendChild(addButton);
        table.appendChild(addRow);
        appendRow();
    }());
    
    </script>

  • kid01
    antwortet
    Praktisch sowas hier mit Ajax im Produktfeld
    HTML-Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Eingabe von Zutaten</title>
    
    </head>
    
    <body>
    <form method="POST" action="ausgabe.php">
    <h2>Rezept Eintragung:</h2>
    <strong>Name </strong><input type="text" name="rezeptName">
    
    <h3>Zutaten:</h3>
        <table>
            <tr >
        <td>Zutat </td>
        <td>Menge</td>
        <td>Einheit</td>
        </tr>
    <tr id="zutaten">
    <td><input name="Zutat[0][]"></td>
    <td> <input name="Zutat[1]"></td>
    <td><select name="Portionsmenge[1]">
            <option value="g">g</option>
            <option value="mg">mg</option>
            </select><br>
    </tr>
    </table>
    <button>Rezept Eintragen!</button>
    </form>
    
    <script type="text/javascript">
    (function(){
    var zutaten = document.getElementById("zutaten");
    zutaten.id = "";
    var table = zutaten.parentNode;
    table.removeChild(zutaten);
    function appendRow(){
    var newRow = zutaten.cloneNode(true);
    var deleteCell = document.createElement("td");
    newRow.appendChild(deleteCell);
    var deleteButton = document.createElement("button");
    deleteButton.type = "button";
    deleteButton.className = "minus";
    deleteButton.innerHTML = "&minus;";
    deleteButton.addEventListener("click", function(){
    table.removeChild(newRow);
    }, false);
    deleteCell.appendChild(deleteButton);
    table.insertBefore(newRow, addRow);
    }
    
    var addRow = document.createElement("tr");
    var addCell = document.createElement("td");
    addCell.colSpan = zutaten.childNodes.length + 1;
    addRow.appendChild(addCell);
    addButton = document.createElement("button");
    addButton.type = "button";
    addButton.className = "plus";
    addButton.innerHTML = "+";
    addButton.addEventListener("click", appendRow, false);
    addCell.appendChild(addButton);
    table.appendChild(addRow);
    appendRow();
    }());
    
    </script>
    </body>
    </html>

    Einen Kommentar schreiben:

Lädt...
X