Develop Reference

HTML Submit form only executing one JavaScript function on submit

Good Afternoon,
I am currently in the process of creating a website using HTML, PHP and JavaScript, and I have run into an issue when trying to check for duplicate usernames in a database. Currently, I have a form which uses the following code to call two javascript functions on submit.
<form onsubmit="return (checkValid() && usernameCheck())" action="create.php" method="post" id="registerForm">
The javascript code is then present at the bottom of the body tag, within script tags, and is the following.
<script>
var pass = document.getElementById('passVal').value;
var confPass = document.getElementById('confPassVal').value;
var error = document.getElementById('errorMsg');
var result = true;
function checkValid(){
if(pass !== confPass)
{
error.type = "text";
error.value = "Passwords do not match!";
error.style.backgroundColor = "#E34234";
document.getElementById('passVal').style.borderColor = "#E34234";
document.getElementById('confPassVal').style.borderColor = "#E34234";
result = false;
}
return result;
}
function usernameCheck()
{
var username = document.getElementById('userName').value;
var j = checkName(username);
console.log(j);
if ( j == "taken" ) {
error.type = "text";
error.value = "Username Already Exists, Please choose an alternative.";
error.style.backgroundColor = "#E34234";
document.getElementById('userName').style.borderColor = "#E34234";
console.log(j);
result = false;
}
if ( j == "available" ) {
console.log(j);
result = true;
}
return result;
}
function checkName(uname) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var httpURL = "checkUserName.php?n=" + uname;
xhttp.open("GET",httpURL,false);
xhttp.send();
return xhttp.responseText;
}
</script>
The issue I am having is that the second JavaScript function is not executing, even though it is being called in the onsubmit function. Because of this, the third function is also not executing, as this function is called within the second function. The second function submits a GET value with the username input in the HTML form to a PHP script. The PHP script then checks the database to see if this user exists, and returns a value based on if this is true or not. The code below shows the PHP script.
<?php
session_start();
require 'sql.php';
header('Content-type: text/plain');
$userName = $_GET['n'];
$query = "SELECT username FROM users where username='$username'";
$checkun = $conn->query($query);
while ($row = $checkun->fetch_assoc()) {
if ($row > 0)
{
exit('taken');
} else
{
exit('available');
}
}
?>
The first JavaScript function successfully executes, which is used to check if the password fields match. This function either returns a false value if the password fields do not match (hence the second function will not execute), or a true value if they do. Even if the first function returns true, the next function does not execute, and the form submits without running this second function.
I would be grateful if someone more experienced than me (I have only been practising web development for a few months) could highlight if there are any errors in my method, and possibly help me with a solution.
Thank you for taking the time to read this!

When you say "the second function does not run" - do you mean that you get no response in the JS? I would imagine that to be true as you will NEVER have a match in your MySQL query - and, you don't have your 'catchall' in the right place.
This looks like a first learning experience for you to get data from a database, so I won't harp on the fact that you are WIDE OPEN for SQL injection attacks, though I will say that you must NOT use this code on any open system where there are real users (you need to learn how to protect against those attacks - there's loads of data on that on SO)!
So, your first step in at least getting the 'second function' to 'work'.....
<?php
session_start();
require 'sql.php';
header('Content-type: text/plain');
// $userName = $_GET['n']; // <<<==== here you use with a capital
$username = $_GET['n']; // let's change it to be the same
$query = "SELECT username FROM users where username='$username'"; // now, we have a chance...
$checkun = $conn->query($query);
while ($row = $checkun->fetch_assoc()) {
if ($row > 0)
{
exit('taken');
}
}
// Here is where to put your 'catchall' in case you don't get anything from the query (what you have won't ever give 'available')
exit('available');
?>

Array output problem at Webscraping with DOMparser

I'm facing some output trouble at the second part of my codes.
function getSiteContent($url)
{
$html = cache()->rememberForever($url, function () use ($url) {
return file_get_contents($url);
});
$parser = new \DOMDocument();
#$parser->loadHTML($html);
return $parser;
}
libxml_use_internal_errors(true);
$url = 'https://sumai.tokyu-land.co.jp/osaka';
$parser = getSiteContent($url);
$allDivs =[];
$allDivs = $parser->getElementsByTagName('div');
foreach ($allDivs as $div) {
if ($div->getAttribute('class') == 'p-articlelist-content-right') {
$allLinks = $div->getElementsByTagName('a');
foreach ($allLinks as $a) {
$getlinks[] = $a->getAttribute('href');
}
}
}
var_dump($getlinks);
At this var_dump I can see links that I scraped. No problem 'till here. And one more time. I want to go into those links. That's why I wrote the codes right below.
getSiteContent($getlinks);
$link = [];
$siteler = [];
foreach ($siteler as $site) {
if($site == 'https://sumai.tokyu-land.co.jp'){
$site = $getlinks->getElementsByTagName('div');
foreach ($site as $links) {
if($links->getAttribute('class') == 'pc_hnavi'){
$linker = $links->getElementsByTagName('a');
foreach ($linker as $a) {
$link = $a->getAttribute('href');
}
}
}
}
}
var_dump($link);
When I var_dump it. It says Array 0
I didn't understand why it doesn't go in those links with foreach
My codes are wrong? What am I missing here? Any idea for this?
Thank you helping me out.

