Take a look, I used bootstrap and jquery:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Twitter clone</title>
<!-- jquery - link cdn -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="imagens/icone.png">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script type="text/javascript">
$(document).ready( function(){
$("#add").click(function() {
var v = '<a href="#" class="list-group-item"><strong>' + $("#v1 option:selected").val() + '</strong> - <input type="text" name="valor" placeholder"Digite o valor"></a>';
$('#form_pro').append(v);
});
});
//Apos adicionar tudo que você quis, vc faz a requisição ajax para seu arquivo php
</script>
</head>
<body>
<div class="container">
<div class="col-md-4">
<select name="teste" id="v1" class="form-control">
<option>Selecionar</option>
<option value="Teste1">TESTE 1</option>
<option value="Teste2">TESTE 2</option>
<option value="Teste3">TESTE 3</option>
</select>
<button id='add'>Adicionar</button>
</div>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-body">
<form id="form_pro" class="list-group">
<!--Dados são inseridos aqui-->
</form>
<button>Requisitar</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
To request the php file I recommend to use ajax, it is very easy, just take a look at examples of jquery. But that’s it, now just recover the values and make the request with ajax that is all quiet, I hope to have helped
Follow Full code<form method="POST"> <select name="test[]"> <option>Select</option> <option value="Test 1">TEST 1</option> <option value="Test 2">TEST 2</option> <option value="Teste3">TEST 3</option> <input type="Submit" value="Send"> </select> </form> <? php if(isset($_POST['test']){ $test = $_POST['test']; foreach($test as $k){ echo $k." <br>"; } } ?>
– Maxwell Gomes
You can edit your question and add the code, to format select the code and hit the shortcut
CTRL+K– NoobSaibot
It would not be the case to use the attribute
multiple? ...<select name="teste[]" multiple="multiple">– NoobSaibot
It would be, but the client would have to hold the Ctrl p/ select more than 1 - see if you could suggest me something better friend. My idea would be : - Client select the item you want and by quantity. So far I have not found a better solution =/
– Maxwell Gomes
Another option would be to use
checkbox....<input type="checkbox" name="teste[]" value="Teste1"> Teste 1– NoobSaibot
You can use jquery to click on the field, it inserts in a form a list item already with the name you clicked and in front a field to place the quantity, so every click it creates a new item, at the end of this form you leave the send button
– Woton Sampaio
I’ll make an example here, just a moment
– Woton Sampaio