Passing session date to a jQuery clone

posted 10 years ago

Hi I need some help here for a hotel site.

If you look at expedia where they ask for children ages (this is what I'm after, no need for all the extra rooms and stuff though)

So when you ask for how many children and >0 is selected jQuery select boxes appear to ask the children's ages depending on how many children have been selected.

Everything works ok and the values are passing to my session but when you hit submit the values do not show back in the select boxes, only the default value of 1.

So i'm trying to get my session data of the children's ages back into the "selected" option instead of it showing the default "1".

Session data

$searchSession 		= Session::get('search');
   $destination 		= $searchSession['destination'];
   $arrive 			= $searchSession['arrive'];
   $depart 			= $searchSession['depart'];
   $numberOfAdults 	= $searchSession['numberOfAdults'];
   $numberOfChildren 	= $searchSession['numberOfChildren'];
   $age1 				= $searchSession['age1'];
   $age2 				= $searchSession['age2'];
   $age3 				= $searchSession['age3'];

jquery selct boxes

$('#numberOfChildren').change(function(){

$('#ach-age').html('');
var $div = $('#add_select'), //Select the appending div
    $select = $('<select/>', {name : 'childAges', class: 'form-control ach-c-age'}), //Create a template
    index = this.selectedIndex; //get the number of select



$div.empty(); //Erase old select

if(!index) return; //Stop the code if the number of child is 0

for(var i=1; i<14; i++){ //Maximum child age
    var $option = $('<option/>', {text : i, value : i});//Create the option element
    $select.append($option);//Append to the template
	$('#ach-age').html('Child age/s');
}

for(var u=0; u<index; u++){//Get the number of child
    var $clone = $select.clone(); //Clone the template
    $clone.attr('name', 'age'+(u+1)).appendTo($div); //Change its id and append to the container
}
}).trigger('change');

Need the session value put into the cloned selected value

{!! Form::text('arrive', isset($arrive) ? $arrive : '', array( 
                   'class'=>'form-control datepicker',
                   'placeholder'=>'Arrive',
                )) !!}

Last updated 3 years ago.

tuyenlaptrinh

replied 10 years ago

You can use this code for your form

{!! Form::select('numberOfChildren',range(0,10),old('numberOfChildren'),['id'=>'numberOfChildren']) !!}

And Jquery you should change

index = this.selectedIndex;

with

index = $(this).val();

ottz0

replied 10 years ago

Hi, the form is sent to another page, so when the submit button is pressed the values are stored correctly in the session but the children's ages are set back to default, being 1.

So I need the session values put back into the childrens ages.

tuyenlaptrinh

replied 10 years ago

I think this code is bestter for you

{!! Form::open(['url'=>'test']) !!}
{!! Form::select('numberOfChildren',range(0,10),null,['id'=>'numberOfChildren'])!!}
<div id="add_select">
    @for($i=0;$i<10;$i++)
        {!! Form::select('age_'.$i,range(1,14),null,['style'=>'display:none;','id'=>'age_'.$i,'class'=>'age_child'])!!}
    @endfor
</div>
{!! Form::submit('Submit')!!}
{!! Form::close()!!}
<script>
    $('#numberOfChildren').change(function(){
        var index = $(this).val();
        for(var u=0; u<index; u++){
            $('#age_'+u).show();
        }
    }).trigger('change');
</script>

I tested. It very ok

Last updated 10 years ago.

Moderators