нужна помощь в отправке этой формы с помощью jquery… Она отправляется, но весь браузер обновляется

#jquery

#jquery

Вопрос:

  $idc = $_GET['id'];
    $name1 = $_GET['name'];
    $id2 = $_GET['ids'];
     if ($_POST['message_field'] != ""){
        $message_field = $_POST['message_field'];

          $sql = mysql_query("INSERT INTO comment (mem_id,commented_men_id, message, message_date) 
         VALUES('$userid','$idc','$message_field', now())")  
         or die (mysql_error());

    }

        $sql_message = mysql_query("SELECT id, mem_id ,message, message_date FROM comment WHERE mem_id='$userid'  ORDER BY message_date DESC");

        while($row = mysql_fetch_array($sql_message)){


            $id = $row["id"];
            $me_id = $row["mem_id"];
            $json = $row["message"];
                 $message_date = $row["message_date"];
                $message = json_encode($json);

 $sql_mem_data = mysql_query("SELECT id, name FROM users WHERE  id='$me_id'");
              while($row2 = mysql_fetch_array($sql_mem_data)){
                $id = $row2["id"];
                $ufirstname = $row2["name"];
        }

    $messageList .= '<div id="only"><p>' . ufirstname . '</p><br/><p    id="pmessage">'.$the_message.'</p></div>';

    }

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> Book</title>
    <link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>
    <script type="text/javascript" src="mootools-core-1.3.2-full-compat.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

       $("#messageinput").click(function() {
           $.post($('#message').attr("action"),
                  $("#message").serialize(),
                  function(html) {
                    var comment = $(html) .find('#messageoutput').html();
                      $("#pmessage").html(comment);
              });
   });
       });

    </script>
         <div id="messageid">
             <form align="left" id="message" action="<?php profile.php?id='.$idc.'amp; ids='.    $id2.'amp;name='.$name1.'?>" method="post" enctype="multipart/form-data" name="blab_from">
        <textarea name="message_field" rows="3" style="width:97%;"></textarea>
         <input id="messageinput" name="submit" type="button" value="submit" align="left" />
        </form>
        </div>
        <div id="messageoutput"><?php print "$messageList"; ?></div>
  

Комментарии:

1. это не совсем обычная отправка, но обновление браузера, я просто хочу отправить комментарий без обновления у вас есть какой-либо ввод или скрипт, который это делает?

2. Вы когда-нибудь видели это с помощью плагина form? — Error: Form elements must not have name or id of "submit".

Ответ №1:

Вы можете сделать это следующим образом… Предположим, что это ваш html

 <form align="left" id="form1" action="" method="post"   enctype="multipart/form-data" name="message_from">
<textarea id="message_field" name="message_field" rows="3" style="width:97%;"></textarea>
<input id="messageinput" name="submit" type="button" value="Submit" align="left" />
</form>
<div id="result"></div>
  

Затем следующий код отправит данные формы и вернет результат обратно в переменную ‘data’. Затем вы можете делать с возвращаемыми данными все, что захотите. Как и в примере, я помещаю возвращенные данные в div с id =»результат».

 $(document).ready(function(){
    $("#messageinput").click(function(){
        $.post('html.php',$("#form1").serialize(),function(data){
            $("#result").html(data);
        });

    });
});
  

Решение для вашего измененного скрипта

 <?php
//engine.php
//for convinence sake split the php and html into 2 files say php is in engine.php and html in profile.php
//why are you using amp;name and amp;ids for? my best guess is u need only amp;id and amp;message_field if its a msg post

//this file will do 2 things when id is passed return the comments and when id and message is passed insert the comment into db fetch it again and pass it.
//the html manipulation will be done by jQuery/javascript only you dont need php for that

//  $idc = $_GET['id'];
//  $name1 = $_GET['name'];
//  $id2 = $_GET['ids'];

    $idc = $_POST['id'];//[we are using post so use _POST methods]


    if ($_POST['message_field'] != "")
    {
        //here you are missing connection statements like mysql_connect() and mysql_select_db()
        $message_field = $_POST['message_field'];
        $sql = mysql_query("INSERT INTO comment (mem_id,commented_men_id, message, message_date)VALUES('$userid','$idc','$message_field', now())") or die (mysql_error());  
    }

    $sql_message = mysql_query("SELECT id, mem_id ,message, message_date FROM comment WHERE mem_id='$userid'  ORDER BY message_date DESC");

    $i = 0;
    $messageList = '<div id="result">';
    while($row = mysql_fetch_array($sql_message))
    {
        $j=$i  ;
        $id = $row["id"];
        $me_id = $row["mem_id"];        
        $message_date = $row["message_date"];
        //$json = $row["message"];
        //$message = json_encode($json);
        $message = $row["message"]; //disabling json for now

        $sql_mem_data = mysql_query("SELECT id, name FROM users WHERE  id='$me_id'");

        while($row2 = mysql_fetch_array($sql_mem_data))
        {
            $id = $row2["id"];
            $ufirstname = $row2["name"];
        }
        //$messageList .= '<div id="only"><p>' . ufirstname . '</p><br/><p    id="pmessage">'.$the_message.'</p></div>'; //[error 1] ur writting this outside while loop also id="only" multiple times will create error same with id="pmessage"
        /*[error 1] rectification*/ $messageList .= '<div id="row_'.$j.'"><p id="uname_'.$j.'">'.$ufirstname.'</p><br/><p id="msg_'.$j.'">'.$message.'</p></div>';
    }
    $messageList .= '</div>'; //making id="result" parent of all the rows
    echo $messageList; //script has to echo for jQuery to catch it.
