WordPress.org

Ready to get started?Download WordPress

Forums

Using jquery Forms Plugin with WordPress (1 post)

  1. dorich
    Member
    Posted 3 years ago #

    Problem
    Clicking on the submit button fails but only in WordPress pages. Static pages work as expected.

    Question
    Does anyone have experience using jquery.form inside WordPress and if so does this plugin have any special requirements to make it work in WP?

    Scenario
    I'm attempting to use jquery.form to handle a form that appears in a dialog. The arrangement works on static pages on the server, outside of WP but in the same domain.
    However, when the form is presented in the dialog on a WP page the submit function fails, usually resulting in the dialog closing having not submitted the form.
    The plugin and the triggering script are both enqueued.
    Where I can see it, and its appropriate, I've altered $ to jQuery.

    I'm looking for ideas on why the failure is occurring.

    One question that occurred to me is how do jquery plugins respond if used with WordPress with regard to the use of "$"? Perhaps its not an issue but I wondered if it might be the cause of the problem here.

    The triggering script is just the standard script with a few options added, again this works on static pages:

    `jQuery(document).ready(function($) {
    var options = {
    target : '#output1',
    url: 'form1_processing.php',
    clearForm: 'true'

    };
    // bind 'myForm' and provide a simple callback function
    jQuery('#myform').ajaxForm(options);
    return false;
    });`

    The php to process the form is below, note that whatever weaknesses this may have it does work on the static pages.

    ` <?php
    ini_set ('display_errors', 1);
    error_reporting (E_ALL & ~ E_NOTICE);
    if (isset ($_POST['submit'])) {//Handle the form
    if ($dbc = @mysql_connect('localhost', 'DB-user', 'DB-password')) {

    if (!@mysql_select_db ('DB-name')) {
    die ('<p>Could not select the database because <b>' . mysql_error() . '</b></p>');
    }
    }else{
    die('<p>Could not connect to MySQL because <b>' . mysql_error() . '</b></p>');
    }
    //Define the query
    $query = "INSERT INTO table-name (ID, name, url_problem, description, url, browser, operating_system,date_entered)
    VALUES (0, '{$_POST['name']}', '{$_POST['url_problem']}', '{$_POST['description']}','{$_POST['url']}','{$_POST['browser']}','{$_POST['operating_system']}',NOW())";

    //Execute the query
    if (@mysql_query ($query)) {
    print '<p class="response">Your comment has been added. Please close the form and continue with your evalation. Thank you.</p>';
    }else{
    print "<p>Could not add your comment because <b>" . mysql_error() . "</b> The query was $query.</p>";
    }
    mysql_close();
    }
    ?>`

    The dialog script is

    `jQuery(document).ready(function() {
    jQuery('#openform a').each(function() {
    var cancel = function() {
    $dialog.dialog('close');
    };
    var $link = jQuery(this);
    var $dialog = jQuery('<div></div>')
    .load($link.attr('href'))
    .dialog({
    autoOpen: false,
    title: $link.attr('title'),
    width: 700,
    height: 800,
    modal: true,
    //buttons: { "Close": cancel, "Cancel": cancel},
    beforeClose: function (event, ui) {//clear previous success messages
    jQuery("div#output1, div#output2, div#output3").empty();
    },
    open: function (event,ui) {//write the url value into the form
    jQuery("input[name='url']").val(pageAddress);
    }
    });

    $link.click(function() {
    $dialog.dialog('open');
    jQuery( "#accordion" ).accordion({
    collapsible: true,
    active: false,
    fillSpace: true,
    clearStyle: true
    });
    return false;
    });
    });
    });
    `

    I'd appreciate any suggestions as the possible cause of the problem.

    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic