Как отправить форму без обновление страницы?

Question

fOstere @fOstere

PHP

Как отправить форму без обновление страницы?

Доброе утро, уже все перепробовал, все возможные мануалы перелазил, ну обновляет и все.

Надеюсь на вашу помощь, форма необычная, это не обратная связь, а ркон консоль.

<?php


    require_once("rcon_code.php");
 
# Set Defaults
    

    $OUTPUT = "No Output - Submit a Command";

# GET and SEND Post data

if ($_POST)
{ 
    $IP = $_POST["IP"] = "ip"
    $PORT = $_POST["PORT"] = "port";
    $PASSWORD = $_POST["PASSWORD"] = "pass";
    $COMMAND = $_POST["COMMAND"] = "status";

    $srcds_rcon = new srcds_rcon();
    $OUTPUT = $srcds_rcon->rcon_command($IP, $PORT, $PASSWORD, $COMMAND);
}

# Display Form

print ("<html>
<head>

<link rel='stylesheet' type='text/css' href='style.css'>

</head>
<body><noscript><div class='title'><font color='#FF0000'><b>WARNING!</b></font> Javascript is disabled. Some functions will not operate!</div><br></noscript>
<div class='title'><img src='ruckmanrcon.png'></div><br>
<table class='maintable'>
<tr>
<td class='custom'>
<font class='info'>Login:</font><br><hr>
<form action='rcon.php' method='post' name='CUSTOMCOMMAND'>

</td>
<td rowspan='3' class='txtarea'>
RCON Output:<br><hr><textarea rows='30' cols='110'>$OUTPUT</textarea>
</td></tr>
<tr>
<td class='custom'>
<font class='info'>Custom Command:</font><br><hr>    
<input type='text' name='COMMAND' /><input type='submit' value='Submit'><br>
</form>            
</td>
</tr>        
<tr>
<td class='custom'>
<font class='info'>Common Commands:</font><br><hr><form name='COMMONCOMMANDS'>
<input type='button' value='Server Status' onclick='serverstatus()'>
<input type='button' value='Map List' onclick='maplist()'>
<input type='button' value='Restart' onclick='restart()'>
<br>
<input type='text' name='MAPNAME' value='Map Name'><input type='button' value='Change Map' onclick='changemap()'>
<br>
<input type='text' size='5' name='KICKID' value='ID'><input type='text' name='KICKREASON' value='Reason'><input type='button' value='Kick ID' onclick='kickid()'>
<br>
<input type='text' name='SEARCH' value=''><input type='button' value='CVAR Search' onclick='search()'>    
<br>
<input type='text' name='SAY' value=''><input type='button' value='Say' onclick='say()'>
</form></td>   
</table>

</body>
</html>");
       
?>

Вопрос задан более трёх лет назад
234 просмотра

16 комментариев

Подписаться 1 Простой 16 комментариев

BoShurik @BoShurik

Все ли?

Написано более трёх лет назад
fOstere @fOstere Автор вопроса

BoShurik, Какой вы умный человек.
А не покажите как результат выводит туда же, в textarea???
Ах да, в гугле же такого нет, как вы можете это показать....

Написано более трёх лет назад
BoShurik @BoShurik

fOstere, по первой же ссылке. Но вам же надо разжевать, да в рот положить

Написано более трёх лет назад
Антон @Eridani

А где JS то?

Написано более трёх лет назад
fOstere @fOstere Автор вопроса

Антон, вначале когда в спойлер вставлял, ошибку выбивало и не весь код показывало, из-за этого часть js подключенных сюда не попало.

Щас я специально для разжевывателя сверху сделаю по его первой же ссылке.
Может вы подскажите где я был не прав.

Написано более трёх лет назад

fOstere @fOstere Автор вопроса

Антон, вот собственно. Сделал на быструю руку щас, но не сильно отличается от того что делал ранее, когда в гугл лазил.

spoiler

print ("<html>
<head>
<title>Source RCON by William Ruckman (http://ruckman.net)</title>
<link rel='stylesheet' type='text/css' href='style.css'>

 <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>



<script>
/* Article FructCode.com */
$( document ).ready(function() {
    $('#btn').click(
		function(){
			sendAjaxForm('OUTPUT', 'consoleform', 'consoleform.php');
			return false; 
		}
	);
});
 
function sendAjaxForm(OUTPUT, consoleform, url) {
    $.ajax({
        url:     url, //url страницы (consoleform.php)
        type:     'POST', //метод отправки
        dataType: 'html', //формат данных
        data: $('#'+consoleform).serialize(),  // Сеарилизуем объект
        success: function(response) { //Данные отправлены успешно
        	result = $.parseJSON(response);
        	$('#OUTPUT').html('Имя: '+result.CUSTOMCOMMAND);
    	},
    	error: function(response) { // Данные не отправлены
            $('#OUTPUT').html('Ошибка. Данные не отправлены.');
    	}
 	});
}
</script>

<form method='POST' action='' id='consoleform' name='CUSTOMCOMMAND'>
    <textarea rows='30' cols='110' id='result_form'>$OUTPUT #OUTPUT</textarea>
	<input type='text' name='COMMAND' />
    <input class='consoleform_btn' tabindex='4' type='submit' name='sndbtn' value='Отправить' />
</form>


");
       
?>

Написано более трёх лет назад

Николай @iNickolay

fOstere, вы передаёте данные в элемент с ID `OUTPUT`: $('#OUTPUT').html('Имя: '+result.CUSTOMCOMMAND);, но на странице у вас его нет.
Внимательнее будьте.

Написано более трёх лет назад
fOstere @fOstere Автор вопроса

Николай, Простите)))
Я почему то вначале решил что, это вывод, но потом вспомнил что вывод в консоль уже есть)) но пока это никак не решило проблему перезагрузки и я до сих пор шаманю как могу:)

Написано более трёх лет назад
Николай @iNickolay
fOstere, и опять таки, вы ждёте клик на элементе с ID `btn`: $('#btn').click(..., а у вас, опять таки, его на странице нет)
Ну и в textarea надо писать всё-таки в значение, а не в хтмл:
$('#OUTPUT').value('Имя: ' + result.CUSTOMCOMMAND);
Написано более трёх лет назад

fOstere @fOstere Автор вопроса

Николай, ахахха))) да я дурак)))
Но щас посмотрите пожалуйста, я все это исправил.
уже до этого, щас мучаюсь над тем что, форма работает, команда никуда не уходит, то есть.

ajax

/* Article FructCode.com */
$( document ).ready(function() {
    $("#btn").click(
		function(){
			sendAjaxForm('result_form', 'ajax_form', 'action_ajax_form.php');
			return false; 
		}
	);
});
 
function sendAjaxForm(result_form, ajax_form, url) {
    $.ajax({
        url:     url, //url страницы (action_ajax_form.php)
        type:     "POST", //метод отправки
        dataType: "html", //формат данных
        data: $("#"+ajax_form).serialize(),  // Сеарилизуем объект
        success: function(response) { //Данные отправлены успешно
        	result = $.parseJSON(response);
        	$('#result_form').html('Имя: '+result.CUSTOMCOMMAND);
    	},
    	error: function(response) { // Данные не отправлены
            $('#result_form').html('Ошибка. Данные не отправлены.');
    	}
 	});
}

action_ajax_form.php

<?php

if (isset($_POST["CUSTOMCOMMAND"]) ) { 

	// Формируем массив для JSON ответа
    $result = array(
    	'CUSTOMCOMMAND' => $_POST["CUSTOMCOMMAND"],
    ); 

    // Переводим массив в JSON
    echo json_encode($result); 
}

?>

index.php

<!doctype html>
<html lang='en'>
<head>
  <meta charset='utf-8'>

  <title>Article FRUCTCODE.COM. How to send html-form with Ajax.</title>
  <meta name='description' content='Article FRUCTCODE.COM. How to send ajax form.'>
  <meta name='author' content='fructcode.com'>



</head>

<body>


  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
  <script src='ajax.js'></script>

</head>

<body>
    <form method='post' id='ajax_form' name'CUSTOMCOMMAND' action='/' >
	<textarea rows='30' cols='110'>$OUTPUT</textarea>
	
        <input type='text' name='CUSTOMCOMMAND' placeholder='NAME' />
        <input type='button' id='btn' value='No' /><br>
		
		
		<input type='text' name='COMMAND' />
		<input type='submit' id='btn' value='yes'><br>
    </form>

    <br>

    <div id='result_form'><div> 




</body>
</html>

ТАм 2 кнопки, одна из мануала, type='button' страница не обновляетсяя, но results_form показывает, но команду не отправляет.
А вторая, моя, type='submit' страница вновь обновляется и команда уходит, и в консоль отображается результат

и я что в первый раз загнался и не понял, и щас сижу втыкаю, что не так.
Ибо если меняю submit на button, то кнопка уже не срабатывает и команда не уходит.

Написано более трёх лет назад

Николай @iNickolay
fOstere, что-то у вас какая-то путаница с тегами head & body:
... </head> <body> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script> <script src='ajax.js'></script> </head> <body> ...

Ну и скрипты переместите в самый низ страницы, перед </body>.

И я не понимаю что вы хотите добиться)
Написано более трёх лет назад
fOstere @fOstere Автор вопроса

Николай, это страница ркон консоли, для удаленного управления, и я её пытаюсь поставить на двиг, но при обновлений страница исчезает, (из-за особенности двига) это не баг и не ошибка сразу говорю. Там изначально была простая консоль.
Поэтому хочу поставить свою, ркон, без обновления. ...
и посчитал самым оптимальным, решить проблему с помощью ajax.

Но увы, через submit, ajax работать не хочет.... а решения я пока не нашел.

Только че то еще и умники эти пропали, которые все учить пытаются, поисковиками, когда сами ни**** не умеют, шо за мода пошла, дешевый троллинг поисковиками, и набиванию постов. верните 2010й год.

Это я щас не про вас, Николай.

Написано более трёх лет назад
Николай @iNickolay
fOstere, дак в вашем index.php нет обновления страницы. Если это происходит из-за submit-а формы, то остановите действие по-умолчанию:
... $("#btn").click( function(event){ event.preventDefault(); ...

P.S. У вас у двух элементов одинаковый ID - это грубейшая ошибка: ID у элемента должен быть уникальным.
Написано более трёх лет назад

fOstere @fOstere Автор вопроса

Николай, Не спал, извиняюсь, если где то глупую ошибку совершил:)))

index.php

<?php

# Source RCON by William Ruckman (http://ruckman.net)

    require_once("rcon_code.php");
 
# Set Defaults

    $OUTPUT = "privet";

# GET and SEND Post data

if ($_POST)
{ 
    $IP = $_POST["IP"] = "ip iz bd";
    $PORT = $_POST["PORT"] = "port iz bd";
    $PASSWORD = $_POST["PASSWORD"] = "rcon pass";
    $COMMAND = $_POST["COMMAND"];

    $srcds_rcon = new srcds_rcon();
    $OUTPUT = $srcds_rcon->rcon_command($IP, $PORT, $PASSWORD, $COMMAND);
}

# Display Form

