CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
Charas
Charas

Reputation: 1827

How to change value of appended select element in a form

I have this form where there is one select element originally but the user can add the number of select when clicking on 'add'. Then when the user submitted the form, and there are some invalid input (i.e unfilled input) the form is not submitted ( I am using php for form validation), and it goes back to the original page with only 1 select displayed, so I use jquery and count the array of the select submitted and append the select elements as much as the user chosen at first. Now the problem is how do I set the value of the appended select to be the value that the user has chosen ?

Sorry for the bad explanation, here is the code, hope it helps giving a clearer picture :

html

<div class='select_container'>
    <select name='select[]'>
       <option value='option1'>Option1</option>
        <option value='option2'>Option2</option>
        <option value='option3'>Option3</option>
    </select>
</div>

<div class='add'>Add</div>

JQuery

$(document).ready(function() {

    //User can add more select element by clicking 'add'

    $('.add').click(function() {
        $('<select name="select[]">' +
          '<option value="option1">Option1</option>' +
          '<option value="option2">Option2</option>' +
          '<option value="option3">Option3</option>' +
          '</select>').appendTo('.select_container');
    });

    //When form failed to submit(i.e invalid input), automatically 
    //add the select element as many as the user added at first

    //get the user select input, make it into array

    var select = "<?php $select= echo implode(',',$_POST['select']); ?>";
    var select_array = select.split(',');
    var select_length = select_array.length;

    //after counting length of array, add the amount of select element the user added

    for (i = 1; i < select_length; i++) {
        $('<select name="select[]">' +
          '<option value="option1">Option1</option>' +
          '<option value="option2">Option2</option>' +
          '<option value="option3">Option3</option>' +
          '</select>').appendTo('.select_container');
    }
});

I managed to append the select element so that when form failed to submit, user did not have to re-add the select element, and I want the appended select element when the form failed to submit to automatically set to the value that the user chosen.

I have tried delegate(), on() and a bunch of other stuff, but I am still unable to set the value of the appended select elements. I was only able to set the value of the original first select in the html.

Please if anyone knows a way to set the value of the appended select, all answers and suggestions are greatly welcomed and appreciated.

Thanks

Upvotes: 0

Views: 382

Answers (2)

Bence Gajd&#225;n
Bence Gajd&#225;n

Reputation: 612

You can do something like this (I'm assuming you post the form back to the same file):

//  if reloaded after post basically
if( select.length > 0 ) {
    //  if there are multiple groups of selects, add class and call each on that
    $('select').each(function(i) {
        $(this).val( select_array[i] );

    });

}

The order of the selects are guaranteed due to the linear nature of the form processing, so that should't be a problem.

Upvotes: 1

Bellash
Bellash

Reputation: 8184

Assuming that options stay same, You may do it simply by submitting the form to the same page(current page) and In your php file, html part should look like this

 <div class='select_container'>
    <select name='select[]'>
       <option value='option1'>Option1</option>
        <option value='option2'>Option2</option>
        <option value='option3'>Option3</option>
    </select>
 <?php
      if(!isset($_POST)&&!empty($_POST['select'])){
         for($i=0;$i<sizeof($_POST['select']);$i++){
           echo '<select>';
             $options=array('option1','option2','option3');
             for($j=0;$j<sizeof($options)){
                 if($options[$j]==$_POST['select'][$i]){
                    echo '<option 
                          value="'.$options[$j].'" 
                          selected="selected">'.$options[$j].'</option>';
                 }else{
                    echo  '<option
                     value="'.$options[$j].'">'.$options[$j].'</option>';
                 }
             }
           echo '</select>';
         }
      }
 ?>
</div>

<div class='add'>Add</div>

Upvotes: 0

Related Questions