There is an index.php page with the created form:

<?php require_once("class.php"); echo "test"; echo " <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>Test Alphabetics</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'> <style> body { font-family: Arial, sans-serif; } .section { margin: 20px; } button { padding: 5px 16px; border-radius: 4px; } button#changeQuota { background-color: yellow; } button#transfer { } button#buyTicket { background-color: #98fb98; } button#refundTicket { background-color: pink; } </style> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> <link href='./app.css' rel='stylesheet' type='text/css'> <script type='text/javascript' src='./app.js'></script> </head> <body> "; $task = new Form("process.php", "Отправить данные"); $task->addFieldName("#f1"); $task->addFieldName("#opt"); $task->addFieldName("#f2"); $task->addFieldName("#exec"); $task->addFieldName("#res"); $task->displayForm(); echo " </body> </html> "; ?>

The form is created normally, everything is in place, the selectors are also in place.

Result html:

  <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>Test Alphabetics</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'> <style> body { font-family: Arial, sans-serif; } .section { margin: 20px; } button { padding: 5px 16px; border-radius: 4px; } button#changeQuota { background-color: yellow; } button#transfer { } button#buyTicket { background-color: #98fb98; } button#refundTicket { background-color: pink; } </style> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> <link href='./app.css' rel='stylesheet' type='text/css'> <script type='text/javascript' src='./app.js'></script> </head> <body> <div class='section'><h2>Введите данные</h2></br> <input type='text' id='#f1'/></br> <select required id='#opt'><option value='1'>*</option> <option value='2'>/</option> <option value='3'>+</option> <option value='4'>-</option></select></br> <input type='text' id='#f2'></br> <button id='#exec'>Отправить данные</button> <span id='#res'></span></br> </body> </html>

App.js is connected to the index with the following content:

 $(document).ready(function () { console.log("test"); $("#f1").html("3"); $("#res").html("Whoa!"); //Warmig up UI $("#exec").click(function() { var f1 = $("#f1").val(); var f2 = $("#f2").val(); var opr = $("#opr"); Calc(f1,f2,opr); console.log("test click"); }); function Calc() { console.log(f1); console.log(f2); console.log(opr); $.post( "/process.php", { f1 : f1, f2 : f2, opr : opr }, onAjaxSuccess ); function onAjaxSuccess (data) { var r=data; console.log(data); result=r.result; console.log(result); } } });

Nor does any selector work. Values ​​are not set, the function does not work, etc. At all.

I would be very grateful if someone tells you how to solve the problem.

UPD - changed, now. Val () displays the element code, for example, A should display the value ..

  • Can you add the resulting html instead of index.php? - Arnial

2 answers 2

You have incorrectly written element id, id should not contain the # symbol .

The selector $("#f1") searches for an element with id="f1" , not id="#f1" .

Perform php so that it returns such html

 <div class='section'><h2>Введите данные</h2></br> <input type='text' id='f1'/></br> <select required id='opt'><option value='1'>*</option> <option value='2'>/</option> <option value='3'>+</option> <option value='4'>-</option></select></br> <input type='text' id='f2'></br> <button id='exec'>Отправить данные</button> <span id='res'></span></br>

then selectors in js will work.

UPDATE: You have a typo in one of the selectors:

The second field in php has id="opt" (select field). In the js code you are trying to get $('#opr') (php "opt" -> js "opr").

UPDATE 2: Error in Calc method:

function Calc() . Calc takes no arguments. In js, you can pass argruments to functions that are not going to receive them, so a call to Calc( f1, f2, opr ) inside click will not cause errors. Should be replaced by function Calc( f1, f2, opr)

Print f1, f2, and opr

  console.log(f1); console.log(f2); console.log(opr);

In the current version prints nodes. the variables f1, f2 and opr do not exist in the local scope or in the global one. When js cannot find a variable in any scope, it searches for a node with id equal to the name of this variable.

  • corrected, now another problem has arisen - .val () returns the element code, for example, <input type = "text" id = "f1" value = "2"> And should return a value .. what could be wrong? - Jack Bekket
  • Do you mean in the method `console.log (f1) in the method" calc "? added to update2 - Arnial
  • yes, exactly, it displays the code instead of the value - Jack Bekket
  • Additional information on global variables obtained through id - Arnial
  • But these are not global variables, I am passing them through a function, no? - Jack Bekket

jQuery should connect after the declaration of all DIV and other DOM elements at the bottom of the page. Or in the HEAD tag