CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
Mitch Evans
Mitch Evans

Reputation: 641

Form submits <select> as undefined

I have the following <select> inside a <form> that is submitted with ajax. The select is submitting with a value of: Undefined. What is wrong? 

<select class="form-control" name="site_theme" id="site_theme" value="<?php $result = mysqli_query($con,"SELECT * FROM settings"); while($row = mysqli_fetch_array($result)) { echo $row['site_theme']; }?>">
   <?php 
      $result = mysqli_query($con,"SELECT * FROM themes");

      while($row = mysqli_fetch_array($result))
      {
        echo "<option VALUE='".$row['theme_name']."'>".$row['theme_name']."</option>";
      }
    ?>
</select>

The javascript copied here to ugly to post so I made a jsFiddle here: http://jsfiddle.net/yz5r4/

Also the above code results as: 

<select class="form-control" name="site_theme" id="site_theme" value="Amelia">
   <option value="Amelia">Amelia</option>
   <option value="Cerulean">Cerulean</option>
   <option value="Cosmo">Cosmo</option>
   <option value="Cyborg">Cyborg</option>
   <option value="Flatly">Flatly</option>
   <option value="Journal">Journal</option>
   <option value="Readable">Readable</option>
   <option value="Simplex">Simplex</option>
   <option value="Slate">Slate</option>
   <option value="Spacelab">Spacelab</option>
   <option value="United">United</option>
</select>

Upvotes: 0

Views: 627

Answers (1)

Sina R.
Sina R.

Reputation: 1788

you problems was first a return before ajax call.

second wrong selector for select!

Here is a sample that shows you. http://jsfiddle.net/yz5r4/3/

your selector : $('input$("#site_theme")')

but it should be $("#site_theme") or $("select#site_theme")

HTML:

<select class="form-control" name="site_theme" id="site_theme" value="Amelia">
   <option value="Amelia">Amelia</option>
   <option value="Cerulean">Cerulean</option>
   <option value="Cosmo">Cosmo</option>
   <option value="Cyborg">Cyborg</option>
   <option value="Flatly">Flatly</option>
   <option value="Journal">Journal</option>
   <option value="Readable">Readable</option>
   <option value="Simplex">Simplex</option>
   <option value="Slate">Slate</option>
   <option value="Spacelab">Spacelab</option>
   <option value="United">United</option>
</select>
<input type="button" id="mclick" value="click" />

JS:

// General Form Submit
$(function () {
    $('.error').hide();
    $("#mclick").click(function () {
        // validate and process form here  
        var theme = $("#site_theme").val();
        alert(theme);
    });
});

Upvotes: 2

Related Questions