通过ajax在单选按钮点击时在div中显示数据

Question

通过ajax在单选按钮点击时在div中显示数据

5

我想在ajax调用中显示用户选择的数据。

场景是我有两个单选按钮，当用户点击其中一个按钮时，它应该在右侧的响应div中显示相应的数据。

HTML代码：

<form id="package-call" method="post" accept-charset="utf-8">
    <div class='pakges'>
        <div class="sub-pakge">
            <div class="sub-pakge-content">
                <span class="content-title">North America</span><br>
                <span class="content-title">Basic</span>
                <div class="content-time">150 Minutes</div>
                <span class="content-price">Rs.500</span>
                <div class="pakges-radio"><input type="radio" name="package" id="package" >    </div>
            </div>
        </div>
        <div class="sub-pakges">
            <div class="sub-pakges-content">
                <span class="content-title">North America</span><br>
                <span class="content-title">Max</span>
                <div class="content-time">400 Minutes</div>
                <span class="content-price">Rs.200</span>
                <div class="pakges-radio"><input type="radio" name="package" id="package">   </div>

            </div>
        </div>
    </div>
</form>

AJAX：

$("#package").click(function(e){ 

    $.ajax( {
        type: "POST",
        url: "package _selection.php",
        data: $('#package_call').serialize(),
        success: function( response ) {}
    });

});

这是我想要显示响应的div：

<div class="form-results">
    <div class="rslt-content-main">
        <div class="rslt-content">Selected Pakages / Bolts</div>
        <div id="package_response"></div>
    </div>
</div>

这些是我想通过从“_selection.php”包中的ajax调用获得并希望分别显示的结果div。

<div class="radio_one_rslt">
    <div>voice:</div><br />
    <div>IDD Asia - Rs 200</div>
</div>

<div class="radio_two_rslt">
    <div>voice:</div><br />
    <div>IDD Asia - Rs 500</div>
</div>

- kwk.stack

2

这是一个很好的开始！不要放弃！ - SeanWM

你在什么时候遇到了问题？ - Cole Pilegard

当我点击收音机时，它没有发送任何调用，因此我无法在此点之后继续前进。 - kwk.stack

3

具有相同 id 的多个元素是一种不良的实践。 - Artyom Neustroev

我不知道如何立即做到这一点，但我可以说你需要一个事件监听器。 - Funk Forty Niner

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cole Pilegard · Accepted Answer

要监听单选按钮，请使用“change”事件

$("#package").on('change', function(e){

然后，在假设你的响应是要追加的HTML的情况下，在成功回调函数中进行追加。

$.ajax( {
  type: "POST",
  url: "package _selection.php",
  data: $('#package_call').serialize(),
  success: function( response ) {
    $('#package_response').append(response);
  }
});

一篇参考博客文章：http://blog.stephenborg.com/?p=37