JQuery форма не работает - PullRequest
Новая
       3

JQuery форма не работает

0 голосов
/ 24 ноября 2010

Вот код: 

<script type="text/javascript">
    $.ajaxSetup ({
        cache: false
    });

    var ajax_load = "<img src='load.gif' alt='Loading...' />";

    $('#create').submit(function() {
        $("#result").html(ajax_load);
        $.get("actions/create.php", { url: longform },
            function(data){
                $('#result').html(data);
            });
        );
    });
</script>

Но все, что происходит, это то, что URL в адресной строке меняется на: 

http://domain.com/?longform=http://www.google.com/&submit=Submit

Форма и результат div: 

<form name="create" action="" id="create">
    <input type="text" name="longform" /> <input type="submit" name="submit" value="Submit" />
</form>

<div id="result">
results go here
</div>

Нужно ли иметь код ajax в разделе head?Или это не имеет значения ..

ОБНОВЛЕНИЕ :

Код на моей странице теперь выглядит так: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
    $.ajaxSetup ({
        cache: false
    });

    var ajax_load = "<img src='img/load.gif' alt='loading...' />";

    $('#create').submit(function() {
        event.preventDefault();
        $("#result").html(ajax_load);
        $.get("actions/create.php", { url: longform },
            function(data){
                $('#result').html(data);
            });
        );
    });
</script> 
</head> 

<body> 
<form name="create" action="" id="create"> 
    <input type="text" name="longform" /> <input type="submit" name="submit" value="Shorten" /> 
</form> 

<div id="result"> 
123
</div>

По-прежнему не работает.actions / create.php просто выводит строку foobar, чтобы проверить ее.

UPDATE :

Я также пробовал это: 

$('#create').submit(function() {
    var formdata = $(this).serialize();
    $.ajax({
        url:    'actions/create.php',
        data:   formdata,
        success: function(responseText){
                $('#result').html(responseText);
        }
    });
    return false;
});

Но это также не работает .. может ли что-то в моем htaccess возиться с этим?

Ответы [ 4 ]

1 голос
/ 24 ноября 2010

Ваш 

function(data){
    $('#result').html(data);
});

должен быть 

function(data){
    $('#result').html(data);
}

, и вам нужно запретить поведение по умолчанию для действия отправки формы (отправка формы через POST): 

$('#create').submit(function() {
    // ...
    return false;
});

Вы можете (дополнительно) взглянуть на .load() -метод jQuery , который делает именно то, что вы делаете, но короче.Все это будет выглядеть так: 

$('#create').submit(function() {
    $("#result").load("actions/create.php", { url: longform });
    return false;
});
1 голос
/ 24 ноября 2010

Событие submit не происходит вместо отправки, но до его, поэтому ваша форма обычно отправляется после выполнения JavaScript. Вам необходимо отменить обычную отправку, либо вернув false из обработчика события: 

$('#create').submit(function() {
    $("#result").html(ajax_load);
    $.get("actions/create.php", { url: longform },
        function(data){
            $('#result').html(data);
        });
    );
    return false;
});

В качестве альтернативы вы можете позвонить preventDefault. Смотри http://api.jquery.com/event.preventDefault/

0 голосов
/ 24 ноября 2010

Хорошо, это сработало, как только я поместил все jQuery НИЖЕ формы и результатов div ... как утомительно.

0 голосов
/ 24 ноября 2010

удалить атрибут действия из тега формы

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...