javascript - Select on change/submit inside Ajax -

i have form gets submitted via ajax, inside form there 2 selects. these 2 selects data mysql using php.

i want show second select when first select has been chosen, i've tried onchange , onsubmit didn't work. ajax script keeps preventing that! tried passing value of first select vie js php, didn't work too.

<select class="form-control" name="sel1" onchange="recmarque();" required> <option value="" hidden selected>choose</option> <?php $r=$conn->query(sprintf("select * stock")) or die(mysqli_error($conn));     while ($d=$r->fetch_assoc()){ echo '<option value="' . $d[0] . '"'. ((!empty($sel1))?($d[0]==$sel1)?'selected':null:null) .'>'.$d[0].'</option>'; } ?> </select>  <script language="javascript">   function recmarque(){     var p1 = $("select[name=sel1]").val();     alert(p1);     return p1;   } </script> <?php      $s1= "<script>document.writeln(recmarque());</script>";      echo $s1; ?>  <select class="form-control" name="sel2" required> <option value="" hidden selected>choose</option> <?php if(!empty($s1)){   $r=$conn->query(sprintf("select * table x='$s1'")) or  die(mysqli_error($conn));    while ($d=$r->fetch_assoc()){   echo '<option value="' . $d[0] . '"'. ((!empty($sel2))?($d[0]==$sel2)?'selected':null:null) .'>'.$d[0].'</option>';   } } ?> </select> 

static html:

<select class="form-control" name="sel1" onchange="recmarque();" required>     <option value="" hidden selected>choose</option>     <option value="aaa">aaa</option>     <option value="bbb">bbb</option>                                         </select> <script language="javascript">     function recmarque(){         var p1 = $("select[name=sel1]").val();         alert(p1);         return p1;     } </script> <script>document.writeln(recmarque());</script>                                       <select class="form-control" name="sel2" required>     <option value="" hidden selected>choose</option> </select> 

i appreciate help

why using inline javascript while loading huge file of jquery? use jquery change event , wrapp hole code inside jquery dom ready event. additionnaly why mixing php markup , javascript, goes in contradition of ajax purposes , of goal descrption. want show second select after selection first select , content depends on selected value (which require server side fetching) send xmlhttprequest separate (small) file , response.

$('select[name=sel1]').change(function(e) {      e.preventdefault();       var value = $('select[name=sel1] option:selected').val();      var text = $('select[name=sel1]',this).text();     var urlforselect2 = $('select').attr('data-url');      // make ajax call , send value, text, , needed variable alongside       $.ajax({                         type: "get",                         url: urlforselect2,                         datatype: 'html',                         data: ({value: value, text: text}),                         success: function(data){                         $('select[name=sel1]').append(data);     });           return false;      }); 

and seperate the php responsible creating file url (urlforselect2 in case):

 <option value="" hidden selected>choose</option>     <?php  // values sent along ajax request using php $_get, let's $s1     if(!empty($s1)){       $r=$conn->query(sprintf("select * table x='$s1'")) or  die(mysqli_error($conn));        while ($d=$r->fetch_assoc()){       echo '<option value="' . $d[0] . '"'. ((!empty($sel2))?($d[0]==$sel2)?'selected':null:null) .'>'.$d[0].'</option>';       }     }     ?> 

and markup becoming smaller , readable like:

<select class="form-control" name="sel1" data-url="recmarque();" required> <option value="" hidden selected>choose</option> <?php $r=$conn->query(sprintf("select * stock")) or die(mysqli_error($conn));     while ($d=$r->fetch_assoc()){ echo '<option value="' . $d[0] . '"'. ((!empty($sel1))?($d[0]==$sel1)?'selected':null:null) .'>'.$d[0].'</option>'; } ?> </select>  <select class="form-control" name="sel2" required> <option value="" hidden selected>choose</option> </select>