title: Updating a variable in jQuery script
body: <p>I am currently building a dynamic form, using a bit of HTML, PHP and jQuery. This form contains a drop down select field (with the tag name) and two input boxes named tag_text_color and tag_background_color.</p>
  
  <p>When you select a tag in the select field, a bit of jQuery will fill the boxes tag_text_color and tag_background_color with the current database value.</p>
  
  <p>Before that, I have a form which allow the user to add a tag in the database. My problem occurs when I right before adding a tag in the database.</p>
  
  <p>Here is the code for adding a tag :</p>
  
  <pre><code>        &lt;form id="form_addtag" method="post" name="form_addtag" action="add_tag.php"&gt;
                  &lt;legend&gt;Add a tag&lt;/legend&gt;
                  &lt;input type="text" name="tag_name" id="tag_name" class="text" size="30" placeholder="Tag Name" /&gt;
                  &lt;input type="text" name="tag_text_color" id="tag_text_color" class="text" size="6" placeholder="#ffffff"/&gt;
                  &lt;input type="text" name="tag_bg_color" id="tag_bg_color" class="text" size="6" placeholder="#000000" /&gt;
                  &lt;button type="submit" id="button_save_tag"&gt;Add&lt;/button&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>and the jQuery corresponding function :</p>
  
  <pre><code>    $( document ).ready(function() { 
          $("#form_addtag").submit(function(e) {
          e.preventDefault();
          var url = "add_tag.php"; // the script where you handle the form input.
          $.ajax({
              type: "POST",
              url: url,
              data: $("#form_addtag").serialize(), // serializes the form's elements.
          });
          $('#form_addtag')[0].reset();
          $("#form_edittag").load("demo.php #form_edittag")
      });
  </code></pre>
  
  <p>Adding a tag works fine, and it reloads perfectly the form to edit a tag. However if in this block I am selecting the new tag, it is not loaded yet by jQuery</p>
  
  <p>HTML to edit a tag : </p>
  
  <pre><code>        &lt;form id="form_edittag" method="post" name="form_edittag" action="edit_tag.php"&gt;
              &lt;legend&gt;Edit a tag&lt;/legend&gt;
              &lt;select id="select_edittag"&gt;
  
                  &lt;?php
                  $tags = get_tags();
                  $numberOfTags = sizeof($tags);
                  var_dump($numberOfTags);
                  var_dump($tags);
                  foreach ($tags as $line)
                  {
                      echo("&lt;option value='".$line["name"]."''&gt;".$line["name"]."&lt;/option&gt;");
                  }
                      //print("&lt;option value='". $tags[ $j ]["name"]."'&gt;".$tags[ $j ]["name"]."&lt;/option&gt;");
              ?&gt;
              &lt;/select&gt;
              &lt;input type="text" name="tag_text_color_edit" id="tag_text_color_edit" class="text" size="6" /&gt;
              &lt;input type="text" name="tag_bg_color_edit" id="tag_bg_color_edit" class="text" size="6" /&gt;
              &lt;button type="submit" id="button_edit_tag"&gt;Edit&lt;/button&gt;
              &lt;button type="submit" id="button_delete_tag"&gt;Delete&lt;/button&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>Corresponding jQuery :</p>
  
  <pre><code>    $( document ).ready(function() {
          $( document ).on( "change", "select#select_edittag", function()
          {
              var name = $("#select_edittag").val();
              var tags = &lt;?php echo json_encode(get_tags()); ?&gt;;
              $("#tag_text_color_edit").val(tags[name]["text_color"]);
              $("#tag_bg_color_edit").val(tags[name]["background_color"]);
          });
      });
  </code></pre>
  
  <p>The function get_tags() will return an array with all the tags in the database.</p>
  
  <p>I was thinking that each time I select a new item in my select "select_edittag" it would run the script, and update the tags variable with the lastest content from the function get_tags(). It does not sadly.</p>
  
  <p>Any idea ? If you want a live demo I can host something like that </p>