jQuery Selectors - how to create selector for embedded iframe form

Question

I am very new to jQuery and have been attempting to understand the following js for use with an aspx form. It has been creating a 'Object function has no method 'parseJSON'' error. I have been told that it using a custom function and creating a jQuery selector instead to use would be more advisable. I have come to understand that the selector should look like $("#powerform") but am having trouble getting my iframe/webform to call it when clicking a submit button. I am having difficulty understanding what:

function $(elem) {return document.getElementById(elem);} //simple id reference

this does which is causing my webpage error so to attempt to create the selector. The full js looks like this:

function $(elem) {return document.getElementById(elem);} //simple id reference

number_messages = 0;
var last_id     = "";

function check_messages() { //check for messages from iframe
if (location.hash != last_id) {
    last_id = location.hash;
    number_messages++;
    last_id = last_id.replace("_"," ");
    last_id = last_id.substr(1);
    last_id = last_id.substr(0,last_id.indexOf("&"));
    var message_color;
    var extra_text;
    if(last_id=="Signing Complete" || last_id=="Viewing Complete"){
        message_color="green";
        extra_text = "";
    }else{
        message_color="red";
        extra_text = "<p style='text-align:center'><button type='button'   onclick='window.location=\"embedded.html\"' style='display:inline;'>Reload form?</button> </p>";
    }
    document.getElementById("powerform").innerHTML = "<center><h3 style='color:"+message_color+";border:none;font-size:20px;text-align:center;'>" + last_id + "</h3><br/>"+extra_text+"</center>";
}
}

function open_embeddedform(form) {
var form_url = "https://demo.docusign.net/MEMBER/PowerFormSigning.aspx?PowerFormId=5044d9a2-341d-4490-9f9a-cd5f29fdcc62";
form_url += "&Therapist_UserName=" + $("Therapist_UserName").value;
form_url += "&Therapist_Email=" + $("Therapist_Email").value;




//for (var i=0; i < form.Windows.length; i++) {
   // if (form.Windows[i].checked) {
     //   form_url += "&Windows=" + form.Windows[i].value;
    //}
//}


    //alert(form_url);

$("powerform").innerHTML = '<iframe id="document" src="' + form_url + '" border="0"></iframe>';
}


setInterval(check_messages, 200);

and the html that is going with it is:

<div id="powerform" runat="server">
<script type="text/javascript" src="jscripts/open_powerform.js"></script>

        <form name="embedded_powerform" action="open_form(this.form);">
            <label for="Therapist_UserName">Full Name</label>
            <input type="text" name="Therapist_UserName" id="Therapist_UserName">
            <div class="clear"></div>

            <label for="Therapist_Email">Email</label>
            <input type="text" name="Therapist_Email" id="Therapist_Email">
            <div class="clear"></div>


        <br><center>
            <button type="button" onclick="open_embeddedform(this.form);">Submit</button></center>
        </form>
</div>

Sorry for such a rookie question and long post. I appreciate anyone's feedback if possible. Thanks

Have you experimented by inserting the iframe first and then trying to call any JQuery/JS scripts on it instead of calling it via js? Jquery selectors here: [Jquery selectors](http://api.jquery.com/category/selectors/) and a relevant question here: [Invoking javascript in iframe from parent page](http://stackoverflow.com/questions/251420/invoking-javascript-in-iframe-from-parent-page?rq=1) — ilias, Sep 20 '13 at 01:53
You should include the jQuery library you're using. One way of doing this is putting this line before your JS code: `` — Ergin, Sep 25 '13 at 20:10

score 0 · Answer 1 · answered Sep 25 '13 at 20:13

Defining a $ function is unnecessary as this is already defined by jQuery. You should remove the $ function from the code.

This code: $("Therapist_UserName").value; needs to have the hash character (#) before the ID name and the .value part needs to be val(). Try changing to the following code:

$("#Therapist_UserName").val();

...the same also needs to be done for Therapist_Email.

Lastly, the onclick attribute needs a javascript label to identify the function as JS. Try changing to this:

onclick="javascript:open_embeddedform(this.form);"

jQuery Selectors - how to create selector for embedded iframe form

1 Answers1