I am not sure if there is something about wordpress, or what I am doing, but I can not get online tutorials to work when implementing in a page template. For example this http://www.computersneaker.com/submit-a-form-without-page-refresh-in-php-using-jquery/ Tutorial with modifying the $query and the mysql call to just echo $name; I will explain my actual problem and maybe someone can see my misunderstanding.

This post title sounds the same Ajaxify Form That Submits To Same Page To Display Post Data but besides for no answer, the content seems different.

What I am trying to do is have a form with different inputs. The user clicks an enter button, and then a table on the same page is updated. Basically the data they enter is searched on a database, some calculation is done, and then the result is shown in the table. It uses lots of arrays and connecting to db with $wpdb->get_results.

I am using do_shortcode and POST, if that changes anything.

My structure has been to do it in the same page;

<form action ="" method="post">
Enter Your Age <input type="number" min="1" name="age" style="width:50px;">

Select Field
<select name="field">
    <option value="P">Field P</option>
    <option value="M">Field M</option>
    <option value="C">Field C</option>
<div class="input_fields_wrap">
    <button class="add_field_button">Add Field</button><br><br>
    <div>Field Name: <input type="text" name="fieldname[]">
Total Datum:</td><td><input style="width:50px;" name="datum[]" type="number" min="1" id="datum">
<input type="submit" name="test" value="Calculate"/>

Under this, I then try to parse the variables

    $capture_field_vals ="";
    foreach($_POST["fieldname"] as $key => $text_field){
        $capture_field_vals .= $text_field .", ";
    $dataset[] = $text_field;
    foreach($_POST["field"] as $key => $text_field){
        $capture_field_vals .= $text_field .", ";
    $field[] = $text_field;
    $field = $_POST["field"];

Then I do some algorithm stuff with comparing the variables to $wpdb->get_results.

Lastly I put the results in the table on the page.

This currently works now, but when the submit button is pressed, the page refreshes, the users entered data is gone, but the table updates correctly. I am having trouble finding information on how to do this. When I look up how to stop a page refresh, the tutorials are all on sending data to a database and put the code in a different file. I need the table to be always on the page, just full of 0's until data is entered. Then keep the values in the form, and update the table on button press. Is this possible to do in the same file or am I misunderstanding a fundamental issue?


If I understand correctly

  • you need the original form to display the values of what has just been posted.
  • You also need the table to display 0 on values that haven't been calculated.
  • At the moment the table calculates information perfectly with a submit refreshing the page.

You can use the if(isset($_POST["fieldname"])){ variable you have above to do this.

if(isset($_POST["fieldname"])){ echo $_POST["fieldname"]

would echo the value of what has been posted, ie text in a text box. In your case it is a checkbox so you use something like this instead:

<input type="checkbox" name="txtCheck" value="your value" <?php if(isset($_POST['txtCheck'])) echo "checked='checked'"; ?>  />

You can do the same with the table. If you want it to be 0 before calculation (without seeing your table code)

Something like this in your cell:

if (empty($cellvalue)) echo '0'; //If there is no data to display show 0 
else echo $cellvalue;
  • Does this still refresh the page, but just echos the value back into the text field? Your 3 bullets are correct, what I have now is both the zero and the calculation (table updates correctly), it is just a refresh problem. I am looking for how to not refresh so the elements on the page do not change. Maybe I have to add an edit to the question, but the fieldname textbox uses a jquery function to dynamically add more than one (all the values are stored in an array and then uses foreach). So when a refresh happens, the original field is still there, but the extras are removed. – user-2147482637 Sep 30 '14 at 14:52
  • Ah ok, so you mean your extra jQuery boxes are removed when the page is refreshed, but the data is still there? If so you could look at AJAX which sends data without a refresh but certainly not my area of expertise. I can't see the script but from the code above are they all called fieldname[1] or fieldname[2] etc as they are created? – Bysander Oct 1 '14 at 11:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.