CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
user8585307
user8585307

Reputation: 35

radio button to show different form depending on a choice inside a form

I don't know if i missed some small error or what but can't get it to work.

I have a form which will send data to email_to_us.php. Inside the form I have two radio buttons. They are inside this form becouse this is a mandatory data which is also send to us. Now I want to change a form depending on what a user chooses. So far I have this:

HTML:

<form action="email_to_us.php" method="post">
    <span class="link_title">Prijavljam se na tečaj:</span><br><br>

    <select name="prijava_na_datum" required>
        <option value="" selected="selected">Izberi datum</option>;
        <?php 
        $con = mysqli_connect('localhost','root','','viverius_education');
        if (!$con) {
            die('Could not connect: ' . mysqli_error($con));
        }
        $sql = mysqli_query($con, "SELECT ID_TECAJA, DATUM FROM razpisani_tecaji WHERE STATUS ='odprt' AND ST_ODPRTIH_MEST>0");
        while ($row = $sql->fetch_assoc()){
            echo "<option value='" . $row['ID_TECAJA'] . "'>" . $row['DATUM'] . "</option>";
        }
        ?>
    </select>

    <br>

    <input type="radio" id="radio1" name="status_osebe" value="fizicna" required> Fizična oseba   
    <input type="radio" id="radio2" name="status_osebe" value="pravna"> Pravna oseba<br><br>
    <form method ="post" id="fizicna_oseba">
        <input class="span7" type="text" name="ime" value="" placeholder="Ime" required/>
        <input class="span7" type="text" name="priimek" value="" placeholder="Priimek" required />
        <input class="span7" type="email" name="email" value="" placeholder="Email" required/>
        <input class="span7" type="text" name="telefon" value="" placeholder="Telefonska številka (podatek ni obvezen)"/><br>
        Vaša izobrazba/status<br>
        <select  name="izobrazba" required>
            <option></option>
            <option value="student">Študent</option>
            <option value="pripravnik">Pripravnik</option>
            <option value="specializant">Specializant</option>
            <option value="specialist">Specialist</option>
        </select>
        <input class="span7" type="text" name="kraj" value="" placeholder="Ustanova/kraj (podatek ni obvezen)"/><br>
    </form>
    <form method ="post" id="podjetje">
        <input class="span7" type="text" name="ime" value="" placeholder="Ime" required/>
        <input class="span7" type="text" name="priimek" value="" placeholder="Priimek" required />
        <input class="span7" type="email" name="email" value="" placeholder="Email" required/>
        <input class="span7" type="text" name="telefon" value="" placeholder="Telefonska številka (podatek ni obvezen)"/><br>
        Izberite koliko oseb želite prijaviti na tečaj? Odprla se vam bodo dodatna okna kjer prosimo, da izpolnete podatke o udeležencih.<br>
        <input type="radio" id="radio01" name="st_oseb" value="fizicna" required>1   
        <input type="radio" id="radio02" name="st_oseb" value="pravna">2
        <input type="radio" id="radio03" name="st_oseb" value="fizicna" required>3  
        <input type="radio" id="radio04" name="st_oseb" value="pravna">4
        <input type="radio" id="radio05" name="st_oseb" value="pravna">5<br><br>
        Vaša izobrazba/status<br>
        <select  name="izobrazba" required>
            <option></option>
            <option value="student">Študent</option>
            <option value="pripravnik">Pripravnik</option>
            <option value="specializant">Specializant</option>
            <option value="specialist">Specialist</option>
        </select>
        <input class="span7" type="text" name="kraj" value="" placeholder="Ustanova/kraj (podatek ni obvezen)"/><br>
    </form>

    <input type="checkbox" name="register" value="register"> Ob prijavi me tudi registriraj!
    <a href="#">Kaj pridobim z registracijo?</a><br><br>
    <input type="submit" class="btn send_btn" value="Pošlji" />
    <div class="clear"></div><br>
</form>

JavaSript:

<script type="text/javascript"> 
$('#radio1').change(function() {
    if(this.checked) {
        $('#fizicna_oseba').show();
        $('#podjetje').hide();
    }
});
$('#radio2').change(function() {
    if(this.checked) {
        $('#podjetje').show();
        $('#fizicna_oseba').hide();
    }
});
</script>

Upvotes: 2

Views: 62

Answers (1)

Yogesh
Yogesh

Reputation: 685

A simpler and cleaner way would be to use with class name

<input ... class="rButton">
<input ... class="rButton">

Script

​$( ".rButton" ).change(function() {
    switch($(this).val()) {
        case 'fizician_ca' :
            // do something on this value
            break;
        case 'etc' :
            // do something with this value
            break;
    }            
});​

Upvotes: 1

Related Questions