单选按钮,根据表单内的选择显示不同的表单

时间:2017-09-10 07:57:26

标签: javascript php jquery html forms

我不知道我是否错过了一些小错误或什么但是无法让它发挥作用。

我有一个表格会将数据发送到email_to_us.php。在表格里面我有两个单选按钮。他们在这个表格内,因为这是一个强制性数据,也发送给我们。现在我想根据用户选择的内容更改表单。到目前为止,我有这个:

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>

1 个答案:

答案 0 :(得分:1)

更简单,更清洁的方法是使用类名

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

脚本

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