Form display PHP HTML

Question

I have multiple PHP files that interact with eachother, and I have a function called display_lang_offer() on the output.php file that gets called in the lang_offer.php file which is shown below:

function display_lang_offer(){
  //languages offered
?> 
<form>
  <select name="languages">
    <option></option>
    <option value"html">HTML</option>
    <option value"css">CSS</option>
    <option value"js">JavaScript</option>
    <option value"csharp">C#</option>
    <option value"php">PHP</option>
    <option value"java">Java</option>
    <option value"phython">Phython</option>
  </select>
  <br><br>
</form>
<div class="section" id="html">html content here</div>
<div class="section" id="css">CSS content here</div>
<div class="section" id="js">js content here</div>
<div class="section" id="csharp">csharp content here</div>
<div class="section" id="php">php content here</div> 
<div class="section" id="java">java content here</div>
<div class="section" id="phython">phython content here</div>

And the Javascript is:

var id;
$("#languages").on("change",function(){
id=$(this).val();
$(".section").hide();
$("#"+id).stop().show();
})

And the CSS is:

.section{display:none}

How do I get it, that when I select the HTML option, the HTML content gets displayed? Then if I choose the Java option, the HTML option disappears and the Java one appears.

Edit

The entire function now is:

function display_lang_offer(){
  //languages offered
?> 
<script>
var id;
$("#languages").on("change",function(){
id=$(this).val();
$(".section").hide();
$("#"+id).stop().show();
})
</script>
<style>
.section{display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select name="languages"id="languages">
    <option></option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
    <option value="csharp">C#</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="python">Python</option>
  </select>
  <br><br>

</form>
<div class="section" id="html">html content here</div>
<div class="section" id="css">CSS content here</div>
<div class="section" id="js">js content here</div>
<div class="section" id="csharp">csharp content here</div>
<div class="section" id="php">php content here</div> 
<div class="section" id="java">java content here</div>
<div class="section" id="python">python content here</div>

I've tried both answers but neither seem to work

$("#languages")--- I don't see that ID on your select element — DaniP
– DaniP, Commented Sep 8, 2016 at 21:42
<select id="languages">or check the answer from @JorgeObregon — DaniP
– DaniP, Commented Sep 8, 2016 at 21:45
this: name != id. $('#foo') is NOT going to find <select name="foo"> — Marc B
– Marc B, Commented Sep 8, 2016 at 21:45
@JonSmith if the answer worked, please flag it as 'accepted' for the community to know it works. Cheers! :D — JorgeObregon
– JorgeObregon, Commented Sep 8, 2016 at 21:52

pr0gramista · Accepted Answer · 2016-09-09 12:37:12Z

Your code has several issues:

<option value"java">Java</option> you are missing = between value and string so calling .val() gets text instead of value (as it is broken)
You did not set id on your select element. If you want to use $("#languages") add id value on it <select name="languages" id="languages">
You need to put script after html.

The following snippet shows working code with only necessary fixes, I did not set id on select but instead used selector based on name:

var id;
$("[name=languages]").on("change",function(){
 id = $(this).val();
 $(".section").hide();
 $("#"+id).show();
})

.section { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select name="languages">
    <option></option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
    <option value="csharp">C#</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="phython">Phython</option>
  </select>
  <br><br>
<input type="Submit">
</form>
<div class="section" id="html">html content here</div>
<div class="section" id="css">CSS content here</div>
<div class="section" id="js">js content here</div>
<div class="section" id="csharp">csharp content here</div>
<div class="section" id="php">php content here</div> 
<div class="section" id="java">java content here</div>
<div class="section" id="phython">phython content here</div>

The entire function should be like (but you propably don't need these extra php tags):

<?php
function display_lang_offer(){
  ?>
  <style>
  .section{display:none;}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <form>
    <select name="languages"id="languages">
      <option></option>
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="js">JavaScript</option>
      <option value="csharp">C#</option>
      <option value="php">PHP</option>
      <option value="java">Java</option>
      <option value="python">Python</option>
    </select>
    <br><br>

  </form>
  <div class="section" id="html">html content here</div>
  <div class="section" id="css">CSS content here</div>
  <div class="section" id="js">js content here</div>
  <div class="section" id="csharp">csharp content here</div>
  <div class="section" id="php">php content here</div>
  <div class="section" id="java">java content here</div>
  <div class="section" id="python">python content here</div>
  <script>
    var id;
    $("#languages").on("change",function(){
    id=$(this).val();
    $(".section").hide();
    $("#"+id).stop().show();
    })
    </script>
  <?php
}
?>

JorgeObregon · Accepted Answer · 2016-09-08 21:44:23Z

2

Replace your js with this:

var id;
$('[name="languages"]').on("change",function(){
  id=$(this).val();
  $(".section").hide();
  $("#"+id).show();
})

Another option is to replace:

<select name="languages">

with:

<select name="languages" id="languages">

answered Sep 8, 2016 at 21:44

JorgeObregon

3,3701 gold badge14 silver badges12 bronze badges

Collectives™ on Stack Overflow

Form display PHP HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related