Formular dinamic cu jQuery

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
dim
Mesaje: 48

Formular dinamic cu jQuery

Salut
As dori sa fac un formular in care vreu sa pun pretul de transport in functie de greutate.
Si am greutatea minima , greutatea maxima ; cost transport
in functie de acesta greutate pot sa pun mai multe preturi de transport

Am creat tabelu carea arata cam asa:

Cod: Selectaţi tot

<table id="price_per_kg" class="table table-striped table-bordered table-hover">
						 <thead>
						    <div class="panel-heading">
		                    <h3 class="panel-title "><i class="fa fa-pencil"></i>{{ entry_rate_shipping }}</h3>
	                        </div>
					        <tr>
								<td width="30%">{{ entry_rate_min }}</td>
								<td width="30%">{{ entry_rate_max}}</td>
								<td width="30%">{{  entry_rate_cost  }}</td>
								<td>&nbsp;</td>
							</tr>	
                         </thead>
						 <tbody>
						     {% set price_per_kg_row = 0 %}
                             {% for price_per_kg in prices_per_kg %}
							  <tr id="price_per_kg_row{{ price_per_kg_row }}">
								<td>
								<input type="text" name="price_per_kg[{{ price_per_kg_row }}][kg_min]" value="{{ price_per_kg.kg_min }}" placeholder="{{ entry_rate_min }}" class="form-control"/>
								</td>
								<td>
								<input type="text" name="price_per_kg[{{ price_per_kg_row }}][kg_max]" value="{{ price_per_kg.kg_max }}" placeholder="{{ entry_rate_max }}" class="form-control"/>
								</td>
								<td>
								<input type="text" name="price_per_kg[{{ price_per_kg_row }}][kg_cost]" value="{{ price_per_kg.kg_cost }}" placeholder="{{ entry_rate_cost }}" class="form-control"/>
								</td>
								<td>
								<button type="button" onclick="$('#price_per_kg_row{{ price_per_kg_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button>
								
								</td>
							  </tr>

							 {% set price_per_kg_row = price_per_kg_row + 1 %}
                             {% endfor %}
						 </tbody>
						 <tfoot>
                            <tr>
                              <td colspan="3"></td>
                              <td class="text-left">
							  <button type="button" onclick="addRow();" data-toggle="tooltip" title="{{ button_kg_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button>
							  </td>
                            </tr>
                          </tfoot>
					   </table>

si am creat si codul jQuery carea arata cam asa:

Cod: Selectaţi tot

<script type="text/javascript"><!--
  var price_per_kg_row  = {{ price_per_kg_row }};

  function addRow() {
	  html = '<tr id="price_per_kg_row' + price_per_kg_row + '">';
	  html += '  <td class="text-right"><input type="text" name="price_per_kg[' +  price_per_kg_row + '][kg_min]" value="" placeholder="{{ entry_rate_min }}" class="form-control" /></td>';
	   html += '  <td class="text-right"><input type="text" name="price_per_kg[' +  price_per_kg_row + '][kg_max]" value="" placeholder="{{ entry_rate_max }}" class="form-control" /></td>';
	    html += '  <td class="text-right"><input type="text" name="price_per_kg[' +  price_per_kg_row + '][kg_cost]" value="" placeholder="{{ entry_rate_cost }}" class="form-control" /></td>';
	  
	  html += '  <td class="text-left"><button type="button" onclick="$(\'#price_per_kg_row' + price_per_kg_row + '\').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
	  html += '</tr>';

	  $('#price_per_kg tbody').append(html);
	  price_per_kg_row++;
  }

  //--></script>	   

imi apare formularu fnctioneaza butoane + si - cand vreu sa adaug un alt rand dar din pacate nu mil salveaza dupa ce le adaug si le completez

partea de comanda ar fi cam asa

