翻转新内容

I want to create a login wich loads in a different content depending on wich code is submitted. Its simple like this:

<button type="submit" value="BSend" class="l-button">code</button>
<input type="text" name="bewerbung" class="l-input">

    Example:
    CODE01 = GET CONTENT 01
    CODE02 = GET CONTENT 02
    CODE03 = GET CONTENT 03
    CODE04 = GET CONTENT 04

To make the load in more effective I want to use a lib called jQuery flip effect with Flippy for it. To make it work on my code it only needs a container with the class flipbox-container. In this container the content with the class flipbox will be flipped.

I already tried it out with another site of my website:

   $(document).on('submit', 'form.ajax', function (e) {
      e.preventDefault();
      var that = $(this),
         url = that.attr('action'),
         type = that.attr('method'),
         data = {};
      that.find('[name]').each(function (index, value) {
         var that = $(this),
            name = that.attr('name'),
            value = that.val();
         data[name] = value
      });
      $.ajax({
         url: url,
         type: type,
         data: data,
         success: function () {


            $(".flipbox").flippy({
               color_target: "",
               duration: "500",
               verso: "<article class=\"leftk\"><header><h3>Kontakt</h3></header><form action=\"submit.php\" method=\"post\" title=\"Kontaktformular\" class=\"ajax\"><label for=\"name\">Name</label><input name=\"name\" type=\"text\" title=\"Name\"><label for=\"email\">E-Mail-Adresse</label><input name=\"email\" type=\"text\" title=\"Email\"><label for=\"auswahl\">Präfix</label><label class=\"label\"> <select name=\"auswahl\" class=\"dropdown\"> <option selected value=\"Webdesign\">Anfrage Webdesign</option> <option value=\"Persoenliche\">Anfrage persönlich</option> <option value=\"Andere\">Alles andere</option> <option value=\"Spam\">Spam</option></select></label><textarea name=\"message\" title=\"Nachricht\"></textarea><button value=\"Send\" type=\"submit\" class=\"button\">Absenden</button></form></article><aside id=\"robot\"><ul class=\"social-icons clearfix\"> <li class=\"facebook\"><a href=\"#\">Facebook</a></li> <li class=\"google\"><a href=\"#\">Google</a></li> <li class=\"skype\"><a href=\"#\">Skype</a></li> <li class=\"twitter\"><a href=\"#\">Twitter</a></li> <li class=\"youtube\"><a href=\"#\">YouTube</a></li></ul></aside>",
               onFinish: function () {
                  $("#no-color").css("background-color", "transparent");
               }
            });
         }
      });

So as you can see the new CONTENT for whatever reason needs to be written in this verso thingy.

So how am I gonna do this with my log in code? I dont want to write the new content in this thing because everyone could see the content when he opens my js file. Apart from this it looks kinda messy to me.

The result of the ajax call is passed to the success callback :

$.ajax({
  ...
  success: function(htmlAnswer) {
      $(".flipbox").flippy({
          ...
          verso: htmlAnswer,
          ...
      });
  }
});

When sending the submit request, your server does return the html to be displayed, right ?

Otherwise, you may need to chain another ajax call to fetch the right content ...