提交后剩余的表单输入值

Question

now i have a input text, radio, and a submit button ..

lets say my url = image-search.php

<form>
<input type="text" name="name"><br>
<input type="radio name="arrange" value="horizontal"><br />
<input type="radio name="arrange" value="vertical"><br>
<input type="submit" name="submit"><br>

when i click the button.. it redirect same page but url = image-search.php?name=ss&arrange=horizontal

and this page still have the button..

the question is .. after i click button at 1st page = image-search.php

i want the user input value remain in the input text of name..

and how to make the checkbox as checked based on user choose?

Answer 1

If the page is reloaded when you submit the form you could use php to set default values for your form fields

<form>
<input type="text" name="name" value="<?php echo isset($_GET["name"])?$_GET["name"]:""; ?>"><br>
<input type="radio" name="arrange" value="horizontal"<?php echo (isset($_GET["arrange"])?($_GET["arrange"]=="horizontal"?" checked='checked'":""):""); ?>><br />
<input type="radio" name="arrange" value="vertical"<?php echo (isset($_GET["arrange"])?($_GET["arrange"]=="vertical"?" checked='checked'":""):""); ?>><br>
<input type="submit" name="submit"><br>
</form>

Answer 2

Here is the answer to your question.. hope this will help everyone.. @Macke - your approach for setting values after submission is really good, but when we have lot of elements on form.. let's say 1000 - it become pain in AS*..

Add this script tag in your HEAD tag of the page -

<script language="javascript" type="text/javascript">
    var obj = JSON.parse('<?= json_encode($_REQUEST) ?>');
    console.log(obj);

    function __setPostBackValue(element){
        if(obj.length <= 0) return;
        var type = element.type;
        var fval;
        console.log('Processing...'+ element.name);
        try{
            eval('fval = obj'+'.'+element.name);
        }
        catch(ex){

        }
        if(type == 'text'){
            element.value = fval; 
        }
        if(type == 'checkbox'){                    
            if(fval != undefined)
                element.setAttribute("checked","on");                        
        }
        if(type == 'radio'){                    
            if(fval != undefined && element.value == fval)
                element.setAttribute("checked","on");                        
        }

    }

</script>

and at the bottom of the page, yes at the bottom of the page (before body ends) add another script tag -

<script language="javascript" type="text/javascript">
            var fields = document.getElementsByTagName('input');
            for(var i=0;i<fields.length;i++){
                __setPostBackValue(fields[i]);
            }
        </script> 

What it does ? When you submit your form, var obj = JSON.parse('<?= json_encode($_REQUEST) ?>'); this creates local JSON Object usable by Javascript - and the script we added at the end of the page.. loop through all elements and call __setPostBackValue function. Where we are setting the values of the elements by Javascript.

This is little bit tricky but it works..!!

PS: I had no radio button in my page, but if you have you can add it easily.

-Paresh Rathod