Question

我有一个带有一个文本框的表单，该文本框是div标记的一部分。我希望它根据php GET请求中文本框的内容将该div标签的内容更改为另一个页面。

例如，如果你在文本框中键入地狱，它会将goto.php？location = hell加载到div中。

到目前为止，这是我下面的代码，由于这是我第一次使用jquery吸尘器而不是真空吸尘器。

<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>

目前而不是更新div的内容，它会在浏览器中重新加载整个页面，然后将其附加到？submit = New + City

更新这就是我现在所拥有的，它仍在使用附加的整页刷新？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>

Answer 1

您已经创建了这样的表单：

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

但是选择器只匹配id为goto的元素。所以它应该是：

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

你也犯了一个错误：

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

应该是：

$('#city').val()

另一件事：

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

应该是：

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

而不是执行e.stopPropagation();，而应该在函数结束时执行return false;。

来自表单的新URL的JQuery Refresh DIV

1 个答案: