I want to get the data from the form without updating the page.

The form:

<form id="myform" action="#" method="POST" enctype="multipart/form-data"> Персонаж <select id="pers" name="personaj"> <option value="бэтмен">Бэтмен</option> <option value="супер-мен">Супер мен</option> </select> <span id="contentST">Персонаж:</span> <input id="link" type="button" name="calc" value="Выбрать" /> </form>

ajax:

 $(document).ready(function(){ $("#link").click(function(){ $.ajax({ url: "1.php", type: "GET", dataType: "html", success: function(response){ $("#contentST").html(response); } }); }); });

Code 1.php:

 echo '<span id="contentST">Выбранный персонаж: '.$_POST['personaj'].'</span>';

It turns out when you press the button without refreshing the page, the word Персонаж is replaced with the Выбранный персонаж but it does not display the selected character, that is, the $_POST['personaj'] code does not work.

I would be grateful for the help.

  • and where is the body of the request transmitted? - NumminorihSF
  • @NumminorihSF is the entire form code. Apparently something is missing from me - iKey
  • You send ajax using the GET method and catch it at $ _POST? - Visman
  • + Who will send data for you in ajax? Do you think the script knows where to get the data for the request? - Visman
  • changed to POST, but still does not work. And how to send the data correctly? - iKey

3 answers 3

in the ajax request, you need to add the .data parameter, the value is something of the type: document.getElementById('pers').value .

those. it should be something like:

 $(document).ready(function() { $("#link").click(function() { $.ajax({ url: "1.php", type: "POST", dataType: "html", data: { personaj: $('#pers').prop('value') }, success: function(response) { $("#contentST").html(response); } }); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="myform" action="#" method="POST" enctype="multipart/form-data"> Персонаж <select id="pers" name="personaj"> <option value="бэтмен">Бэтмен</option> <option value="супер-мен">Супер мен</option> </select> <span id="contentST">Персонаж:</span> <input id="link" type="button" name="calc" value="Выбрать" /> </form>
and you shouldn’t insert the entire answer if you have <span id='..'>...</span> because .html() , judging by the documentation, changes the content of the tag, i.e. Span will be in Span, and both have the same ID. Either, from the PHP side, you just need to give the contents of the tag, and leave the replacement content as it is.

  • And if you add another field to the form? - korytoff
  • I do not quite understand what can happen, given that the author of the question has all references to the DOM by id. Oh, you mean what will happen if you need to send another field. then yes, your example is better. - NumminorihSF

example when clicking on input with text

 $inputs.on('keydown', function (event) { if (isEnter(event)) { send(this.id, this.value); var $next = $inputs.eq($inputs.index(this) + 1); setTimeout(function () { $next.focus(); }, 200); event.preventDefault(); } }); function send(id, value) { var arr = id.split('|'); id = arr[0]; var time = arr[1]; var template_id = arr[2]; var temp_name = arr[3]; var id_analiz = arr[4]; var id_record = arr[5]; $.ajax({ type: 'POST', url: '<?php echo Yii::app()->createAbsoluteUrl("analiz/analizCreate/ajaxinsert"); ?>', data: {id: id, value: value, time: time, template: template_id, temp_name: temp_name, id_analiz: id_analiz, id_record: id_record}, success: function (data) { $('#table2').html(data); }, error: function (data) { // if error occured alert("Error occured.please try again"); alert(data); }, dataType: 'html' }); } function isEnter(e) { var res = false; if (e.keyCode == 13) res = true; return res; }

you don't pass the data parameter

  • Some kind of horror, in ajax I am not strong, so I hardly understand anything in this code - iKey
  • Could you add me the necessary item my ajax code? - iKey

If you already use the form, then submit it completely using AJAX :

HTML

 <form id="myform" action="1.php" method="POST" enctype="multipart/form-data"> <label for="pers">Персонаж</label> <select id="pers" name="personaj"> <option value="бэтмен">Бэтмен</option> <option value="супер-мен">Супер мен</option> </select> <span id="contentST">Персонаж:</span> <input type="submit" name="calc" value="Выбрать" /> </form>

Js

 $(document).ready(function(){ $("#myform").on('submit', function(e){ e.preventDefault(); $.ajax({ url: $(this).attr('action'), // action формы type: $(this).attr('method'), // метод формы dataType: "html", // тип получаемых данных data: $(this).serialize(), // сериализуем данные формы success: function(response){ $("#contentST").html(response); // успех }, error: function(){ // не забываем обрабатывать ошибки } }); }); });

Php

 echo 'Выбранный персонаж: '.$_POST['personaj']; // span не нужен