print ("
<!doctype html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
</head>
<body>
    <form method='post' id='ajax_form' name'CUSTOMCOMMAND' action='/' >
	<textarea rows='30' cols='110'>$OUTPUT</textarea>  <br>
		<input type='text' name='COMMAND' />
		<input type='submit' id='btn' value='Отправить'><br>
    </form>

  

    <div id='result_form'><div> 

  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
  <script src='ajax.js'></script>

</body>
</html>
");
       
?>

rcon_code

<?php

    define('PACKET_SIZE', '1400');
    define('SERVERQUERY_INFO', "\xFF\xFF\xFF\xFFTSource Engine Query");
    define ('REPLY_INFO', "\x49");
    define('SERVERQUERY_GETCHALLENGE', "\xFF\xFF\xFF\xFF\x57");
    define ('REPLY_GETCHALLENGE', "\x41");
    define('SERVERDATA_AUTH', 3) ;
    define ('SERVERDATA_EXECCOMMAND', 2) ;
    
    class srcds_rcon
    {
                        
        private function getByte(&$string)
        {
            $data = substr($string, 0, 1);
            $string = substr($string, 1);
            $data = unpack('Cvalue', $data);
            return $data['value'];
        }
    
        private function getShortUnsigned(&$string)
        {
            $data = substr($string, 0, 2);
            $string = substr($string, 2);
            $data = unpack('nvalue', $data);
            return $data['value'];
        }
    
        private function getShortSigned(&$string)
        {
            $data = substr($string, 0, 2);
            $string = substr($string, 2);
            $data = unpack('svalue', $data);
            return $data['value'];
        }
    
        private function getLong(&$string)
        {
            $data = substr($string, 0, 4);
            $string = substr($string, 4);
            $data = unpack('Vvalue', $data);
            return $data['value'];
        }
    
        private function getFloat(&$string)
        {
            $data = substr($string, 0, 4);
            $string = substr($string, 4);
            $array = unpack("fvalue", $data);
            return $array['value'];
        }
    
        private function getString(&$string)
        {
            $data = "";
            $byte = substr($string, 0, 1);
            $string = substr($string, 1);
            while (ord($byte) != "0")
            {
                    $data .= $byte;
                    $byte = substr($string, 0, 1);
                    $string = substr($string, 1);
            }
            return $data;
        }
    
        public function rcon_command($ip, $port, $password, $command)
        {
            $requestId = 1;
            $s2 = '';
            $socket = @fsockopen ('tcp://'.$ip, $port, $errno, $errstr, 30);
            if (!$socket)
                return 'Unable to connect!';
            $data = pack("VV", $requestId, SERVERDATA_AUTH).$password.chr(0).$s2.chr(0);
            $data = pack("V",strlen($data)).$data;        
            fwrite ($socket, $data, strlen($data));
            
            $requestId++ ;
            $junk = fread ($socket, PACKET_SIZE);
            $string = fread ($socket, PACKET_SIZE);
            $size = $this->getLong($string);
            $id = $this->getLong($string) ;
            
            if ($id == -1)
            {
              return 'Authentication Failed!';
            }
            
            $data = pack ("VV", $requestId, SERVERDATA_EXECCOMMAND).$command.chr(0).$s2.chr(0) ;
            $data = pack ("V", strlen ($data)).$data ;
            fwrite ($socket, $data, strlen($data)) ;
            $requestId++ ;
            $i = 0 ;
            $text = '' ;
            
            while ($string = fread($socket, 4))
            {
              $info[$i]['size'] = $this->getLong($string) ;
              $string = fread($socket, $info[$i]['size']) ;
              $info[$i]['id'] = $this->getLong ($string) ;
              $info[$i]['type'] = $this->getLong ($string) ;
              $info[$i]['s1'] = $this->getString ($string) ;
              $info[$i]['s2'] = $this->getString ($string) ;
              $text .= $info[$i]['s1'];
              $i++ ;
              return $text;
            }    
        }                
    }

?>

action_ajax_form

<?php

if (isset($_POST["CUSTOMCOMMAND"]) ) { 

	// Формируем массив для JSON ответа
    $result = array(
    	'CUSTOMCOMMAND' => $_POST["COMMAND"],
    ); 

    // Переводим массив в JSON
    echo json_encode($result); 
}

?>

ajax

/* Article FructCode.com */
$( document ).ready(function() {
    $("#btn").click(
		function(){
			sendAjaxForm('result_form', 'ajax_form', 'action_ajax_form.php');
			return false; 
	$("#btn").click(
		function(event){
		event.preventDefault();
		}
	);
});
 
function sendAjaxForm(result_form, ajax_form, url) {
    $.ajax({
        url:     url, //url страницы (action_ajax_form.php)
        type:     "POST", //метод отправки
        dataType: "html", //формат данных
        data: $("#"+ajax_form).serialize(),  // Сеарилизуем объект
        success: function(response) { //Данные отправлены успешно
        	result = $.parseJSON(response);
        	$('#result_form').html('Имя: '+result.CUSTOMCOMMAND);
    	},
    	error: function(response) { // Данные не отправлены
            $('#result_form').html('Ошибка. Данные не отправлены.');
    	}
 	});
}

Добавил rcon_code для ознакомления и полноты всей функций, вдруг нужна будет кому. или вам.

Я ответ ваш увидел сразу, и пошел тестить, попыток 30 наверное сделал, прежде чем щас написал, я уже волосы готов на себе рвать, ибо не знаю что и делать.

ЗА обработчик возможно да, сглупил, и он неверный, а нужно ту вставлять которая берет ип порт и пароль, это я на скорую руку вставил, чтоб просто было и посмотреть обновится страница или нет.

И даже сейчас обновляется..... кому из богов я так насолил :DDD

Написано более трёх лет назад

Николай @iNickolay

fOstere, правильно. Вы написали какую-то дичь :D

Вот как надо:

$( document ).ready(function() {
    $("#btn").click(function(event) {
      event.preventDefault();
      sendAjaxForm('result_form', 'ajax_form', 'action_ajax_form.php'); 
    });
});

Написано более трёх лет назад

fOstere @fOstere Автор вопроса

Николай, Спасибо:))))

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

