value of the select option going to be lost when it return a erro on the form

Question

i know this sounds like similar,but i couldnt find a useful article. I have select option html tag in my website that im used to select categories.but the end user selected values disappear(come to the first value where ever has been selected). In a example i have this tag

<select name="type" >
    <option value="">select a category</option>
    <option value="car">car</option>
    <option value="van">van</option>
    <option>
</select>

in a example first select box is selected when the browser loading for the first time and any user can select any value and it must not be empty.and if user select "van" and has been fill out other fields as well in the form but if it return error before insert the values to my database, this select box value has been reset to the first value ("select a category"). I want to prevent this happening anymore.I hope any of expert can help me at this point.Thank you !

Hi Leone, you need to elaborate you question a little more, is quite difficult to understand what actually you are trying to achieve, maybe some code for us to figure it out what's happening? — ncubica, Apr 22 '16 at 03:04
If my answer is not helpful, please update your question and add the rest of your HTML / javascript / jQuery code. We need to see the form the user fills out, and the PHP code to insert the data into the database. Please leave a comment under my answer and tell me what more information you require. — cssyphus, Apr 22 '16 at 03:45
THank you,you are almost at my question.No ,thing is my inserting data to the database happening fine. "IMPORTAND : form is working fine.My problem is select option only.It is also working fine.but if the page reload (if other fields empty then form return with erro that im validating) so then values of the select option tag lost and reset to the first value". Hope you g ot me — Leone Maleash, Apr 22 '16 at 03:59

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

I think I understand your question.

Visitors to your web page complete a number of data fields, one of which is a select control. However, if there is a problem submitting the data to the database, then the values are erased when the page is re-displayed to the user. Is this correct?

If so, there are a couple of ways to solve it.

(1) Client-side field validation: Before the form is submitted, test the values of the fields to be sure they are valid before allowing the form submission to continue. Something like:

javascript/jQuery:

$(document).ready(function(){
    $('#myFormID').submit(function(e){
        var first_name = $('#firstname').val();
        var last_name = $('#lastname').val();

        if (firstname=="" || lastname==""){
            alert('Please complete all fields')
            e.preventDefault();
        }

    });
}); //END document.ready

(2) AJAX. Ajax is a method that allows you to submit data to the server (similar to using a form) without leaving/refreshing the page. If there is a problem, the page can be updated telling the user what to fix -- and all the user's changes are preserved. You can use a <form> container with AJAX, but it is not necessary. You can just use DIVs and AJAX will work the same. In fact, when using a form, you always must use event.preventDefault() to stop the form from trying to leave the page (its default behaviour).

javascript/jQuery:

$(document).ready(function(){
    $('#myFormID').submit(function(e){
        var first_name = $('#firstname').val();
        var last_name = $('#lastname').val();

        if (firstname=="" || lastname==""){
            alert('Please complete all fields')
            e.preventDefault();
        }

    });

    $('#myFormID').submit(function(e){
        var first_name = $('#firstname').val();
        var last_name = $('#lastname').val();

        if (firstname=="" || lastname==""){
            alert('Please complete all fields')
            e.preventDefault();
        }

        $.ajax({
            type: 'post',
             url: 'add_the_data.php',
            data: 'fn=' +firstname+ '&ln=' +lastname,
            success: function(d){
                if (d == 1){
                    //Success
                    $('#firstname').val('');
                    $('#lastname').val('');
                    alert('Form submission was successful');
                }else
                    //Fail
                    alert('Data was not submitted. Please try again.')
                    $('#firstname').focus();
                }
            }
        });
    }); //End Submit

}); //END document.ready

add_the_data.php

<?php
    $fn = $_POST['fn'];
    $ln = $_POST['ln'];

    //Do your database entry here

    $out = add_the_data_function($fn, $ln); //returns 1 or 0
    echo out;

References:

More about AJAX, some simple examples

THank you,you are almost at my question.No ,thing is my inserting data to the database happening fine. "IMPORTAND : form is working fine.My problem is select option only.It is also working fine.but if the page reload (if other fields empty then form return with erro that im validating) so then values of the select option tag lost and reset to the first value". Hope you g ot me — Leone Maleash, Apr 22 '16 at 03:59
Any time that a page reloads, elements will lose values. If other fields are keeping their values, that will not be reliable. If you need to reset all field values to the user's choices, then you can either (1) use AJAX, or (2) POST all user data back to the main page when you need to reload, and rebuild the page with the user's values. Honestly, try AJAX. It is really very simple. Once you play [with a few examples,](http://stackoverflow.com/questions/17973386/ajax-request-callback-using-jquery/17974843#17974843) you might never use forms again. Seriously. *But you must experiment examples!* — cssyphus, Apr 22 '16 at 04:09

value of the select option going to be lost when it return a erro on the form

1 Answers1