Any way to keep a form state ?

[adrianmak]

My site have a search

Changing value of a select option field will dynmaic query (ajax) in the back-end

to show the 3rd select option

When search is submitted, the form will reset to initial ( the first screen)

I want to keep the last form selected state, even the form is submitted.

[tpr]

Populate the two selects with PHP using POST or GET variables (according to your form's method).

[adrianmak]

Populate the two selects with PHP using POST or GET variables (according to your form's method).

Do u mean rebuild the search form with the populated form variables in the search template ?

[pwFoo]

PW form API should populate field values with the submitted values I think.

I like to use it

[adrianmak]

How ? could u mind post some sample code ?

[pwFoo]

Here is the link to Soma's post about:

https://processwire.com/talk/topic/2089-create-simple-forms-using-api/

Or topic / hint about session saved values

https://processwire.com/talk/topic/8488-form-api-store-data-in-session-and-repopulate-hint/

I use an extended InputfieldForm object with FormHelper module:

https://processwire.com/talk/topic/7860-module-formhelper/

[tpr]

Do u mean rebuild the search form with the populated form variables in the search template ?

So the third select is generated on the fly, so it's not on the page if previous selects are empty?

If so, you may trigger a 'change' event for the second select (using the POST/GET variables, if the exist), and this should create the third select. Basically it's the same as if a user had entered something to the second select.

[Martijn Geerts]

When using the Forms API $form->processInput($input->post); will proces the input, but also pre-populate the ->value(s) of the fields.

[pwFoo]

@Martijn

Thanks, I wasn't sure about that...

[adrianmak]

Let me state more clearly

The search form started for two fields only, (3rd field is not on the page. i.e it is not hide by css)

1st field, a text input field

2nd field, a select option field.

When  a user select an option in 2nd field, based on the option value, a ajax query to back-end to retrieve options, which will return 3rd select option thru ajax.

the javascript script

$(document).ready(function() {
	toggleFields();
	$('#type').change(function() {
        toggleFields();
    });
});

function toggleFields() {
	var query_value = $('#type').val();
    if ($('#type').val() == '') {
        $("span.search_options").hide();
    } else {
        $.ajax({
    		type: "POST",
    		url: "/query.php",
    		data: { query: query_value },
    		success: function(html) {
    			//console.log(html);
    			$("span.search_options").html(html);
    			$("span.search_options").show();    			
    		}
    	});        
    }         
    //console.log(query_value);
}

query.php

<?php
// ProcessWire bootstrap
include('./index.php');
$out = "";

$query_string = wire(sanitizer)->text($wire->input->post->query);
$categories = wire(pages)->get($query_string)->children();

$out = "<select class='search__select' id='typeoptions' name='typeoptions'>";

foreach($categories as $category) {
    $out .= "<option value='{$category->id}'>{$category->title}</option>";
}

$out .= "</select>";

echo $out;

initial search form

    <form method='post' action='<?php echo $config->urls->root; ?>search/'>
        <input class='search__input' type='text' name='search_keywords' id='search_keywords' value='' />
        <select class='search__select' id='type' name='type'>
            <option value=''>All</option>
            <?php foreach($pages->get(1028)->children() as $category) {
                echo "<option value='{$category->id}'>{$category->title}</option>";
            }
            ?>
        </select>
        <span class='search_options'></span>
        <input class='search__button' type='submit' value='Search' />
    </form>

[tpr]

Yep, just set the first two selects' value using php (POST/GET), and then your toggleFields function in document ready should do the rest.

Edit: of course you should trigger the 'change' event to make it work, e.g in the end of document.ready function

$('#type').trigger('change');

[adrianmak]

Yep, just set the first two selects' value using php (POST/GET), and then your toggleFields function in document ready should do the rest.

Edit: of course you should trigger the 'change' event to make it work, e.g in the end of document.ready function

$('#type').trigger('change');

My code is working. However, I want the form to retain previous user selection states after a keyword search submission

[tpr]

I'm talking about the same thing. In the video above, you should set the second select's "News" option selected (php), and set "container" as the value of the first input (also in php). These variables (IDs) should be present in POST/GET.

Once you manage to populate these two, trigger the 'change' event to get the third select.

[adrianmak]

I'm talking about the same thing. In the video above, you should set the second select's "News" option selected (php), and set "container" as the value of the first input (also in php). These variables (IDs) should be present in POST/GET.

Once you manage to populate these two, trigger the 'change' event to get the third select.

understood ~~~~~~