CODEWITHSUNDEEP
jqueryload
Boom
Boom

Reputation: 41

function load not wroking

how to show my html page corresponding to the value of my select?

  <select name="choix" class="form-control" onchange="showstuff(this.value);">
        <option id="fr" value="fr">France</option>
        <option id="be" value="be">Belgique</option>
        <option id="ch" value="ch">Suisse</option>
      </select>
    <div id="FormFr"></div>
    <div id="FormBe"></div>
    <div id="FormCh"></div>

    <script>
    $(document).ready(function() {
        if ($("select[name=choix] option:selected").val() == 'fr') {
            $("#FormFr").load("formFr.html");
        }
    });
    </script>

Thanks

Upvotes: 0

Views: 73

Answers (5)

Boom
Boom

Reputation: 41

I post the solution by taking much of Arun P Johny. If you have more please feel free to post. I have the default form and when clicked fr the price changes depending on the country.

<script type="text/javascript"> function showstuff(element){ document.getElementById("fr").style.display = element=="fr"?"block":"none"; document.getElementById("be").style.display = element=="be"?"block":"none"; document.getElementById("ch").style.display = element=="ch"?"block":"none"; } </script>

<div id="fr" class="details" style="display:block;margin:0 0 0 0;">
  <?php include "fr.php" ?>
</div>

<div id="be" class="details" style="display:none;margin:0 0 0 0;">
  <?php include "be.php" ?>
</div>

<div id="ch" class="details" style="display:none;margin:0 0 0 0;">
  <?php include "ch.php" ?>
</div>

<?php if(isset($reponse )){ echo $reponse ; } ?><br>
<select name="choix" class="form-control" onchange="showstuff(this.value);">
    <option id="fr" value="fr">France</option>
    <option id="be" value="be">Belgique</option>
    <option id="ch" value="ch">Suisse</option>
</select>
<div id="FormPage"></div>
<script>
jQuery(function ($) {
    $('#FormPage').load('formFr.php');
    var pages = {
        fr: 'formFr.php',
        be: 'formBe.php',
        ch: 'formCh.php'        
    }
    $('select[name="choix"]').change(function () {

        var value = $(this).val();
        $('#FormPage').load(pages[value]);
        showstuff(value);
    })
});
</script>

Upvotes: 0

PeterKA
PeterKA

Reputation: 24638

$(document).ready(function() {
  $('select[name=choix]').on('change',function() {
    $('#Form' + this.value).load( 'form' + this.value + '.html' );
  })
  .change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="choix" class="form-control">
  <option id="Fr" value="Fr">France</option>
  <option id="Be" value="Fe">Belgique</option>
  <option id="Ch" value="Ch">Suisse</option>
</select>
<div id="FormFr"></div>
<div id="FormBe"></div>
<div id="FormCh"></div>

Upvotes: 0

Victor Can&#244;
Victor Can&#244;

Reputation: 543

I think this code should solve it:

<select name="choix" class="form-control">
    <option id="fr" value="Fr">France</option>
    <option id="be" value="Be">Belgique</option>
    <option id="ch" value="Ch">Suisse</option>
  </select>
<div id="FormFr"></div>
<div id="FormBe"></div>
<div id="FormCh"></div>

<script>
$(document).ready(function() {
    $("select[name=choix]").change(function() {
        var language = this.value;
        $("#Form" + language).load("form" + language + ".html");
    });
});
</script>

Notice that i have removed the 'onchange="showstuff(this.value);"', and also changed the option values first letter to uppercase.

JSFiddle: http://jsfiddle.net/ytpfdwyd/

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115232

Use jQuery change() event handler , also remove onchange="showstuff(this.value);"

HTML

<select name="choix" class="form-control">
    <option id="fr" value="Fr">France</option>
    <option id="be" value="Be">Belgique</option>
    <option id="ch" value="Ch">Suisse</option>
  </select>
<div id="FormFr"></div>
<div id="FormBe"></div>
<div id="FormCh"></div>

jQuery

<script>
$(document).ready(function() {
    $("select[name=choix]").change(function() {
        var opt = this.value;  
        $('[id^=Form]').html('');          
        $("#Form" + opt).load("form" + opt + ".html");

    });
});
</script>

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388326

I don't think you need 3 different divs.

so

<select name="choix" class="form-control">
    <option id="fr" value="fr">France</option>
    <option id="be" value="be">Belgique</option>
    <option id="ch" value="ch">Suisse</option>
</select>
<div id="FormPage"></div>

then

jQuery(function ($) {
    var pages = {
        fr: 'formFr.html',
        be: 'formBe.html'
    }
    $('select[name="choix"]').change(function () {
        var value = $(this).vall();
        $('#FormPage').load(pages[value]);
        showstuff(value);
    })
});

function showstuff(element) {
    $('#fr, #be, #ch').each(function () {
        $(this).toggle(this.id == element)
    })
}

Upvotes: 0

Related Questions