4 комментария

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как понять разночтения аналогичных скриптов, зарегистрированных в Wordpress?
- 1 подписчик
- 4 часа назад
- 36 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Почему FullCalendar не правильно отображает диапазоны событий (в клиентской части)?
- 1 подписчик
- 4 часа назад
- 42 просмотра
1

ответ
PHP

+1 ещё

Простой
Что не так с параметром — password = root?
- 3 подписчика
- 02 мар.
- 1385 просмотров
1

ответ
PHP

Простой
Какой параметр php модуля отключает тему формы с сайта?
- нет подписчиков
- 27 февр.
- 203 просмотра
3

ответа
PHP

Средний
При входе в аккаунт, всегда пишет Заполните все поля, кто-то нашел ошибку почему так происходит?
- 1 подписчик
- 25 февр.
- 202 просмотра
1

ответ
PHP

+1 ещё

Простой
Нужно составить запрос если?
- 1 подписчик
- 25 февр.
- 383 просмотра
1

ответ
PHP

+3 ещё

Простой
Почему при копировании контейнера с php — перестает работать php?
- 2 подписчика
- 21 февр.
- 760 просмотров
2

ответа
PHP

+1 ещё

Средний
Как в PHPWord создать условие вывода текста?
- 1 подписчик
- 21 февр.
- 134 просмотра
1

ответ
PHP

+1 ещё

Простой
Как решить проблему с сессиями?
- 1 подписчик
- 21 февр.
- 948 просмотров
2

ответа
PHP

Простой
Авторизация PHP. Как исправить Warning: Undefined array key «login» in?
- 1 подписчик
- 20 февр.
- 184 просмотра
2

ответа
Показать ещё Загружается…

Middle PHP-developer / PHP-разработчик

Wanted.

До 250 000 ₽

PHP-разработчик

Decart IT-production

от 260 000 до 340 000 ₽

Backend-разработчик PHP

Wanted. • Москва

До 160 000 ₽

BoShurik, Какой вы умный человек.
А не покажите как результат выводит туда же, в textarea???
Ах да, в гугле же такого нет, как вы можете это показать....
fOstere, по первой же ссылке. Но вам же надо разжевать, да в рот положить
Антон, вначале когда в спойлер вставлял, ошибку выбивало и не весь код показывало, из-за этого часть js подключенных сюда не попало.

