Formular dinamic cu jQuery

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

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 Mesaje:4343
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 Mesaje:61
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 Mesaje:4343
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 Mesaje:61
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 Mesaje:4343
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