Présenter de multiples intrants par le biais d'un formulaire et de les ajouter à la matrice

Donc je suis relativement nouveau à JavaScript, mais j'ai de l'expérience avec la programmation. J'ai ce code qui permet à l'utilisateur de définir le nombre d'adresses qu'ils aimeraient entrer alors je peux requête google maps et de trouver le centre géographique. Le problème, c'est qu'il semble très professionnel dans le sens où ils doivent entrer le nombre de champs sur une page et puis ils sont invités, avec nombre de cases sur la page suivante. Est-il possible de faire une seule forme(avec tous les paramètres dont j'ai besoin pour une entrée), puis après avoir cliqué sur soumettre, je l'ajouter à un tableau et puis quand ils décident qu'ils ont suffisamment d'adresses qu'ils atteignent la finale de la présenter alors je peux traiter les données à l'aide d'un appel PHP? Toute aide serait super, mais je suis nouveau sur ce je vais peut-être besoin de plus d'épeautre d'explications, désolé. Merci encore!

TL;DR: je veux créer un seul champ de saisie qui, lorsque les soumettre est cliqué, la page ne s'actualise pas ou rediriger vers une nouvelle page et ajoute les données d'entrée à un tableau. À partir de là, l'utilisateur peut entrer une nouvelle entrée et cette contribution aurait également être ajoutées à la baie jusqu'à ce que l'utilisateur a décidé de ne plus les entrées sont nécessaires à quel point ils cliquent sur la finale de la soumettre en me permettant de traiter les données.

Voici le code que j'ai pour l'instant:

<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script>
        $(function(){
            var c = 0;

            $("#button1").click(function(){
              c = $("#inputs").val();

              $("#mydiv").html("");

              for(i=0;i<c;i++){
                    $("#mydiv").append('<input type="text" id="data'+i+'" name="data'+i+'" /><br/>');
              }
            });

            $("#button2").click(function(){
                $.post("getdata.php",$("#form1").serialize(),function(data){

                });
            });

        });
      </script>
    </head>
    <body>
    <form id="form1">
      Type the number of inputs:
      <input type="text" id="inputs" name="inputs" />
      <input type="button" id="button1" value="Create" />
      <div id="mydiv"></div>
      <input type="button" id ="button2" value="Send" />
    </form>

    </body>
</html>

getdata.php

<?php
  for( $i=0; $i<$_POST["inputs"] ; $i++){
    echo $_POST["data".$i]."\n";
  }
?>

OriginalL'auteur Arun Kalyanaraman | 2014-04-05

  1. 2

    Normalement comment je fais ce genre de trucs est de fournir à un utilisateur la possibilité d'ajouter de nombreux champs de saisie au niveau du client et de les envoyer tous dans un tableau lors de la soumission du formulaire. C'est plus professionnel, je crois. Essayez cette JSFiddle pour voir ce que je veux dire.

    <input type="text" name="address[]" />

    OriginalL'auteur Omer Arshad

  2. 2

    si vous voulez POST dynamique de la valeur dans un formulaire, vous pouvez le faire comme ceci:

    <input type="text" name="adress[]" />

    donc dans votre cas vous pouvez ajouter de nouveaux champs en javascript ou jquery avec le même nom name="adress[]".
    et dans votre PHP vous obtenez un tableau:

    $adresses= $_POST['adress'];

foreach ($adresses as $adress) {
  echo $adress;
}

    VIOLON DÉMO

    OriginalL'auteur MamaWalter

  3. 1

    Pour traiter un éventail d'entrées, vous pouvez utiliser la convention suivante:

    HTML: il suffit d'ajouter entre crochets le nom de l'attribut

    <input type="text" id="data'+i+'" name="data[]" />

    PHP: Post renvoie un tableau

    for( $i=0; $i<$_POST["data"] ; $i++){
    echo $_POST["data"][$i]."\n";
}

    JAVASCRIPT: $("#form1").serialize() permettra de récupérer toutes les entrées de données comme des paires nom=valeur, même les entrées sont ajoutées dynamiquement. Il n'y a pas besoin de garder un tableau, vous pouvez simplement traiter tous d'entre eux à la fin.

    OriginalL'auteur Wilmer

  4. 1

    Vous n'avez pas besoin de créer un tableau, $_POST est en train de faire tout pour vous déjà.

    Alors je vous suggère de faire ce qui suit: à l'aide de javascript (jQuery), maintenez le bouton clics, mais assurez-vous que le formulaire de soumission est empêché (à l'aide de preventDefault sur le formulaire) [EDIT: en fait Vous n'aurez pas besoin de cela, comme si les boutons sont juste des boutons, pas de soumettre des entrées, le formulaire ne sera pas soumettre de toute façon], et assurez-vous d'ajouter un autre élément à chaque fois qu'ils cliquent sur un bouton "plus" ou quelque chose; assurez-vous d'incrémenter le name attributs de chaque élément d'entrée qui vient d'être créé.

    Lorsque l'utilisateur crée ensuite soumettre, l'utilisation de soumettre le formulaire via js, puis sur votre getdata.php vous pouvez simplement parcourir toutes les valeurs et de les utiliser de cette façon que vous voulez. Vous pourrez même être en mesure de connaître le nombre exact en calculant le nombre de fois qu'un nouveau input élément a été ajouté au formulaire.

    Je vais essayer d'écrire quelque chose pour vous dans une minute, mais si j'ai été assez clair, vous devriez être en mesure de le faire aussi.

    ÉDITÉ: voici Donc ce que j'ai trouvé; donnez-lui un essai et voir si c'est quelque chose pour vous.

    C'est la façon dont la forme serait:

    <form id="form1" name="myform" method="post" action="getdata.php">
    Enter address 1: <input type="text" name="address-1" /> <input type="button" value="More" onclick="createNew()" />
    <div id="mydiv"></div>
    <input type="submit" value="Send" />
</form>

    Et ce serait le code js:

    var i = 2;

function createNew() {
    $("#mydiv").append('Enter address ' + i +': <input type="text" name="address-' + i +'" /> <input type="button" value="More" onclick="createNew()" /><br />');
    i++;    
}

    ...et puis getdata.php:

    foreach ($_POST as $key => $value) {
    echo 'The value for '.$key.' is: '.$value.'<br />';
}

    voici un violon démo

    Je vous remercie beaucoup pour votre aide. Si vous étiez capable d'écrire quelque chose, ce serait d'une grande aide, mais je suis en train de regarder les choses que vous avez mentionnées en tant que bien de sorte que je peux apprendre. Encore une fois merci!
    Vient de le faire, j'espère que ça aide! 😉

    OriginalL'auteur webeno