Cod: Selectaţi tot

  if (isset($this->request->post['price_per_kg'])) {
			$prices_per_kg = $this->request->post['price_per_kg'];
		} elseif (isset($this->request->get['price_per_kg'])) {
			$prices_per_kg = $this->request->get('price_per_kg');
		} else {
			$prices_per_kg = array();
		}

		$data['prices_per_kg'] = array();

		foreach ($prices_per_kg as $price_per_kg) {
			$data['prices_per_kg'][] = array(
				'kg_min'      => $price_per_kg['kg_min'],
				'kg_max'      => $price_per_kg['kg_max'],
				'kg_price'    => $price_per_kg['kg_price'],
			);
		}

ma poti ajuta cu un sfat sa imi zici de ce nu salveaza setareea
sau daca ai vrun scrit din care ma pot inspira

MarPlo
Sallut,
Din codul pe care l-ai pus nu inteleg cum si unde sa salveze datele.
Nu e partea de trimitere si cum /unde sunt salvate datele.

dim
As vrea ca datele sa fie puse în (array) nu am baza de date pt ele.
Ai idee cum pot face asta ??
Sau trebuie neaparat sa fac o baza de date in care sa pun .

MarPlo
Cum trimiti datele din pagina la php? Nu e nici un <form> cu Submit sau cod javascript de preluare si trimitere.
O gresala in cod e: in html /js ai "kg_cost", dar in php este "kg_price". Pune in php tot "kg_cost".

Testeaza urmatorul exemplu, poate iti e de folos:
1. Intr-o pagina html:

Cod: Selectaţi tot

<form  action='file.php' method='post'>
<input type='text' name='price_per_kg[0][kg_min]' value='2'/>
<input type='text' name='price_per_kg[0][kg_max]' value='8'/>
<input type='text' name='price_per_kg[0][kg_cost]' value='4'/><br>
<input type='submit' id='sbmt' value='Send'/>
</form><br>
<button type="button" onclick="addRow();">addRow</button>

<script>
var price_per_kg_row  =1;

function addRow() {
  html = '<input type="text" name="price_per_kg[' +  price_per_kg_row + '][kg_min]" value="" placeholder="{{ entry_rate_min }}" class="form-control" />';
  html += '<input type="text" name="price_per_kg[' +  price_per_kg_row + '][kg_max]" value="" placeholder="{{ entry_rate_max }}" class="form-control" />';
  html += '<input type="text" name="price_per_kg[' +  price_per_kg_row + '][kg_cost]" value="" placeholder="{{ entry_rate_cost }}" class="form-control" /><br>';

  document.getElementById('sbmt').insertAdjacentHTML('beforebegin', html);
  price_per_kg_row++;
}
</script>
2. In file.php:

Cod: Selectaţi tot

if (isset($_POST['price_per_kg'])) {
  $prices_per_kg = $_POST['price_per_kg'];
} elseif (isset($_GET['price_per_kg'])) {
  $prices_per_kg = $_GET('price_per_kg');
} else {
  $prices_per_kg = array();
}

$data['prices_per_kg'] = array();

foreach ($prices_per_kg as $price_per_kg) {
  $data['prices_per_kg'][] = array(
    'kg_min'      => $price_per_kg['kg_min'],
    'kg_max'      => $price_per_kg['kg_max'],
    'kg_cost'    => $price_per_kg['kg_cost'],
  );
}

//Check
var_export($data);

dim
am incercat ce mi-ai dat tu da tot nu salveza
dupa ce apas send imi intoare

Cod: Selectaţi tot

array ( 'prices_per_kg' => array ( 0 => array ( 'kg_min' => '2', 'kg_max' => '8', 'kg_cost' => '4', ), 1 => array ( 'kg_min' => '5', 'kg_max' => '7', 'kg_cost' => '76', ), 2 => array ( 'kg_min' => '7', 'kg_max' => '8', 'kg_cost' => '6', ), 3 => array ( 'kg_min' => '6', 'kg_max' => '7', 'kg_cost' => '6', ), ), )
si la refresh nu raman colonele active

MarPlo
La refresh nu raman fiindca nu sunt salvate undeva pentru a fi preluate.
Ca sa ramana si la refresh e necesar sa le salvezi intr-o baza de date, fisier pe server sau in session; apoi sa iei acele date de unde le-ai salvat.

Subiecte similare