As I said in the comments $siteler is empty when you try to loop through it, but there are a couple more problems:
First your code will only trigger once at most, when the link is exactly 'https://sumai.tokyu-land.co.jp' and I'm not sure that's what you want.
You are calling DOM functions on an array.
Only seem to care about links inside 'div' tags.
You redefine the $link variable on each loop, so the final result will be just one link.
This is the fixed code:
$link = [];
foreach ($getlinks as $site) {
// Any link in the domain, not just the homepage
if(strpos($site, 'https://sumai.tokyu-land.co.jp') === 0) {
$dom = getSiteContent($site);
$divs = $dom->getElementsByTagName('div');
foreach ($divs as $div) {
// Can have more than one class
$attrs = explode(' ', $div->getAttribute('class'));
if(in_array('pc_hnavi', $attrs)) {
$linker = $div->getElementsByTagName('a');
foreach ($linker as $a) {
// Add to the array
$link[] = $a->getAttribute('href');
}
}
}
}
}
However this doesn't check if the link already exists in the array and has the potential to process the same links over and over. I'd strongly suggest to use an existing crawler.
From the comments, turns out that pc_hnavi is an id and not a class and you are interested in the first link only. You can access that element directly without iterating the elements:
foreach ($getlinks as $site) {
// Any link in the domain, not just the homepage
if(strpos($site, 'https://sumai.tokyu-land.co.jp') === 0) {
$dom = getSiteContent($site);
$div = $dom->getElementById('pc_hnavi');
if ($div != null) {
$links = $div->getElementsByTagName('a');
if ($links->length > 0) {
$a = $links->item(0);
$link[] = $a->getAttribute('href');
}
}
}
}

It looks like your problem is here:
...
$siteler = []; // $siteler is set to an empty array ...
foreach ($siteler as $site) { // then you loop through the empty array which does nothing ...
...
}
...
Fixing that should get you started.

Getting wrong array length with jQuery and mysqli_num_rows()

