The form I've just created dinamically generates inputs group depending on user 's choice. Once the form will be submitted i'm trying to create a JSON string that will be later on sent to a php file.
I've notice that there is something wrong with the two class constructor (function element, function route)...they are not taking the values of all the properties.
But (I don't know how), the value is shown later in the JSON string.
In order to allow you debugging i've upload files on my server. I was not able to make is work on jsfiddle.
This is the url: http://www.alessandrocuria.com/tmp/
And this is the code
<form action="" method="post" enctype="multipart/form-data" id="custom-route-form" class="main-form">
<div id="book_car" class="title-form current">
<span>
</span>
</div>
<div id="message-custom-route"></div>
<div id="book_car_content" class="content-form">
<div class="form-block custom-form-block">
<h4>Origin</h4>
<input id="new-route-origin" class="shortcode_input" type="text" value="" name="origine">
</div>
<div class="form-block custom-form-block">
<h4>Destination</h4>
<input id="new-route-destination" class="shortcode_input" type="text" value="" name="destinazione">
</div>
<div class="form-block">
<h4>How many box do you want to create?</h4>
<div class="">
<select id="n_fasce" class="select" name="">
<option value="">- seleziona -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
</div>
<div class="clear"></div>
<div id="price-wrap"></div>
<div class="form-block custom-form-block submit-costum">
<input id="custom-route-submit" name="modifica" type="submit" class="blue_button form-book" value="Prenota">
<!--<input id="custom-route-submit" class="blue_button form-book" type="submit" value="Continue">-->
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</form>
</div>
$(document).on("ready", function(){
if($('#private-home').length>0){
loadData();
}
function loadData(){
$("#ajaxLoader").show();
$.ajax({
type:"POST",
url:"getItinerari.php"
}).done(function(itinerario_out){
console.log(itinerario_out);
var route = JSON.parse(itinerario_out);
for(var i in route){
var sortableDiv = '<li id="" class="ui-state-default" style="">'+ route[i].itinerario +'<a href="edit.php?id='+ route[i].it_id +'"><img src="../images/file_edit.png" alt="Modifica" width="35px" height="auto"></a><a onclick="return deleteConferme();" href="delete.php?it_id='+ route[i].it_id +'"><img src="../images/delete.png" alt="Elimina" width="35px" height="auto"></a></li>';
$("#sortable").append(sortableDiv);
}
$("#ajaxLoader").hide();
});
}
function deleteConferme() {
var result = confirm("Sicuro di voler eliminare questo itinerario?");
if (!result) {
return false;
}
}
/*****/
var n_fasce;
var El_fasce = $('#n_fasce');
var fasce = [];
var nameRadio;
var elHtml =
'<div class="price-box">'+
'<h3>Fascia di prezzo</h3>'+
'<div>'+
'<input class="" id="fascia_assoluta" name="range_type" value="assoluta" type="radio">'+
'<label for="fascia_assoluta">Prezzo Assoluto</label><br>'+
'<input class="" id="fascia_progressiva" name="range_type" value="progressiva" type="radio">'+
'<label for="fascia_progressiva">Prezzo Progressivo</label>'+
'</div>'+
'<div>'+
'<div class="form-block">'+
'<h4>DA:</h4>'+
'<div class="form-block">'+
'<label>DA:</label>'+
'<input class="pax_from" type="text">'+
'</div>'+
'</div>'+
'<div class="form-block">'+
'<label>A:</label>'+
'<input class="pax_to" type="text">'+
'</div>'+
'<div class="form-block">'+
'<label>Prezzo:</label>'+
'<input class="price" type="text">'+
'</div>'+
'</div>'+
'</div>';
$(El_fasce).on('change', function () {
n_fasce = El_fasce.val();
$('#price-wrap').html('');
for(i=0; i<n_fasce; i++){
var newEle = document.createElement("div");
newEle.setAttribute("id","element"+i);
newEle.setAttribute("class","item");
//newEle.html("<div class='itemCounter'>"+(i+1)+"</div>"+htmlEl);
newEle.innerHTML = elHtml;
$("#price-wrap").append(newEle);
$('#element'+i+' input:radio').each(function (index) {
//array[index] = $(this).attr('id');
$(this).attr('name', 'range_type'+i);
});
$('.price').attr('class', 'price'+i);
$('.pax_to').attr('class', 'pax_to'+i);
$('.pax_from').attr('class', 'pax_from'+i);
}
});
/*****/
$('#custom-route-submit').click(function () {
for(j=0; j<n_fasce; j++){
var price = $('.price'+j+'').val();
var pax_from = $('.pax_from'+j+'').val();
var pax_to = $('.pax_to'+j+'').val();
var route_type = $('input[name="range_type'+j+'"]:checked').val();
/*************/
var tmpElement = new element(price, pax_from, pax_to, route_type);
//var myJsonString = JSON.stringify(tmpElement);
fasce.push(tmpElement);
}
function element(price, pax_from, pax_to, route_type){
this.price = price;
this.pax_from = pax_from;
this.pax_to = pax_to;
this.route_type = route_type;
}
var origine = $('#new-route-origin').val();
var destinazione = $('#new-route-destination').val();
var route = new route(origine, destinazione, fasce);
function route (origine, destinazione, fasce){
this.origine = origine;
this.destinazione = destinazione;
this.fasce = fasce;
}
var json = JSON.stringify(route);
$.ajax({
type: 'POST',
url: 'new-route.php',
data: {'myjson': json},
success: function(data) {
alert(data);
location.replace("new-route.php")
}
});
});
});
Thanks in advance!
routeandelementclassses. Seems like you just want an object with properties.var theRoute = {origine, origine, .....};