manhsakura
New Member
I am developing a php application, using Messi, a jquery pop up box: http://marcosesperon.es/apps/messi/In my application, I have a pricing schedule, which I am trying to make editable. The idea is when they click a button, the messi pop up box comes up and they can select some options and enter data which will then be added to the table. I have got to the stage where you click the button and the messi pop up box comes up, displaying the select box which the user can select different options. Code as follows:\[code\]function new_header(){ var content = "<form class='format_form' action='add_category.php' method='POST'> <fieldset> <legend>Choose a Pricing Category</legend> <ol> <li> <label for='category'>Category</label> <select id='category' name='category'> <option value='http://stackoverflow.com/questions/15681270/short_break'>Short Break</option> <option value='http://stackoverflow.com/questions/15681270/nightly_rate'>Nightly Rate</option> <option value='http://stackoverflow.com/questions/15681270/percentage_off'>Percentage Off</option> <option value='http://stackoverflow.com/questions/15681270/free_nights'>Free Nights</option> </select> </li> </ol> </fieldset> <fieldset> <button type='submit' name='add_category' onclick='return validate_form();' id='add_category'>Add the Pricing Category</button> </fieldset> </form>"; new Messi(content, {title: "Add a New Pricing Category", modal: true, width: '650px'});}\[/code\]In the table is a clickable image to bring up the messi pop up box, code as follows:\[code\]<th scope="col" class="rounded-topright"> <img class='hover_off' src='http://stackoverflow.com/includes/images/table/add_header.png' width='25px' height='25px'> <a href='http://stackoverflow.com/questions/15681270/#' onclick='new_header()'> <img class='hover_on' src='http://stackoverflow.com/includes/images/table/add_header_hover.png' width='25px' height='25px'> </a></th>\[/code\]The content that then appears in the messi pop up box depends on the user's selection in the select box. As a test, I am trying to make the system bring up a javascript alert when the select box option is changed, like so:\[code\]$(document).ready(function(){ var category_number; $("#category").change(function() //When the category is changed { category_number = document.getElementById('category').selectedIndex; //Get the property location in the array alert(category_number); }); }); \[/code\]I've tried putting this code first in the .js file I have all the other javascript in, and then when that didn't work, I put it in the .php file with the original pricing schedule table in, but that also didn't work. Can anyone help? Or failing that, come up with a better way for me to achieve the same?