Question

I have set up a little snippet that will take an autoresponder code for email marketing from a textarea and when the textarea loses focus, it parses what was just pasted and grabs some attributes and elements from that, and puts them in separate input fields.

The problem is that the code I’ve written apparently doesn’t do this right and for some autoresponder codes, it won’t grab the form’s action URL, some it does, it usually has no problem grabbing all of the hidden input fields, and then sometimes does not want to grab the name or email fields ‘name’ attributes.

The code is pretty straight forward. I tried using .find() instead of .filter() and it seems to just act at random. Some things work that didn’t work with .find(), some things don’t work that did work with .find(). I don’t think that’s the root of the problem but may help to explain what’s going on.

Edit It seems to work “better” with .find().

I just have no idea why it would behave like this, any ideas?

Example form HTML that is inserted to a textarea is here. (It is messy but I didn’t write it!) — This code would be in a textarea in which the code below parses it when it loses focus.

Edit: The root of the problem seems to the the <form action="#"> part.

• An Aweber Code for example, will not retrieve the Form URL (action attribute)

• An Ebizac Code will not retrieve the Form URL

• An Imnica Code works fine now apparently(?).

• There’s no problems with the GetResponse Code.

Most recent JSFiddle <- code here

Answer 1

I believe the problem with the html that doesn’t work like your AWeber example is that it is not contained within a single top-level parent element, which means that when you parse it to create the arcode jQuery object that object contains the <form> element as a top level element. That in turn means that the .find() method – which looks for descendent elements – doesn’t find anything since there are no additional <form> elements that are children. (You can test this for yourself by checking arcode.length or using arcode.each() to log the tagnames of the elements in arcode.)

Your example that did work happened to be wrapped in a top-level <div>, so it didn’t have this problem.

So my suggested fix for this is just to wrap the entered html in a <div> element yourself, thus making everything work with .find(). And then simplify your function, since the following short version does all that your original function did:

$j( '#jwsqz_autocode' ).blur( function() {

    var thehtml = "<div>" + $j( this ).val() + "</div>";
    var arcode = $j( thehtml );

    $j('#jwsqz_autoformurl').val( arcode.find('form').attr('action') );
    $j('#jwsqz_arnameinput').val(
         arcode.find('input[type="text"][name*="name"]').attr('name') );
    $j('#jwsqz_aremailinput').val(
         arcode.find('input[type="text"][name*="email"]').attr('name') );

    var hiddens = "";

    arcode.find( 'input[type="hidden"]' ).each( function() {
       hiddens += $j( this ).prop( 'outerHTML' ) + "\n";
    });

    $j( '#jwsqz_autohidden' ).val( hiddens );

});

Working demo: http://jsfiddle.net/fpK9F/6/ (seems to handle your example cases).

You’ll notice I’ve made use of the jQuery attribute contains selector with [name*="email"].

Note that if tests like the following from your code are redundant:

if( hiddens != '' )
   $j( '#jwsqz_autohidden' ).val( hiddens );
else
   $j( '#jwsqz_autohidden' ).val( '' );

In the else case you are setting the value that was in the hiddens variable anyway, so you can replace the whole structure with just the part from the if – as I did in my code above.

UPDATE: For a case-insensitive test of the name attribute’s value you can do this:

    $j('#jwsqz_aremailinput').val(
         arcode.find('input[type="text"]')
               .filter(function(){ return /email/i.test(this.name); })
               .attr('name') );

(You don’t have to use a regular expression, the key point is the .filter() function.)

Case insensitive demo: http://jsfiddle.net/fpK9F/7/