Форум

Elect · #1 (**permalink**) 12.09.2015, 12:49

В общем есть код,все данные на сервер от отправляет,но обновляет страницу,что мне вообще не нужно(по нажатию Enter)
Помогите пожалуйста

<html>
	<head>
		<title>{title}</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<link rel="stylesheet" href="{root}style.css" />
	</head>
	<body>
        <script type="text/javascript">
        
        </script>
        {error}
        <div class="left-sidebar">
            {avatar}
            {add_to_f}
            {settings}<br>
            <ul class="left_menu">
            <a href="/id/"><li>Моя страница</li></a>
            <a href="/friends/"><li>Мои друзья {notification}</li></a>
            </ul>
        </div>
        <div class="content-block">
            <div class="content-block-content" style="padding:20px;">
            <h2>{fname} {lname}</h2><div id="changestatusf"><button  id="changestatus" onclick="{status_r}">{status}</button></div>
            <form method="" name="osForm" action="" id="osForm">
                <input class="osForm_input" tabindex="1" id="name" name="name" type="text" value="*Ваше имя" />
                <input class="osForm_input" tabindex="2" id="email" name="email" type="text" value="*Ваш email" />
                <input class="osForm_input" tabindex="3" id="address" name="address" type="text" value="*Адрес доставки (индекс,область,город,улица,дом,квартира)" />
                <input class="osForm_btn" tabindex="4" type="submit" name="sndbtn" value="Отправить" />
            </form>
            <hr>
            Обо мне:{info}
            {friends_block}
            <div class="wall">
                <form class="send_wall" method="POST">
                    <textarea class="wall_send" rows="3" name="wall_send" placeholder="Написать на доске..."></textarea><input class="submitsw" type="submit" name="submitsw" value="">
                </form>
                {wall}
            </div>
            </div>
        </div>
        <script>  
            function changestatus(){
                var changestatusf = document.getElementById('changestatusf');
                changestatusf.innerHTML = "<form onsubmit='SendComment(event)'  method='POST' action='' id='changes'><input type='text' name='changestatus' value='{status}'></form>";
            }
            
            function SendComment(e) {
                e = e || window.event;
                if (e.keyCode == 13) {
                    $('#changes').submit(function(e){
                        e.preventDefault();
                        $.ajax({
                          url: "/id/",
                          type: "POST",
                          data: $('#changes').serialize(),
                          success: function(response) {
                            //обработка успешной отправки
                          },
                          error: function(response) {
                            //обработка ошибок при отправке
                         }
                        });
                    });
                    
                };
            };
            
        </script>
	</body>
</html>

sanmihan · #2 (**permalink**) 12.09.2015, 16:17

К прочтению

<script> 
	function changestatus(){
		var changestatusf = document.getElementById('changestatusf');
		changestatusf.innerHTML = "<form onsubmit='return SendComment(event)'  method='POST' action='' id='changes'><input type='text' name='changestatus' value='{status}'></form>";
	}

	function SendComment(e) {
		e = e || window.event;
		e.preventDefault();
		$.ajax({
			url: "/id/",
			type: "POST",
			data: $('#changes').serialize(),
			success: function(response) {
			//обработка успешной отправки
			},
			error: function(response) {
			//обработка ошибок при отправке
			}
		});
		
		return false
	};
</script>

Elect · #3 (**permalink**) 12.09.2015, 16:35

Сообщение от sanmihan

К прочтению

<script> 
	function changestatus(){
		var changestatusf = document.getElementById('changestatusf');
		changestatusf.innerHTML = "<form onsubmit='return SendComment(event)'  method='POST' action='' id='changes'><input type='text' name='changestatus' value='{status}'></form>";
	}

	function SendComment(e) {
		e = e || window.event;
		e.preventDefault();
		$.ajax({
			url: "/id/",
			type: "POST",
			data: $('#changes').serialize(),
			success: function(response) {
			//обработка успешной отправки
			},
			error: function(response) {
			//обработка ошибок при отправке
			}
		});
		
		return false
	};
</script>

Так у меня перестало работать отправка по нажатию enter

sanmihan · #4 (**permalink**) 12.09.2015, 19:13

Сообщение от Elect

Так у меня перестало работать отправка по нажатию enter

А как ты проверил? не попадает в функцию SendComment? или success не выполнился?

Elect · #5 (**permalink**) 15.09.2015, 10:28

Сообщение от sanmihan

А как ты проверил? не попадает в функцию SendComment? или success не выполнился?

SendComment не вызвался,alertom проверил

sanmihan · #6 (**permalink**) 15.09.2015, 11:30

<html>
<head>
<title>{title}</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="changestatusf">
<button  id="changestatus" onclick="changestatus()">Изменить</button>

</div>
<script>
    function changestatus(){
        var changestatusf = document.getElementById('changestatusf');
        changestatusf.innerHTML = "<form onsubmit='return SendComment(event)'  method='POST' action='' id='changes'><input type='text' name='changestatus' value='статус'></form>";
    }
 
    function SendComment(e) {
        e = e || window.event;
        e.preventDefault();
	alert("сабмит");
        $.ajax({
            url: "/id/",
            type: "POST",
            data: $('#changes').serialize(),
            success: function(response) {
              alert("Успех")
            },
            error: function(response) {
              alert("Ошибка")
            }
        });
         
        return false
    };
</script>
</body>
</html>

Может быть мы про разные формы говорим, у тебя на странице много разных форм.

Elect · #7 (**permalink**) 15.09.2015, 15:14

Сообщение от sanmihan

<html>
<head>
<title>{title}</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="changestatusf">
<button  id="changestatus" onclick="changestatus()">Изменить</button>

</div>
<script>
    function changestatus(){
        var changestatusf = document.getElementById('changestatusf');
        changestatusf.innerHTML = "<form onsubmit='return SendComment(event)'  method='POST' action='' id='changes'><input type='text' name='changestatus' value='статус'></form>";
    }
 
    function SendComment(e) {
        e = e || window.event;
        e.preventDefault();
	alert("сабмит");
        $.ajax({
            url: "/id/",
            type: "POST",
            data: $('#changes').serialize(),
            success: function(response) {
              alert("Успех")
            },
            error: function(response) {
              alert("Ошибка")
            }
        });
         
        return false
    };
</script>
</body>
</html>

Может быть мы про разные формы говорим, у тебя на странице много разных форм.

Я имею ввиду первую,это смена статуса,По нажатию она становится полем и по нажатию enter должен отправится запрос и измениться сам статус,не обновляя страницу.

Elect · #8 (**permalink**) 15.09.2015, 15:17

Это работает,но сам статус не изменился.

Deff · #9 (**permalink**) 16.09.2015, 04:14

Elect,

Сообщение от Elect

Это работает,но сам статус не изменился.

Чтобы статус изменился, нун считать его в ответе на отправку формы и подставить скриптом новое значение на текущую страницу (А не только фиксировать "Успех", но и считывать данные
Старая страница, со старым стусом не обладает экстрасенсорикой

Форум

Справочник

Discord чат

Курсы javascript