Щас я специально для разжевывателя сверху сделаю по его первой же ссылке.
Может вы подскажите где я был не прав.
Антон, вот собственно. Сделал на быструю руку щас, но не сильно отличается от того что делал ранее, когда в гугл лазил.
spoiler
print ("<html> <head> <title>Source RCON by William Ruckman (http://ruckman.net)</title> <link rel='stylesheet' type='text/css' href='style.css'> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script> <script> /* Article FructCode.com */ $( document ).ready(function() { $('#btn').click( function(){ sendAjaxForm('OUTPUT', 'consoleform', 'consoleform.php'); return false; } ); }); function sendAjaxForm(OUTPUT, consoleform, url) { $.ajax({ url: url, //url страницы (consoleform.php) type: 'POST', //метод отправки dataType: 'html', //формат данных data: $('#'+consoleform).serialize(), // Сеарилизуем объект success: function(response) { //Данные отправлены успешно result = $.parseJSON(response); $('#OUTPUT').html('Имя: '+result.CUSTOMCOMMAND); }, error: function(response) { // Данные не отправлены $('#OUTPUT').html('Ошибка. Данные не отправлены.'); } }); } </script> <form method='POST' action='' id='consoleform' name='CUSTOMCOMMAND'> <textarea rows='30' cols='110' id='result_form'>$OUTPUT #OUTPUT</textarea> <input type='text' name='COMMAND' /> <input class='consoleform_btn' tabindex='4' type='submit' name='sndbtn' value='Отправить' /> </form> "); ?>
fOstere, вы передаёте данные в элемент с ID `OUTPUT`: $('#OUTPUT').html('Имя: '+result.CUSTOMCOMMAND);, но на странице у вас его нет.
Внимательнее будьте.
Николай, Простите)))
Я почему то вначале решил что, это вывод, но потом вспомнил что вывод в консоль уже есть)) но пока это никак не решило проблему перезагрузки и я до сих пор шаманю как могу:)
fOstere, и опять таки, вы ждёте клик на элементе с ID `btn`: $('#btn').click(..., а у вас, опять таки, его на странице нет)
Ну и в textarea надо писать всё-таки в значение, а не в хтмл:
$('#OUTPUT').value('Имя: ' + result.CUSTOMCOMMAND);
fOstere, что-то у вас какая-то путаница с тегами head & body:
... </head> <body> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script> <script src='ajax.js'></script> </head> <body> ...

Ну и скрипты переместите в самый низ страницы, перед </body>.

И я не понимаю что вы хотите добиться)
Николай, это страница ркон консоли, для удаленного управления, и я её пытаюсь поставить на двиг, но при обновлений страница исчезает, (из-за особенности двига) это не баг и не ошибка сразу говорю. Там изначально была простая консоль.
Поэтому хочу поставить свою, ркон, без обновления. ...
и посчитал самым оптимальным, решить проблему с помощью ajax.

Но увы, через submit, ajax работать не хочет.... а решения я пока не нашел.

Только че то еще и умники эти пропали, которые все учить пытаются, поисковиками, когда сами ни**** не умеют, шо за мода пошла, дешевый троллинг поисковиками, и набиванию постов. верните 2010й год.

Это я щас не про вас, Николай.
fOstere, дак в вашем index.php нет обновления страницы. Если это происходит из-за submit-а формы, то остановите действие по-умолчанию:
... $("#btn").click( function(event){ event.preventDefault(); ...

P.S. У вас у двух элементов одинаковый ID - это грубейшая ошибка: ID у элемента должен быть уникальным.
fOstere, правильно. Вы написали какую-то дичь :D

Вот как надо:
$( document ).ready(function() { $("#btn").click(function(event) { event.preventDefault(); sendAjaxForm('result_form', 'ajax_form', 'action_ajax_form.php'); }); });

Answer 1 · 2018-07-06 12:31:30

Дмитрий @php10

Разработчик на PHP

Одно слово - AJAX.

Ответ написан более трёх лет назад

4 комментария

Как отправить форму без обновление страницы?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт