jQuery > Update inline script on form submission

I am using the ChemDoodle Web Components to display molecules on a web page. Basically, I can just insert the following script in my page and it will create an HTML5 canvas element to display the molecule.

<script>
    var transform1 = new TransformCanvas('transform1', 200, 200, true);
    transform1.specs.bonds_useJMOLColors = true;
    transform1.specs.bonds_width_2D = 3;
    transform1.specs.atoms_useJMOLColors = true;
    transform1.specs.atoms_circles_2D = true;
    transform1.specs.backgroundColor = 'black';
    transform1.specs.bonds_clearOverlaps_2D = true;
    transform1.loadMolecule(readPDB(molecule));
</script>

In this example, "molecule" is a variable that I have defined in an external script by using the jQuery.ajax() function to load a PDB file. This is all fine and good.

Now, I would like to include a form on the page that will allow a user to paste in a PDB molecule definition. Upon submitting the form, I want to update the "molecule" variable with the form data so that the ChemDoodle Web Components script will work its magic and display molecul开发者_如何学Ce defined by the PDB definition pasted into the form.

I am using the following jQuery code to process the the form submission.

$(".button").click(function() {  
 // validate and process form here

    //hide previous errors
    $('.error').hide();

    //validate pdb textarea field
    var pdb = $("textarea#pdb").val();
    if (pdb == "") {
        $("label#pdb_error").show();
        $("textarea#pdb").focus();
        return false;
    }
    molecule = pdb;

});

This code is setting the "molecule" variable upon the form submission but it is not being passed back to the inline script as I had hoped. I have tried a number of variations on this but can't seem to get it right. Any clues as to where I might be going wrong would be much appreciated.

Maybe make your inline script a function?

<script>
function LoadMolecule(molecule) {
    var transform1 = new TransformCanvas('transform1', 200, 200, true);
    transform1.specs.bonds_useJMOLColors = true;
    //...etc...
    transform1.specs.bonds_clearOverlaps_2D = true;
    transform1.loadMolecule(readPDB(molecule));
}
</script>

Then...

$(".button").click(function() {  
 // validate and process form here

    //hide previous errors
    $('.error').hide();

    //validate pdb textarea field
    var pdb = $("textarea#pdb").val();
    if (pdb == "") {
        $("label#pdb_error").show();
        $("textarea#pdb").focus();
        return false;
    }
    LoadMolecule(pdb);    
});

Edit: I think I massively mis-understood the question. I was thinking you had a textbox of JavaScript code, that you needed to be parsed as JavaScript to form one of your molocules :). On the off-chance I did read the question right, I'll leave this answer here.... :)

You'll have to use dirty eval(), but be aware of the implications

try { 
  eval(pdb);
} catch (e) {
  // error; syntax error in their code.
};

Setting molecule = pdb doesn't really make sense. eval returns the value returned by the last expression (e.g. whatever loadMolecule returns in your example).

The reason it doesn't work at the moment is because pdb is simply string (JavaScript doesn't care if it contains valid JavaScript or not; it's just a string!)

You mention that you're using a form. If it's a real one, do you need to block the page submission? If so, I think you need a return false somewhere along the successful path to prevent the form from actually submitting.