i have two select options with onchange , you choose first one after that the second one is populated with data from the first one and wen you click the second one you get all the records for that select option in a div :
The code from my javascript to populate the div is :
success: function(json) {
if (json['product'] && json['product'] != '') {
html = '<ul id="sortable_list">';
html += ' <li id="listitem" class="clearfix header">';
html += ' <div class="listitem_model">Model</div>';
html += ' <div class="listitem_power">CP</div>';
html += ' <div class="listitem_year">An fabricatie</div>';
html += ' <div class="listitem_fuel">Motorizare</div>';
html += ' <div class="listitem_cap">Capacitate</div>';
html += ' <div class="listitem_body">Forma</div>';
html += ' <div class="listitem_product">Cod motor</div>';
html += ' </li>';
for (i = 0; i < json['product'].length; i++) {
html += ' <li id="listitem_' + json['product'][i]['id'] + '" class="clearfix">';
html += ' <a href="#" onClick="document.getElementById(\'addprod\').submit();">';
html += ' <input type="hidden" name="product_id" value="' + json['product'][i]['id'] + '" />';
html += ' <div class="listitem_model">' + json['product'][i]['name'] + '</div>';
html += ' <div class="listitem_power">' + json['product'][i]['power'] + '</div>';
html += ' <div class="listitem_year">' + json['product'][i]['year'] + '</div>';
html += ' <div class="listitem_fuel">' + json['product'][i]['fueltype'] + '</div>';
html += ' <div class="listitem_cap">' + json['product'][i]['capacity'] + '</div>';
html += ' <div class="listitem_body">' + json['product'][i]['bodytype'] + '</div>';
html += ' <div class="listitem_product">' + json['product'][i]['productcode'] + '</div>';
html += ' </a></li>';
}
html += ' </div>';
}
$('div[id=\'product_id\']').html(html);
}
My div = product_id
My form id = addprod
The div is populated , but what i want is when i click on any record (in my div product_id) , i want to submit the form with the exact value for the selected(clicked) input
The code is working , i see all the records but wen i click on first record the form will submit but the selected input id is from the last record from my list
That would be because you havent got a onclick in the <li> to set the value of the hidden input named product_id (Which should not be inside the loop, btw)
if (json['product'] && json['product'] != '') {
html = '<ul id="sortable_list">';
html += ' <li id="listitem" class="clearfix header">';
html += ' <div class="listitem_model">Model</div>';
html += ' <div class="listitem_power">CP</div>';
html += ' <div class="listitem_year">An fabricatie</div>';
html += ' <div class="listitem_fuel">Motorizare</div>';
html += ' <div class="listitem_cap">Capacitate</div>';
html += ' <div class="listitem_body">Forma</div>';
html += ' <div class="listitem_product">Cod motor</div>';
html += ' </li>';
for (i = 0; i < json['product'].length; i++) {
html += ' <li id="listitem_' + [i] + '" class="clearfix" onClick="checkproduct();">';
html += ' <input type="radio" name="product_id" id="product_id' + [i] + '" onchange="this.form.submit();" value="' + json['product'][i]['id'] + '" />';
html += '';
html += ' <div class="listitem_model">' + json['product'][i]['name'] + '</div>';
html += ' <div class="listitem_power">' + json['product'][i]['power'] + '</div>';
html += ' <div class="listitem_year">' + json['product'][i]['year'] + '</div>';
html += ' <div class="listitem_fuel">' + json['product'][i]['fueltype'] + '</div>';
html += ' <div class="listitem_cap">' + json['product'][i]['capacity'] + '</div>';
html += ' <div class="listitem_body">' + json['product'][i]['bodytype'] + '</div>';
html += ' <div class="listitem_product">' + json['product'][i]['productcode'] + '</div>';
html += ' </li>';
}
html += ' </div>';
}
Now the product is recorder with right id , but ONLY wen i click on the radio button , what i want to do is to hide the radio button, and selecting the id value for my radio button with click on html += ' <li id="listitem_' + [i] + '" class="clearfix" onClick="checkproduct();">'; but i can’t make that function working, some advise ?
first of all, thank you m_hutley for your replys , i have another 2 scripts , both are used to get data for first and second dropdown they are with ajax url. I made the change :
html += ' <li id="listitem_' + [i] + '" class="clearfix" onClick="document.getElementById(\'productid\').value ="'+json['product'][i]['id']+'";">';
but wen i click on any <li> in my chrome i get the error Uncaught SyntaxError: Unexpected token } On line 2 !!
<!DOCTYPE html>
<!--[if IE]><![endif]--> This is line 2
<!--[if IE 8 ]><html dir="ltr" lang="ro" class="ie8"><![endif]-->
I’m working to make this work properly for about 24 hours , and i can’t figure out what is wrong
If possible, put the page up somewhere you can link to so we can see it. I suspect the file throwing the error is another script file, because obviously line 2 of the HTML isnt causing the issue.
I can’t, I’m working on localhost
I changed : html += ' <li id="listitem_' + [i] + '" class="clearfix" onClick="document.getElementById(\'product' + [i] + '\').checked = true;">';
Now when i click on every <li> is selecting me the desired id but , when i put the submit() at the end , i get that error Uncaught SyntaxError: Unexpected token } On line 2 !! , now i understand that is a javascript problem , conflict , or something like that because this is a module , and i have the module embed in another page with modal, there is working(selecting from <li>, on the main page is not working every time,but my question is : How to debug javascript ? to see were is the problem and how to fix that
well it sounds like there’s another script catching the submit call, because nothing i’ve given you has any curly braces in it.
When the script fails and it says line 2, what’s the WHOLE error message? There should be more in there like… the call stack, the file that generated the error, etc. (Screenshot’d work)
ok, in chrome I don’t see nothing , only that error , but I see something
if I run the code with onclick="document.getElementById(\'addcars\').submit();" on <input> or in <li> the post request fail , in db everything is 0 except session_id and session_ip .
If I use this code onclick="this.form.submit();" the records are fine , the post will execute fine , what is wrong ? I google it and i find out this :
Not recommended: Insert inline JavaScript. There are several reasons why this technique is not recommendable. One major argument is that you mix markup (HTML) with scripts (JS). The code becomes unorganized and rather unmaintainable.
Now I wonder how to make function inside my function , to call onclick=“myFunc();”
I made something like this var myfunc = document.getElementById('productid’ + [i] + '').checked = true;
and put myfunc in onlick event but is not working
Okay… I assume ‘addcars’ is the ID of your form element, which exists and you’re putting all this html inside said form. (otherwise, it’s going to fail horribly)
The <select name="mark_id" id="input-mark-id" class="form-control"> and <select name="model_id" id="input-model-id" class="form-control"> are loading just fine, with that code from jsfiddle , my code is working fine , but you can select the final product only if you check the radio button and I want to make the to select the product on <li> clicking ( selecting and after that submiting post ) thank you