I'm adding new data to database table with jQuery. Then i'm getting all content from that table. Problem is i'm getting wrong array size every odd time.If i refresh the page it's getting right array size but when i'm clicking button with jQuery function it's all messed up.
I figure out that
$n = mysqli_num_rows($result);
already return wrong num of rows
Here is the script:
$(document).ready(function(){
$.getallentries = function(){
$.getJSON("entries.php",{action : "getall"},function(data) {
var content_array = $.map(data, function(e) { return e;});
console.log(content_array.length); // to check array size
});
$.addstatic = function(){
$.post("entries.php",{action : "addstatic"});
};
};
$("#adds").on("click",function(){
$.addstatic();
$.getallentries();
});
$.getallentries();
And here is entries.php:
function getall(){
$link = db_connect();
$query= "SELECT * FROM jq";
$result = mysqli_query($link,$query, MYSQLI_STORE_RESULT);// Smart people said MYSQLI_STORE_RESULT should help but it didn't
$n = mysqli_num_rows($result);
for($i = 0 ;$i<$n;$i++)
{
$row=mysqli_fetch_assoc($result);
$b[]=$row;
}
echo json_encode(array($b));
}
function addstatic(){
$link = db_connect();
$statin_Entry = "Static Entry";
$query = "INSERT INTO jq (Entry) VALUES ('$statin_Entry')";
$result = mysqli_query($link,$query);
}
if(isset($_GET['action']) && !empty($_GET['action'])) {
$action = $_GET['action'];
switch($action) {
case 'getall' : getall(); break;
}
}
else {
if(isset($_POST['action']) && !empty($_POST['action'])) {
$action = $_POST['action'];
switch($action) {
case 'addstatic' : addstatic();break;
case 'removelast' : removelast();break;
// ...etc...
}
}
}
This is log of array length
So the problem again, same array size 143,146,151 and where is 156??

You should call $.getallentries in the callback function of the $.addstatic AJAX call, so that it runs after $.addstatic has finished updating the database.
$.addstatic = function(){
$.post("entries.php",{action : "addstatic"}, $.getallentries);
};
There's no need to use mysqli_num_rows before fetching the rows. You should use a loop like this:
while ($row = mysqli_fetch_assoc($result)) {
$b[] = $row;
}
Also, you're wrapping your array in another array. Just do:
echo json_encode($b);
The way you've written it, console.log(content_array.length) should always log 1, I don't understand how you're getting higher numbers. Are you sure you posted the actual code?
There's no point in use $.map, all it's doing is making a copy of the data array. Just use data itself.
And in your PHP, you don't need to test both isset() and !empty(), because empty() checks if the variable is set first.
You don't need to use MYSQLI_STORE_RESULT, it's the default for that option.

Calling Oracle Query Using PHP Function with constructor

I dont know where my mistake is but i want to store an oracle query inside a function and return that function inside an array.
JobDrop.php
class JobDrop {
private $jobSql = "SELECT VMI.PROJECT_NO JOB FROM VW_MTO_INFO VMI ORDER BY VMI.PROJECT_NO ASC";
function _construct($jobSql){
$this->jobSql = $jobSql;
}
function JobDropdown($conn){
$jobParse = oci_parse($conn, $this->jobSql);
$jobExcErr = oci_execute($jobParse);
if (!$jobExcErr){
$e = oci_error($jobParse);
print htmlentities($e['message']);
print "\n<pre>\n";
print htmlentities($e['sqltext']);
printf("\n%".($e['offset']+1)."s", "^");
print "\n</pre>\n";
} else {
$res = array();
while ($row = oci_fetch_assoc($jobParse)){
$res[] = $row;
}
$listVendor = json_encode($res, JSON_PRETTY_PRINT);
return $listVendor;
}
}
}
and in test.php
include './job_drop.php';
require_once('../../lib/dbinfo.inc.php');
$conn = oci_connect(ORA_CON_UN, ORA_CON_PW, ORA_CON_DB);
$jobdrop = new JobDrop();
$jobdrop->JobDropdown($conn);
var_dump($jobdrop);
but it doesnt show the array inside the browser. it shows the query string instead,
object(JobDrop)#1 (1) { ["jobSql":"JobDrop":private]=> string(74) "SELECT VMI.PROJECT_NO JOB FROM VW_MTO_INFO VMI ORDER BY VMI.PROJECT_NO ASC" }
Please help me where I am doing wrong here

If you want to see the array, do:
$res = $jobdrop->JobDropdown($conn);
var_dump($res);

javascript - how to process functions in order not all at once

I have the following issue:
Let's say that I have a function that process an array to do something with it depending on received parameters. So something like:
var arr = [];
function processArr(p1, p2, ....){};
p1, p2 etc are received from the server so we get to:
processArr(<?php echo $p1; ?>, <?php echo $p2; ?>, ...)
processArr(<?php echo $p1; ?>, <?php echo $p2; ?>, ...)
processArr(<?php echo $p1; ?>, <?php echo $p2; ?>, ...)
processArr(<?php echo $p1; ?>, <?php echo $p2; ?>, ...)
processArr(<?php echo $p1; ?>, <?php echo $p2; ?>, ...)
It is actually a php for but doesn't really matter.
Problem: js process the calls simultaneously (not exactly simultaneously but close enough) instead of one after the other. So if in first call I add an element to the array (then some other processing) and in second call I try to delete the element, at delete the element doesn't exist because it wasn't added yet.
How do I make second call to wait for the first to finish?
Added function:
function processSaved(act, params)
{
if (act == 1)
{
var newUser = params;
if (user.id == newUser.id)
user = clone(newUser);
activeElementIndex = i;
// Go to the next level from the active element level
var newLevel = newUser.level;
// Set current level
currentLevel = Math.max(currentLevel, newLevel);
// Create new object and push it to elements array
var obj = newUser;
elements.push(obj);
activeElementIndex = newUser.parent;
// Add element to order list
if (orderElements.length + 1 > newLevel)
{
var added = 0;
for (var i = 0; i < orderElements[newLevel - 1].el.length; i++)
{
if (elements[activeElementIndex].column < elements[elements[orderElements[newLevel - 1].el[i]].parent].column)
{
orderElements[newLevel - 1].el.splice(i, 0, elements.length - 1);
added = 1;
break;
}
}
if (added == 0)
orderElements[newLevel - 1].el.push(elements.length - 1);
}
else
{
var tmp = new Array();
tmp.push(elements.length - 1);
var obj = {"el": tmp};
orderElements[newLevel - 1] = obj;
}
flagCreate = 1;
actions.push(newUser);
// Call the rearange function
rearangeElementsWithoutRedraw();
}
else if (act == 0)
{
activeElementIndex = params.index;
deleteNode();
}
return true;
}
First call is made with act = 1. Second is made with act = 0. If I add a timeout to the second call with let's say 0.5 seconds everything works fine. If not I get error at removal because element does not exist. This suggests that the second call is made before first finished.

JS does not call functions in parallel. Your processArr functions are executed sequentially.
This obviously assumes that you do not simply start e.g. an AJAX request in the function - if you do the next function will obviously not wait for the request to finish (until it's synchronous).

Found the problem. There was an asynchronous call made by a library I was using (raphaeljs). Srry for loss of time :).