{"id":30154,"date":"2023-01-13T13:59:01","date_gmt":"2023-01-13T08:29:01","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-change-php-code-to-js\/"},"modified":"2023-01-13T13:59:01","modified_gmt":"2023-01-13T08:29:01","slug":"solved-change-php-code-to-js","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-change-php-code-to-js\/","title":{"rendered":"[Solved] Change PHP code to JS"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

I echo the comment above. I believe StackOverflow is not<\/strong> a code writing service unless something changed very recently.<\/p>\n

However, let’s look at the code you posted. <\/p>\n

I think it would help to refactor this code into a more logical sense before attempting this in Javascript. That should make it easier to transpose. Every time there is repetition of similar code (e.g. $ak1 = $_POST['ak1']; $ak2 = $_POST['ak2']; ...<\/code>) I would think there must be a more efficient way of getting your programming language to do the hard work. Computers are good at repetitive tasks after all.<\/p>\n

I assume you have labelled all of the input fields in your form individually but you can actually pass them to $_POST<\/code> as arrays if you give them all the same name and append square brackets like so:<\/p>\n

<input type=\"text\" name=\"ak[]\">\n<input type=\"text\" name=\"ak[]\">\n<input type=\"text\" name=\"ak[]\">\n<input type=\"text\" name=\"ak[]\">\n<input type=\"text\" name=\"ak[]\">\n<input type=\"text\" name=\"ak[]\">\n<input type=\"text\" name=\"ak[]\">\n\n<input type=\"text\" name=\"akcs[]\">\n<input type=\"text\" name=\"akcs[]\">\n<input type=\"text\" name=\"akcs[]\">\n<input type=\"text\" name=\"akcs[]\">\n<input type=\"text\" name=\"akcs[]\">\n<input type=\"text\" name=\"akcs[]\">\n<input type=\"text\" name=\"akcs[]\">\n<\/code><\/pre>\n
I don’t know why you have two different sets of names for the input fields – it might help to merge these into one unless you have a good reason not too.<\/p>\n
Now you have the HTML in a more maintainable format, you can seriously cut down on the amount of variable assignment that is needed in PHP:<\/p>\n
if(isset($_POST['ak'], $_POST['akcs'])){\n  extract($_POST);\n  $all_fields = array_merge($ak, $akcs);\n  $total = array_sum($all_fields);\n  if($total){\n    echo \"<p><i>Sent at:<\/i>\" . date('H:i, jS F');\n    $ak_values   = [140, 285, 160, 120, 180, 210, 250, 120, 300, 200, 110, 110, 130, 200];\n    $value = array_sum(array_map(function($a, $b){\n      return $a * $b;\n  }, $all_fields, $ak_values));\n    echo '<br><br><br><strong>Total: <\/strong>'.$total;\n    echo '<hr width=\"20%\">';\n    echo '<strong>Total to pay: <\/strong><font face color=\"green\">'.$value.'<\/font><strong> $<\/strong>';\n  } else {\n  echo '<br><br><strong>You did not make any order<\/strong>';\n  }\n}\n<\/code><\/pre>\n
Making use of PHP’s features such as extract<\/a>, array_sum<\/a>, array_map<\/a> and array_merge<\/a> (which is necessary to combine the two sets of input fields in your form – see? You know it makes sense to only have the one type \ud83d\ude09 ) makes it much less repetitive and also more maintainable should you wish to amend the form at a later date.<\/p>\n
So how does this convert to JavaScript? <\/p>\n
I’m glad you asked.<\/p>\n
var ak_values   = [140, 285, 160, 120, 180, 210, 250, 120, 300, 200, 110, 110, 130, 200];\nvar order_date = document.getElementById('order_date');\nvar message = document.getElementById('message');\nfunction sum(a,b){ return a+b }\ndocument.getElementById('sum').addEventListener('click', function(){\n  var ak = [];\n  Array.prototype.slice.call(document.querySelectorAll('[name=\"ak[]\"], [name=\"akcs[]\"]')).forEach(function(i){\n    ak.push( i.value === \"\" ? 0 : parseInt(i.value));\n});\n  var total = ak.reduce(sum);\n  if (total){\n    order_date.innerHTML =  \"<i>Sent at:<\/i>\" + new Date();\n    ak = ak.map(function(item, index){\n      return item * ak_values[index];\n    });\n    var value = ak.reduce(function(sum, item){\n      return sum + item;\n    });\n    message.innerHTML = '<br><br><br><strong>Total: <\/strong>' + total + '<hr width=\"20%\"><strong>Total to pay: <\/strong><font face color=\"green\">' + value  + '<\/font><strong> $<\/strong>';\n  } else{\n    message.innerHTML = '<br><br><strong>You did not make any order<\/strong>';\n  }\n});\n<\/code><\/pre>\n
Javascript has comparable functions for map<\/a> and reduce<\/a> to get the array sum etc. and you can see how taking the approach in PHP to use such standard functions makes it easier to translate in to another language. <\/p>\n
A few things to consider:<\/p>\n