?>
<!--This file is profile.php(assumption)-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Book</title>
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="mootools-core-1.3.2-full-compat.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*i still didn't get why you use $id2 and amp;name2 but the above php block is used to only fetch data which is passed by the javascript
so you need 2 events first when the page is loaded and 2nd when the page is posted with a new comment
*/
(function($)
{
    $.getParam = function(key)
    {
        var urlParams = decodeURI( window.location.search.substring(1) );
        if(urlParams == false | urlParams == '') return null;
        var pairs = urlParams.split("amp;");

        var keyValue_Collection = {};
        for(var value in pairs)
        {
            var equalsignPosition = pairs[value].indexOf("=");
            if (equalsignPosition == -1) 
                keyValue_Collection[ pairs[value] ] = ''; 
            else
                keyValue_Collection[ pairs[value].substring(0, equalsignPosition) ] = pairs[value].substr(equalsignPosition   1);
        }
        return keyValue_Collection[key];
    }
})
(jQuery);

//fetch the id to get the messages
var id = $.getParam("id");

//if its a click
$("#messageinput").live('click',function(){
    var msg = $("#message_field").val();
    var qstring='id=' id 'amp;message_field='  msg;
    $.post('engine.php',qstring,function(data){
        $("#messageoutput").html(data);//bind the whole data to messageoutput div as its already formatted for right html
    });
});

//else load default messages
var qstring = 'id=' id;
$.post('engine.php',qstring,function(){
    $("#messageoutput").html(data);//in this php script will return only the messages for the passed id.
});

});
</script>
<div id="messageid">
    <form align="left" id="message" action="" method="post" enctype="multipart/form-data" name="blab_from">
    <textarea id="message_field" name="message_field" rows="3" style="width:97%;"></textarea>
    <input id="messageinput" name="submit" type="button" value="submit" align="left" />
    </form>
</div>
<!--<div id="messageoutput"><?php/* print "$messageList"; */?></div>--> <!--This is not needed when u do it by AJAX simply put an empty div for results-->
<div id="messageoutput"></div>
  

Комментарии:

1. это работает, но в действии у меня есть некоторые глобальные переменные php, которые я использую, и теперь я не знаю, как поместить это в post? Я поместил только html.php вернет всю страницу внутри сообщения lol, мне нужен html.php?id=’.$idc.’amp;ids=’. $id2.’amp;name=’.$name1.’ могу ли я поместить эту строку внутри jquery? и он ее вызовет?

2. Вы можете отфильтровать возвращаемые данные с помощью следующего кода var mydata = $(данные). filter(‘#requireddata’); где ‘requireddata’ — это селектор, возвращающий u данные. И предположим, вы хотите поместить возвращаемые данные в результат, тогда $(«#result»).html(mydata);

3. если вы хотите поместить дополнительные данные, то $.post выглядит следующим образом $.post(‘html.php ‘,’id=’.$idc.’amp;ids=’. $id2.’amp;name=’.$name1.’,функция (данные){//другой код} короче говоря, второй аргумент создает то, что вы отправляете в строке запроса. не указывайте название страницы во 2-м аргументе, а переменные в 1-м аргументе

4. Я еще не нашел решения lonewolf, каким-то образом переменные не передаются, и форма не отправляет комментарии в таблице.

5. @fello можешь показать мне свой код? Я не вижу здесь никаких сложностей, вы, должно быть, делаете что-то не так.

Ответ №2:

Используйте type="button" вместо type="submit" тега in input. Потому что кнопка отправки отправит форму и обновит страницу.

Комментарии:

1. с существующим кодом jquery выше и измененным на type =»button» форма теперь вообще не будет вставляться. Что бы это могло быть?

2. я не вижу тега start script, который должен быть расположен выше $(document).ready . ошибка опечатки?

3. эй, карти, у меня это есть в исходном документе, извините за опечатку.

4. эй, карти, возможно, это вставка, но она не возвращается на сайт, как тип ajax, где он обновит только комментарий. без необходимости повторно обновлять весь сайт

5. @fello, измените идентификатор формы на form1 или любой другой, кроме ‘form’, и попробуйте ввести тип отправки / button.

Ответ №3:

я думаю, вы не сможете отправить форму, не обновив страницу, используя type =»submit». вместо этого используйте type="submit" используйте type="button"

Комментарии:

1. с существующим кодом jquery выше и измененным на type =»button» форма теперь вообще не будет вставляться. Что бы это могло быть?

2. да, вы должны отправить запрос с помощью $.post или $.ajax в вашей функции $ (‘.button’).click . это отличается от отправки

3. Если вы измените отправку на кнопку, то все пользователи с отключенным JavaScript не получат функциональность вашей формы.

Ответ №4:

Используйте событие отправки в форме, а не щелчок.

 $('#submit).submit(function() {
  alert('Handler for .submit() called.');
  return false;
});