line up buttons html - html

Question

I have a page that displays some info about a project in a "container", within that container there are some different fields along with 2 buttons that access different pages. I am having an issue getting the buttons to line up horizontally, how can I get this done? I am thinking it has something to do with the way the forms are rendered, is there a better way than forms? can you style forms with css doing like
display: inline
This is the first time I have messed around with HTML, here is my code thanks:
<div class="project-container">
<label class="boldLabel">Project ID:</label>
<span><?php echo $pId; ?></span><br>
<label class="boldLabel">Project Owner:</label>
<span><?php echo $pName; ?></span><br>
<label class="boldLabel">Project Description:</label>
<span><?php echo $pDesc; ?> </span><br><br>
<label class="boldLabel">Project Due Date:</label>
<span><?php echo $dDate; ?> </span><br>
<form action="delete.php" method="GET">
<input type="hidden" name="pId" value="<?php echo $pId; ?>">
<button class="buttonDelete" type="submit" name="delete">Delete Project</button>
</form>
<form action="update.php" method="GET">
<input type="hidden" name="pId" value="<?php echo $pId; ?>">
<input type="hidden" name="pName" value="<?php echo $pName; ?>">
<input type="hidden" name="pDesc" value="<?php echo $pDesc; ?>">
<input type="hidden" name="dDate" value="<?php echo $dDate; ?>">
<button class="buttonUpdate" type="submit" name="update">Update Project</button>
</form>
</div>
</div>

Answer 1

You don't need any 2 forms on your file. You just need 1 general form tag that handles both process (delete and update). These process can be managed throught Javascript functions and events.
Note: The problem about the 2 buttons not being aligned horizontally is because you have certain elements on different form tags. You could do some extra work with css but having 2 forms in one file is normally avoided by developers unless this could be the only way to a certain process.
I fixed the code. You can see the snippet working here:
function buttoncheck(action)
{
//$("project-container").load("process.php", {action: action});
// This is an example of how you could "call" process.php
}
<form action="process.php" method="post">
<div id="project-container" class="project-container">
<label class="boldLabel">Project ID:</label>
<span><?php echo $pId; ?></span><br>
<label class="boldLabel">Project Owner:</label>
<span><?php echo $pName; ?></span><br>
<label class="boldLabel">Project Description:</label>
<span><?php echo $pDesc; ?> </span><br><br>
<label class="boldLabel">Project Due Date:</label>
<span><?php echo $dDate; ?> </span><br>
<input type="hidden" name="pId" value="<?php echo $pId; ?>">
<input type="hidden" name="pId" value="<?php echo $pId; ?>">
<input type="hidden" name="pName" value="<?php echo $pName; ?>">
<input type="hidden" name="pDesc" value="<?php echo $pDesc; ?>">
<input type="hidden" name="dDate" value="<?php echo $dDate; ?>">
<button class="buttonDelete" type="button" name="delete" onClick="buttoncheck(0)">Delete Project</button>
<button class="buttonUpdate" type="button" name="update" onClick="buttoncheck(1)">Update Project</button>
</div>
</form>
And in the "process.php" file
<?php
$action=$_POST['action'];
// To Update
if($action=1){
// update code here
}
if($action=0){
// delete code here
}
You can check how to refresh div content, onclick function, css manage in this links:
Load jquery method
Load Jquery method 2
onclick function
button css design process