Populate Dynamic Link With Data From Form Fields

Question

I've been working for a bit of time on this project and would appreciate any help. I have a form and would like the data from the form used in a PHP file that I've written that uses $_GET to pull those values and then use them in the PDF.

With some help, I've been able to come up with a script that uses the blur function to retrieve the data from the form and insert it into a dynamic link which then passes the values to the PHP file and have constructed a working jFiddle here:

http://jsfiddle.net/ZhCZS/3/

Form code:

<form class="cart" method="post" enctype='multipart/form-data'>
<div class="gform_variation_wrapper gform_wrapper">
    <input type="hidden" id="product_id" name="product_id" value="36" />
    <input type="hidden" id="_wpnonce" name="_wpnonce" value="4ededc9481" />
    <input type="hidden" name="_wp_http_referer" value="/product/prepare-for-your-closing-copy/" />
    <div class='gf_browser_gecko gform_wrapper' id='gform_wrapper_1'>
        <div class='gform_body'>
            <ul id='gform_fields_1' class='gform_fields top_label description_below'>
                <li id='field_1_13' class='gfield           gfield_price gfield_price_1_13 gfield_product_1_13    gfield_contains_required'>
                    <label class='gfield_label' for='input_1_13'>Quantity<span class='gfield_required'>*</span>
                    </label>
                    <div class='ginput_container'>
                        <select name='input_13' id='input_1_13' class='medium gfield_select' tabindex='1'>
                            <option value='500 - $269.00|269'>500 - $269.00</option>
                            <option value='1000 - $319.00|319'>1000 - $319.00</option>
                        </select>
                    </div>
                </li>
                <li id='field_1_14' class='gfield'>
                    <label class='gfield_label' for='input_1_14'>Total</label>
                    <div class='ginput_container'><span class='ginput_total ginput_total_1'>$0.00</span>
                        <input type='hidden' name='input_14' id='input_1_14' class='gform_hidden' />
                    </div>
                </li>
                <li id='field_1_1' class='gfield'>
                    <label class='gfield_label' for='input_1_1'>Location</label>
                    <div class='ginput_container'>
                        <select name='input_1' id='input_1_1' class='medium gfield_select' tabindex='2'>
                            <option value='Addison'>Addison</option>
                            <option value='Arlington'>Arlington</option>
                            <option value='Colleyville'>Colleyville</option>
                            <option value='Fire Wheel'>Fire Wheel</option>
                            <option value='Flower Mound'>Flower Mound</option>
                            <option value='Fort Worth'>Fort Worth</option>
                            <option value='Legacy'>Legacy</option>
                            <option value='Mansfield'>Mansfield</option>
                            <option value='McDermott'>McDermott</option>
                            <option value='Preston Corners'>Preston Corners</option>
                        </select>
                    </div>
                </li>
                <li id='field_1_19' class='gfield'>
                    <label class='gfield_label' for='input_1_19'>Address</label>
                    <div class='ginput_container'>
                        <input name='input_19' id='input_1_19' type='text' value='' class='medium' tabindex='3' />
                    </div>
                </li>
                <li id='field_1_21' class='gfield'>
                    <label class='gfield_label' for='input_1_21'>City, State, ZIP</label>
                    <div class='ginput_container'>
                        <input name='input_21' id='input_1_21' type='text' value='' class='medium' tabindex='4' />
                    </div>
                </li>
                <li id='field_1_20' class='gfield'>
                    <label class='gfield_label' for='input_1_20'>Suite1</label>
                    <div class='ginput_container'>
                        <input name='input_20' id='input_1_20' type='text' value='' class='medium' tabindex='5' />
                    </div>
                </li>
                <li id='field_1_11' class='gfield'>
                    <label class='gfield_label' for='input_1_11'>Reference</label>
                    <div class='ginput_container'>
                        <input name='input_11' id='input_1_11' type='text' value='' class='medium' tabindex='6' />
                    </div>
                </li>
                <li id='field_1_12' class='gfield'>
                    <label class='gfield_label' for='input_1_12'>Notes</label>
                    <div class='ginput_container'>
                        <textarea name='input_12' id='input_1_12' class='textarea medium' tabindex='7' rows='10' cols='50'></textarea>
                    </div>
                </li>
                <li id='field_1_15' class='gfield     gform_hidden'>
                    <input name='input_15' id='input_1_15' type='hidden' class='gform_hidden' value='Vendor X' />
                </li>



<li id='field_1_22' class='gfield      gfield_html gfield_html_formatted gfield_no_follows_desc'>
<a id="mylink" href="#" target="_blank">Send to PDF</a>

<span>the link contains: </span><span id="showmehref"></span>
                </li>
            </ul>
        </div>
        <div class='gform_footer top_label'>
            <input type='hidden' class='gform_hidden' name='is_submit_1' value='1' />
            <input type='hidden' class='gform_hidden' name='gform_old_submit' value='1' />
            <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' />
            <input type='hidden' class='gform_hidden' name='state_1' value='WyJhOjE6e2k6MTM7YToyOntpOjA7czozMjpcIjYzNDM5OTkzYmRhMDU2NGM5NWUwNGU4ZDgyNTM4NWFiXCI7aToxO3M6MzI6XCI1MTk1MjNiNmI1ZDM0NDk2NmJhZGY3M2I4YzIxYWEyYlwiO319IiwiMTYzYjgzMmJjODZhMWU2NzJkYTQ5YTQ3OWE2OWJjMzciXQ==' />
            <input type='hidden' class='gform_hidden' name='gform_target_page_number_1' id='gform_target_page_number_1' value='0' />
            <input type='hidden' class='gform_hidden' name='gform_source_page_number_1' id='gform_source_page_number_1' value='1' />
            <input type='hidden' name='gform_field_values' value='' />
        </div>
    </div>
    <input type="hidden" name="gform_form_id" id="gform_form_id" value="1" />
    <input type="hidden" id="woocommerce_get_action" value="" />
    <input type="hidden" id="woocommerce_product_base_price" value="0" />
</div>
<input type="hidden" name="add-to-cart" value="36" />
<div class="clear"></div>
<div class="quantity">
    <input type="number" step="1" min="1" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" />
</div>
<input type="hidden" name="add-to-cart" value="36" />
<button type="submit" class="addToCart single_add_to_cart_button button alt">Add to cart</button>
</form>

Script code:

$("form.cart").on('blur', ':input', function(){
var linkText = "http://www.ortorderdesk.com/proofs/397288.php?" + $("form.cart").serialize();
$("#showmehref").text(linkText);
$("#mylink").attr('href', linkText);
});

Unfortunately, when I implement the code into my site, it doesn't work. It simply appends the URL of the current page with "#", essentially ignoring the script.

Please see the code in use at: http://www.ortorderdesk.com/product/prepare-for-your-closing-copy/

The javascript file containing my script is called blur.js.

Am I not calling it properly? Is there an error in my syntax implementing it into my site?

I've tried referencing blur.js in the header and footer with no positive results.

Any help is great appreciated.

Thanks!

Answer 1

Is the Script Part in script Block. if OK you Script must have a $(document).ready(function(){.....}. is necessary, does the code runs after the Site is loaded.