Multiple inputs in php_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-16 00:54 出处：网络

What I\'m trying to do: We have one input on the page We press \"add\" button and one more input adds after first

What I'm trying to do:

We have one input on the page
We press "add" button and one more input adds after first
On submit we get all their values and add them into an array.

How to add additional inputs on page (with jquery), and then get their contents in php?开发者_运维知识库

You don't need to add the inputs into an array explicitly. If you name the input fields correctly, PHP will automatically parse them into an array.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery dynamic input sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">

    // Input adding function
    function addInput() {
        $('#inputs').append('<p><input type="text" name="input[]"></p>');
    }

    // Event handler and the first input
    $(document).ready(function () {
        $('#adder').click(addInput);
        addInput();
    });

</script>

  </head>
  <body>
      <form id="form" method="post" action="jquery.php">
          <a id="adder" href="#">Add Input</a>
          <div id="inputs">
          </div>
          <input type="submit" />
      </form>
  </body>
</html>

PHP

foreach ($_POST['input'] as $key => $value) {
    echo "$key $value";
}

Maybe this will work (if I understand question correctly)

$('#add').click(function(){
  $(this).before('<input name="array[]"/>');
});

and i php

<?php
if (isset($_GET['array'])) {
  for ($i=0; $i<count($_GET['array']); $i++) {
    echo "array[$i] -> {$_GET['array'][$i]}";
  }
}
?>

I have posted this for a similar question, although this one deals with only one input that's being cloned, not multiple ones. So basically, you HTML would be something like:

<form id="my_form">
    <input name="my_input[1]" id="my_input[1]">
</form>
<a href="#" id="add_input">Add one more</a>

And the jQuery for it would look like this:

$("#add_input").click(function(event) {
    // Get the number of current inputs and set the new count ...
    var inputCount = parseInt($("input[id^=my_input]").size());
    var newInputCount = inputCount++;

    // ... then create new clone based on the first input ...
    var newInput = $("#my_input[1]").clone();

    // .. and do the cleanup, make sure it has
    // an unique ID and name for server-side parsing
    newInput.attr('id', 'my_input[' + newInputCount + ']').attr('name', 'my_input[' + newInputCount + ']').val('');

    // .. and finally insert it after the last fieldset
    newInput.insertAfter("#my_input[" + inputCount + "]");
    event.preventDefault();
});

Then, on the PHP side, $_POST['my_input'] would be an array of all the added fields' values, and it's easy to iterate through them with a foreach(), for example.

Hope this helps !