douzai8285 2012-02-01 19:41
浏览 29
已采纳

来自表单的新URL的JQuery Refresh DIV

I have a form with one text box that is part of a div tag. I want it to change the contents of that div tag to another page based on the contents of a textbox in a php GET request.

for example if you type hell into the textbox it will load goto.php?location=hell into the div.

so far this is the code i have below, and due to it being my first time with jquery sucks more than a hoover vacuum cleaner.

<div id="city"></div>
<form name="goto" action="/"> 
<input type="text" id="city">
 <input type="submit" name="submit" class="button" id="submit_btn" value="New City" /> 
</form>
<script>
  /* attach a submit handler to the form */
  $("#goto").submit(function(event) {

    /* stop form from submitting normally */
    event.preventDefault(); 

    /* get some values from elements on the page: */
    var $form = $( this ),
        city = $form.find( 'input[name="city"]' ).val(),

    /* Send the data using post and put the results in a div */
    $('currentwxdiv').load('http://www.jquerynoob.bomb/hell.php?location=' + city);

  });
</script>

Currently instead up updating the contents of the div it reloads the entire page in the browser and then appends it with ?submit=New+City

UPDATE This is what I have now and its still doing the full page refresh with the appended ?submit=New+City

<script>
  /* attach a submit handler to the form */
  $$('form[name="changewx"]').submit(function(event) {

    /* stop form from submitting normally */
    event.preventDefault(); 

    /* get some values from elements on the page: */
    var $form = $( this ),
        city = $('#city').val()

    /* Send the data using post and put the results in a div */
    $('#currentwxdiv').load('http://api.mesodiscussion.com/?location=' + city);

  });
</script>
  • 写回答

1条回答 默认 最新

  • douchi5822 2012-02-01 19:47
    关注

    You have created your form like this:

    <form name="goto" action="/"> 
    

    But the selector only matches the element with an id goto. So it should be:

    $('form[name="goto"]').submit(function(event) {
    

    You also made a mistake the other way around:

    $form.find( 'input[name="city"]' ).val()
    

    Should be:

    $('#city').val()
    

    Another thing:

    $('currentwxdiv') // this matches a tag called currentwxdiv
    

    Should be:

    $('.currentwxdiv') // for element with class currentwxdiv, or $('#currentwxdiv') to match based on id
    

    And instead of doing e.stopPropagation(); you should do return false; at the end of the function.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题