1

I'll try to keep this as brief as possible while still providing the required info as it is part of a much larger project. Essentially the goal of this page is to have hidden by default CSS elements that are shown as selected and need to remain visible after the "submit" action.

The question is how exactly to accomplish this. My current problem is that despite the code shown below the page refreshes after the submit button is clicked, which also resets the form visibility to hidden. I need it to remain visible while still processing the output php code.

The page is split into a left and right side, where the left side is the input (form) and the right side is the output of said form. The site is written in PHP with HTML5/JS/CSS/AJAX as necessary.

The unnecessary bits are truncated:

***** index.php *****
<?php

echo '<!DOCTYPE html>'."\n";
echo '<html>'."\n";
echo '<head>'."\n";
echo '<meta charset="UTF-8">'."\n";
echo '<script src="base.js"></script>'."\n";
...
echo '<link rel="stylesheet" type="text/css" href="input_form.css">'."\n";
...
echo '</head>'."\n";
echo '<body>'."\n";
...
echo '<span id="input_block" style="display:none;z-index:1;">';
    require_once "input_form.php";
echo '</span>'."\n";
...
echo '</body>'."\n";
echo '</html>'."\n";
?>

***** base.js *****

var input_form = "";
var script_output = "";

//called from a multi-tier drop down menu of various form options
function show_sub(choice) {
    var input_block = document.getElementById('input_block').style;

    // Show the input form container for the first time
    if(input_block.display = "none"){
        input_block.display = 'block';
    }
    // This will hide current form to be replaced with selected form after first click
    if( input_form != "" ) {
        window.input_form.display = 'none';
    }
    // Update the current input form globally
    window.input_form = document.getElementById(choice).style;
    window.input_form.display = 'block';
}

//This is what is not working. Sourced from: http://stackoverflow.com/questions/23507608/form-submission-without-page-refresh

var input_data = $('#input_form');

input_data.submit(function (data) {
    $.ajax({
        type: input_data.attr('method'),
        url: input_data.attr('action'),
        data: input_data.serialize(),
        success: function (complete) {
            alert('data processing');
        }
    });
    data.preventDefault();
});

***** input_form.php *****

<?php
echo '
    <form id="input_form" action="index.php" method="get" name="submit">
';
    require_once "cpe_input.php";
echo '
    </form>
';
?>

***** cpe_input.php *****

<span id="cpe_3916">
            <table>
                <colgroup>
                ...
                <tr> <!-- example form field -->
                    <td class="form_text">BANDWIDTH (MB)</td>
                    <td class="form_field" colspan="5">
                        <input type="text" name="bandwidth">
                    </td>
                </tr>
                <tr>
                    <td colspan="6">
                        <input type="submit" value="GENERATE SCRIPT" class="input_submit" style="position:relative;left:-1px;" onmouseover="this.style.cursor='."'pointer'".';">
                    </td>
                </tr>
            </table>
        </span>
';

***** input_form.css // omitted as it is position and style options only

I didn't include the output text code as its just plain text nested in a <span> tag to the right of the form on the page.

I also haven't yet tackled form validation, so that is a concern in terms of where in the code that step is done (ajax triggered upon leaving field focus) and preventing form submit action until all validations are passed.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
ZeeDubs
  • 11
  • 1

1 Answers1

1

Looks like this was answered here, but you probably want to wrap your submit function in DOM Ready.

$(function() {
  var input_data = $('#input_form');

  input_data.submit(function (data) {
    data.preventDefault();
    $.ajax({
        type: input_data.attr('method')
        url: input_data.attr('action'),
        data: input_data.serialize(),
        success: function (complete) {
            alert('data processing')
        }
    });
  });
});

UPDATE:

There may be times when you have to attach the function to the document rather than the individual element. This will slow down the processing, but if this works, you can look for how to more efficiently attach to the form element rather than the whole document. Try the following:

$(function() {
  var input_data = $('#input_form');

  $(document).on('submit', input_data, function (data) {
    data.preventDefault();
    $.ajax({
        type: input_data.attr('method')
        url: input_data.attr('action'),
        data: input_data.serialize(),
        success: function (complete) {
            alert('data processing')
        }
    });
  });
});
Community
  • 1
  • 1
NFab
  • 386
  • 4
  • 6
  • This is sensible, however it is still not working. As written, the page is refreshing and the submit alert is not presented. – ZeeDubs Oct 05 '16 at 15:56
  • Try moving your preventDefault to the top of your submit method. I've updated my answer to show this. – NFab Oct 06 '16 at 16:04
  • unfortunately that did not solve the issue. The page is still refreshing upon submit and resetting visibility of the form span block. – ZeeDubs Oct 06 '16 at 17:52
  • Hmm. This seems like a timing issue. The `preventDefault()` should definitely not allow the page to refresh. Is your path to `base.js` in your PHP correct? Do have this code up somewhere where I could take a look at a live example? – NFab Oct 07 '16 at 00:40
  • It is unfortunately on a private network. The base.js file is definately loading as I have other functions in it that are all working well. I can paste the entire contents, but its essentially two functions that swap span tag visibility on click. I have noticed that the $_GET data is showing in the URL after clicking submit, so I think the issue may be purely the non-refesh issue. Since the visibility settings of all the elements are 'hidden' on page load that seems to be my indicator that a refresh or at least a reload is happening. – ZeeDubs Oct 07 '16 at 17:25
  • It seems like you've got some edge cases going on here. I've updated my answer with another option to try. Let me know if that works for you. – NFab Oct 10 '16 at 17:25
  • Unfortunately that new approach also did not solve the problem. I wish I could make the server publicly viewable, but that is not an option. Maybe this will help. The workflow is pageload (all elements "hidden"). From main menu selecting category makes a relavent multi-tier menu button "visible". From that menu the appropriate form becomes "visible" (calling the show_sub() function above). Submitting the form button should process the data and will eventually display an output span block element by making it "visible" as well. However, submit button is still reverting everything to hidden. – ZeeDubs Oct 12 '16 at 16:54
  • I neglected to mention that though the $_GET data is visible in the URL after clicking submit, the alert box never shows up either. – ZeeDubs Oct 12 '16 at 16:55
  • There is nothing proprietary about the code I'm writting as it is still in the framework stage. Perhaps I can zip all the files and make them available via google drive if you provide an email. That may be an option. – ZeeDubs Oct 12 '16 at 16:58
  • @ZeeDubs, sorry, it's been a busy week. I'd be happy to take a look, but not keen on posting my email address on a public forum. Is there any place you can post the files and post a link here. Then, remove it once I DL them? – NFab Oct 19 '16 at 15:42
  • Ok. I've downloaded the files. I will take a look and let you know what I find. – NFab Oct 19 '16 at 21:40
  • Sorry again for the delay. Had some travel and other things going on. I have a solution for you. I assumed that since you were using jQuery in your script that you were including jQuery in your project; however, after looking through your files and testing them, I discovered that you have no reference to it, so it is throwing an error that '$' is undefined at line 40 in base.js. The solution is to add the following line to index.js just above your reference to base.js. `echo ''."\n";` – NFab Nov 02 '16 at 04:35
  • Alternatively, you can download jQuery and include it locally, if you'd prefer. You can get it from http://jquery.com/download. Once you include jQuery either through the Google CDN above or by including a local copy, your form should work as desired. – NFab Nov 02 '16 at 04:35
  • Oh my gosh, I feel very foolish. No worries on the delay, thank you for the time you've invested thus far. I completely forgot to add that and I should know better. However, I've just tested it with that jquery dependency added and it is still clearing the page when clicking the "generate script" button under the CPE_Menu section. I'm not sure what else I'm doing wrong. I've even put an extra alert box right under data.preventDefault(); and it does not appear. Anything else I could be missing? – ZeeDubs Nov 04 '16 at 16:26
  • Did you echo the jQuery script above your `base.js` echo or below it? It needs to be above/before it. – NFab Nov 04 '16 at 17:42