|
This post has NOT been accepted by the mailing list yet.
I have two dynamically created form element select.
I want to send first dropdown selected id from View to Server, and server should return an array ['id' => 'models'] that should fill second dropdown
class quickSearchCarForm extends Form{
$makerSelect = new Element\Select('maker');
$makerSelect->setLabel('Maker and Model');
$list = $this->vehiclesManager->getArrayMakers(1);
$makerSelect->setValueOptions($list);
$makerSelect->setAttributes(['onchange' =>
'FillSelectModels(this.value)','id' => 'makerfield']);
$makerSelect->setEmptyOption('Select Maker..');
$this->add($makerSelect);
----on My Action
public function indexAction()
{
$formCar =new quickSearchCarForm($this->vehiclesManager);
$request = $this->getRequest();
$response = $this->getResponse();
if ($request->isXmlHttpRequest()) {
$idMarca = $this->params()->fromRoute('id');
$arrayModels = $this->vehiclesManager->getArrayModelos($idMarca,
Veiculo::Carro);
return $response->setContent(json_encode($arrayModels));
}
}
----On My View I've Tried with JQuery but with no success
function getModelos(id) {
$.ajax({
type:'POST',
dataType: 'json',
url:'/index/'+id,
data: data,
success: function(data){
console.log(data);
$('#modelfield').html(data);
}
});
}
I've tried with AJAX, but the only thing that happens is: the values of other form elements goes to my #modelfield (ex: makers, year, fuel..)
function getModels(id) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("modelfield").innerHTML =
this.responseText;
}
};
xhttp.open("POST", "index/" + id, true);
xhttp.send();
}
Could you please give some help?
|