How to prevent select value to reset on form submit?

Question

In the view,

<select id="gender" ng-model="gender">
     <option value=''>Gender?</option>
     <option value="female" >Female</option>
     <option value="male" >Male</option>
     <option value="other" >Other</option>
</select>
<input type="hidden" name="gender" value="{{gender}}">

On submit error, the submitted value is retrived and put as the select value,

var theValue = "<?php echo set_value('gender');?>";
var e = document.getElementById("gender");
e.value = theValue;

On submitting the incomplete form, the select should retain the post value, and momentarily it does, but resets again. How do I prevent the select to reset and keep the value?

Use PHP magic methods. It is specially designed for it. sharing sample code in answer. — Sonal Khunt, Mar 29 '17 at 13:21

score 0 · Answer 1 · answered Mar 29 '17 at 13:29

Try this, create this PHP function,

    function __selectedDb($ctrlValue,$dbValue)
{
    if($ctrlValue == $dbValue)
        return "selected='selected'";
    else
        return "";
}

and use like this,

<select class="custom-select" id="selImgTiling" name="selImgTiling" value="<?php echo $arrBgSettings['bg_image_tiling']?>">
                                <option value="no-repeat"   <?php echo __selectedDb('no-repeat',$arrBgSettings['bg_image_tiling'])?>>Tiling Off</option>
                                <option value="repeat"      <?php echo __selectedDb('repeat',$arrBgSettings['bg_image_tiling'])?>> Repeat</option>
                                <option value="repeat-x"    <?php echo __selectedDb('repeat-x',$arrBgSettings['bg_image_tiling'])?>>Repeat Horizontal</option>
                                <option value="repeat-y"    <?php echo __selectedDb('repeat-y',$arrBgSettings['bg_image_tiling'])?>>Repeat Vertical</option>
                            </select>

I think he wants to use PHP with AngularJS though. This is pure PHP. — Murilo, Mar 29 '17 at 13:40

score 0 · Accepted Answer · edited May 23 '17 at 12:17

First, try to always use an object on your ng-model directives, something like:

ng-model="form.gender"

This is best described here: If you are not using a .(dot) in your AngularJS models you are doing it wrong?

On the response all you need to do is set the form.gender attribute and the two-way-binding of AngularJS will take care of the rest.

Try using the ng-init directive to get values from PHP and use them on your AngularJS controller like:

ng-init="initGender('<?php echo set_value('gender'); ?>')"

and then inside your AngularJS controller:

$scope.form = {};
$scope.initGender = function(gender) {
    $scope.form.gender = gender;
};

This one worked out well. In the init, instead of calling the function, I put "gender = " Thanks.. — Atul Kumar, Mar 29 '17 at 14:58

How to prevent select value to reset on form submit?

2 Answers2