仅重新加载<Div>不是整个形式

Reload only <Div> not whole form

本文关键字：gt Div lt 新加载 加载      更新时间：2023-09-26

请看一下这段代码。我只想刷新表单的一部分，而不是整个页面。当前代码正在刷新整个页面。无需查找数据库错误，因为所有条目都在数据库中

<script>
        $(document).ready(function() {
      $('#refbutton').click(function() {
        var val = $('#refinfo').val();
        $.ajax({
          type: 'POST',
          url: 'selectbox.php',
          data: 'val=' + val,
          success: function(html) {
            alert(html);
            window.location.reload();
          }
        });
      });
    });
    </script>

Html代码

    <form>
    <table>
    <tr>
            <td >Name</td>
            <td ><input name="name" type="text" /></td>
        </tr>
        <tr>
            <td>Address</td>
            <td><textarea name="address" ></textarea></td>
        </tr>
<div id="mydiv">
    <tr>
            <td>Reference</td>
            <td>
                <select data-placeholder="Choose a reference..." class="chosen-select" name ="reference1" style="width:350px;" tabindex="2">
                <option value="default">Please Select</option>
                <?php
                $sql="select * from reference ";
                //echo $sql;
                $tbl=mysql_query($sql);
                while($row=mysql_fetch_array($tbl))
                {
                ?>
                <option value="<?php echo $row['reference'];?>"><?php echo $row['reference'];?></option>
                <?php }?>

              </select>
            </td>
            <td>
                <input name="reference2" type="text" id="refinfo" ></input>
            </td>
            <td>
                <input name="Button_ref" id="refbutton" type="button" value="Add Reference"></td>
        </tr>
</div>
    </table>
    </form>

您的HTML无效，因为TR s之间不能有<div id="mydiv">。您为什么要它？如果您想要一个div，则必须将它放在TD中或TABLE之外。我想，您只需要将新选项添加到DB中，将其附加到选择框中，并用返回的html填充<div id="mydiv">。请尝试以下代码。

$(document).ready(function() {
    $('#refbutton').click(function() {
        var val = $('#refinfo').val();
        var $select = $(".chosen-select");
        $.ajax({
            type: 'POST',
            url: 'selectbox.php',
            data: { val: val },
            success: function(html) {
                $("#mydiv").html(html);
                //This would append the new option to the select box without page reload
                $select.append('<option value="' + val + '">' + val + '</option>');
            }
        });
    });
});

这是一个修改HTML的方法。我把<div id="mydiv">放在表格前面了。

希望能有所帮助。

HTML:

<form>
    <table>
    <tr>
            <td >Name</td>
            <td ><input name="name" type="text" /></td>
        </tr>
        <tr>
            <td>Address</td>
            <td><textarea name="address" ></textarea></td>
        </tr>
<div id="mydiv">
    <tr>
            <td>Reference</td>
            <td>
                <div class="my-div">NEW HTML GOES HERE</div>
                <select data-placeholder="Choose a reference..." class="chosen-select" name ="reference1" style="width:350px;" tabindex="2">
                <option value="default">Please Select</option>
                <?php
                $sql="select * from reference ";
                //echo $sql;
                $tbl=mysql_query($sql);
                while($row=mysql_fetch_array($tbl))
                {
                ?>
                <option value="<?php echo $row['reference'];?>"><?php echo $row['reference'];?></option>
                <?php }?>

              </select>
            </td>
            <td>
                <input name="reference2" type="text" id="refinfo" ></input>
            </td>
            <td>
                <input name="Button_ref" id="refbutton" type="button" value="Add Reference"></td>
        </tr>
</div>
    </table>
    </form>

JavaScript:

<script>
        $(document).ready(function() {
      $('#refbutton').click(function() {
        var val = $('#refinfo').val();
        $.ajax({
          type: 'POST',
          url: 'selectbox.php',
          data: 'val=' + val,
          success: function(html) {
            $('.my-div').html(html);
          }
        });
      });
    });
    </script>
相关文章：