We Keep Coding

javascript: need press button twice for onclick to trigger

In advance, I apologize to the programmers of our world if my code is ugly and is not in the correct mold. I'm doing this, because where I work nobody else knows programming. :)
I created a page to download some certificates. After the user authenticates, he is redirected to the certificate download page. Until this moment, when the user authenticates, the certificate will be automatically generated, but I would like to put a button for the user to click if they really wanted to generate the certificates.
At first it looks like this:
<div class="form">
<p><strong><span>Usuário: <?= $_SESSION['user'] ?></span></strong></p>
<form action="protected.php" id="my_form" method="post">
<input type="submit" name="gen_cert" value="Gerar certificados" onclick="switcher('gen_cert');this.disabled=true;" />
</form>
<?php if($_SERVER['REQUEST_METHOD'] == "POST" and isset($_POST['gen_cert'])) { ?>
<?php require("cert_generate.php"); ?>
<div id="gen_cert" style="display:none">
<p><a href="download.php?fid=<?= $_SESSION['user'].".p12" ?>" class="button" >Download do certificado pessoal</a></p>
<p><a href="download.php?fid=ca.crt" class="button" >Download da CA</a></p>
</div>
<?php } ?>
</div>
Yes, I have html tags inside php. At first it was the only way that I came up with the "cert_generate.php" check by "if($_SERVER['REQUEST_METHOD'] == "POST" and isset($_POST['gen_cert']))".
UPDATED
SCRIPT
function switcher() {
var x = document.getElementById("generator");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
My problem is that I need to press twice for the "generate certificates" button show the div with the contents.
How can I solve this?

When you load the page for the first time, your gen_cert div is not loaded in dom, because of this condition:
if($_SERVER['REQUEST_METHOD'] == "POST" and isset($_POST['gen_cert'])
You can remove the onclick event and display:none on gen_cert div.
Or, if you want to show/hide the div using jquery, you don't need the form submit. You can change the input type submit to button, remove form 'my_form' and remove the condition
if($_SERVER['REQUEST_METHOD'] == "POST" and isset($_POST['gen_cert'])

Attach a double click event on the button
<p ondblclick="downloadCA(id)">Download da CA</p>
The id here is whatever you want to be in the fid query string in your url.
Then put this js code in your script
function downloadCA(id){
window.location.href = 'download.php?fid=' + id;
}

Javascript submitting wrong form

As a workaround for not being able to have nested forms, I've written a system that uses Javascript to update an outside form's hidden input values and then submit the form. It is working just fine on one page in my site, but for some reason it isn't on another page. In the browser's JS console, I see the correct ID for the form I want submitted, but the server-side keeps showing a different form's data.
Here are relevant code snippets:
So the button's onclick action calls the JS function updateAndSubmitForm () to submit the actual form I want submitted for this button ("formAddStage") and NOT for the surrounding form "form-update-plan".
<form id="form-update-plan" class="form-horizontal" action="/secure/treatment-components/EditTreatmentPlan" method="POST">
<input type="hidden" name="requestedAction" value="plan-edit-update">
...
<button role="button" class="btn btn-default btn-xs" title="Add a stage to this treatment plan."
onclick='updateAndSubmitForm("formAddStage", ${treatmentPlan.treatmentPlanID }, 0, 0)'>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
...
</form>
Here is the form "formAddStage" which is at the botton of the page outside of the form that contains the button:
<form id="formAddStage" action="/secure/treatment-components/CreateStage" method="POST">
<input type="hidden" name="requestedAction" value="add-stage-to-treatment-plan">
<input type="hidden" name="path" value="${path }">
<input type="hidden" id="taskIDDynamic" name="taskID" value="" >
<input type="hidden" id="stageIDDynamic" name="stageID" value="" >
<input type="hidden" id="treatmentPlanIDDynamic" name="treatmentPlanID" value="${treatmentPlan.treatmentPlanID }">
<input type="hidden" name="clientUUID" value="${clientUUID }" >
</form>
And here is the JavaScript which gets the form by the ID supplied, gets and sets the values of the hidden fields in that form with the supplied values, then submits.
function updateAndSubmitForm(formID, treatmentPlanID, stageID, taskID){
var form = document.getElementById(formID);
var inputTaskID = form.elements["taskIDDynamic"];
inputTaskID.value = taskID;
var inputStageID = form.elements["stageIDDynamic"];
inputStageID.value = stageID;
var inputTreatmentPlanID = form.elements["treatmentPlanIDDynamic"];
inputTreatmentPlanID.value = treatmentPlanID;
var requestedAction = form.elements["requestedAction"];
console.log("Updating and submitting form " + form.id + " - requestedAction: " + requestedAction.value);
//alert("Updating and submitting form " + formID + " - requestedAction: " + requestedAction.value);
form.submit();
};
So, in summary, clicking the button should call the JS function updateAndSubmitForm() which then gets the form designated in the method's argument "formID" and then take the remaining arguments to update the values of the form and then submit it.
What ends up happening is that my browser console reports the proper information (form id = "formAddStage" and requestedAction = "add-stage-to-treatment-plan") but the server side reports getting information from the form (id="form-update-plan") that is surrounding the button (e.g. request.getParameter("requestedAction") returns "plan-edit-update" instead of "add-stage-to-treatment-plan".
Any ideas about why form.submit() in the JS function does not seem to submit the proper form or why the server is getting a different form?

The button element within the "form-update-plan" form does not have a type specified, it will therefore be defaulting to a type of submit and submitting the "form-update-plan" form.
Try this:
<button type="button"

AJAX and submit button on form interaction

I'm creating a simple website and a html page on it which contains a table that shows products. I load this table using AJAX and it work properly. Here is a screenshot:
Under the table I have buttons which perform CRUD operations using AJAX.
They communicate to a php script on a server outside of my domain using GET method.
When I click on Add product it opens a form with a button that whose onclick event calls a function which adds a product using AJAX. But, when I click, the whole page reloads and the product is not added. If I put the value that says wheter the call is async to false, it works as intended and the product is added to the table, however that is not the point of AJAX.
This is my code for adding a product(delete and update are almost the same).
<div id="addProductPopup">
<div id="popupContact">
<form id="form" method="post" name="form">
<img id="close" src="/servis/Resursi/Slike/close.png" onclick ="hide('addProductPopup');">
<h2>Dodavanje proizvoda</h2>
<hr>
<input id="name" name="naziv" placeholder="Naziv proizvoda" type="text" required>
<input id="kolicina" name="kolicina" placeholder="Količina proizvoda" type="text" required>
<input id="url" name="url" placeholder="URL slike" type="text" required>
<input type="submit" value="Pošalji" class="popupButtons" onclick="addProduct()">
</form>
</div>
When I click on submit this function is called:
function addProduct(){
var isValid = true;
var url = "http://zamger.etf.unsa.ba/wt/proizvodi.php?brindexa=16390";
var amount = document.form.kolicina.value;
var naziv = document.form.naziv.value;
var slikaurl = document.form.url.value;
var validity = validateFields(naziv, slikaurl, amount);
if(!validity) return false;
var product = {
naziv: naziv,
kolicina: amount,
slika: slikaurl
};
var requestObject = new XMLHttpRequest();
requestObject.onreadystatechange = function(event) {
if (requestObject.readyState == 4 && requestObject.status == 200)
{
loadProducts();
event.preventDefault();
}
}
requestObject.open("POST", url, true);
requestObject.setRequestHeader("Content-type","application/x-www-form-urlencoded");
requestObject.send("akcija=dodavanje" + "&brindexa=16390&proizvod=" + JSON.stringify(product));
}

It is because you are not preventing the default action of the submit button click.
You can return false from an event handler to prevent the default action of an event so
<input type="submit" value="Pošalji" class="popupButtons" onclick="addProduct(); return false;">
But since you have a form with a submit button, I think it will be better to use the submit event handler like
<form id="form" method="post" name="form" onsubmit="addProduct(); return false;">
....
<input type="submit" value="Pošalji" class="popupButtons">

Your problem is that your submit button still executes a real submit. You could change your addProducts method. The method have to return false to prevent the real submit.

Submit button performs default Submit action for HTML code.
Try to change Submit tag into Button tag. Or after AddProduct() in OnClick JS Action put
return false;

Simple Change put input type="button" instead of tpye="submit"
<input type="button" value="Pošalji" class="popupButtons" onclick="addProduct()">

Twice page refresh is needed to get the input data from MySQL database

When i enter new values to form input field and submit them, then twice page reload needed to get the new values.
like you can see the $balance_2 in the 7th line. This line sum all row values of every row and and record the value in Balance column of every row and after pressing submit button then it goes to update_2.php file to update the database and when in click on
<a style='left: -18%; top: 100%; position: absolute; color: white; font-family: Roboto, helvetica, arial, sans-serif; width: 170px; font-weight: 600;' href='index_2.php'>Click here to go back</a>
button in update_2.php file and go back to the main page then the form values are not updated till i reload it again.
I want that when i click on Click here to go back button then new values should be shown and there must not be need to reload the page twice.
This is my codes
$id_2 = $row['ID'];
$Budget_2 = $row['Budget'];
$Availed_in_Regions_2 = $row['Availed_in_Regions'];
$Requested_in_KBL_2 = $row['Requested_in_KBL'];
$Received_in_KBL_2 = $row['Received_in_KBL'];
$Availed_in_KBL_2 = $row['Availed_in_KBL'];
$balance_2 = $Availed_in_Regions_2 + $Requested_in_KBL_2 + $Received_in_KBL_2 + $Availed_in_KBL_2;
$con2->query("UPDATE Office_Operations f1, (SELECT SUM(balance) AS bal FROM Office_Operations ) f2 SET ytotal6_2 = bal WHERE f1.id = 1;");
$con2->query("UPDATE Office_Operations SET Balance = $balance_2 WHERE id = $id_2");
echo "<div class='calc_container'"; if($row['ID']==1) echo " style='margin-bottom:40px;'"; echo ">
<input type='hidden' class='id_3' name='id[]' value='".$row['ID']."'>
<input type='text' class='budget_3' name='Budget[]' value='".$row['Budget']."'>
<input type='text' class='avail_region_3' name='Availed_in_Regions[]' value='".$row['Availed_in_Regions']."'>
<input type='text' class='req_kbl_3' name='Requested_in_KBL[]' value='".$row['Requested_in_KBL']."'>
<input type='text' class='rec_kbl_3' name='Received_in_KBL[]' value='".$row['Received_in_KBL']."'>
<input type='text' class='avail_kbl_3' name='Availed_in_KBL[]' value='".$row['Availed_in_KBL']."'>
<input type='text' class='balance_3' name='Balance[]' value='".$row['Balance']."'>
</div>";}

From my perspective:
Put all the input tags inside of form tag that uses action="" (to the same URL)
OR
Process the request with AJAX. When clicked on anchor a use onclick then define the listener function that makes the AJAX call and updates the input fieldS on successful response (parse the response accordingly). See using JS or jQuery
Also, it would be better if you escape the query input values. For MySQL see some posts here, here and here.

Your list page or your main page is the index_2.php and your update_2.php is where the Click here to go back button is located.
Summary:
index_2.php
List of data
Also where the form is
update_2.php
where the Click here to go back button is located
When the data is submitted from your index_2.php, it will go to update_2.php, but does nothing but offers only the back button.
The only time the UPDATE query will run is when the user clicks the Click here to go back button.
SOLUTION:
Put your UPDATE query in your update_2.php
Use the header() function to redirect the user back to index_2.php after the query
Sample Code:
index_2.php:
<form action="update_2.php" method="POST">
<!-- INSERT HERE YOUR INPUT FIELDS -->
<input type="submit" name="submit">
</form>
update_2.php:
<?php
if(isset($_POST["submit"])){
/* INSERT HERE YOUR UPDATE QUERIES */
header("LOCATION:index_2.php"); /* REDIRECT USER BACK TO index_2.php */
} /* END OF ISSET SUBMIT */
?>

Convert a DIV to textarea with specific "name" attribute

I have a small admin panel that I have created to do simple database tasks for my DayZ server. Now I want to make a simple editor for the news blurb on my website. The news blurb is stored in a table on my database. What I want is when the page loads it simply echo's the data and looks like it does on the live site. Then, when I click on it, I want it to convert into:
<textarea name="edit><?php echo news; ?></textarea>
This is my current code:
function divClicked() {
var divHtml = $(this).html();
var editableText = $("<textarea name="edit" />");
editableText.val(divHtml);
$(this).replaceWith(editableText);
editableText.focus();
// setup the blur event for this new textarea
editableText.blur(editableTextBlurred);
}
$(document).ready(function() {
$("#editable").click(divClicked);
});
<form method="post" action="newsedit.php">
<div id="editable"><?php echo $news; ?></div>
<input type="submit" value="Edit News" />
</form>
Now, this does work in the sense that when I click on the text it does convert into a textarea. The problem is that it doesn't give it the "edit" name so when I hit the sumbit button, it is as if I submitted nothing and it deletes all the data out of the table because
<textarea name="edit"></textarea>
is technically empty. Are there any ways to make it so when I click on the text it will convert the code to textarea with that specific name so there is actual data when I hit submit?

Change the form to:
<form method="post" action="newsedit.php">
<div id="<?php echo $newsID;?>"><?php echo nl2br($news); ?></div>
<input type="submit" value="Edit News" />
</form>
Where $newsID is returned along with the $news text.
The nl2br($news) will just make sure the line breaks are honored.

var editableText = $("<textarea name='edit' />");
http://jsfiddle.net/H5aM4/ inspect the textarea

TRY This
$("#editable").click( function(){
$(this).replaceWith(function() {
return $("<textarea name='edit'>").text(this.innerHTML);
});
});
Here is the working example