Develop Reference

How to submit LOTS of buttons

I'm displaying rows of data from a mysql database, and on each row I have three icons that I'd like to function as buttons. When an icon is clicked, I'd like to send the user to another page, and send that page both which icon was clicked and what row it was on. Here's some sample code:
<form action="nextpage.php" method="POST">
while ($row = $result->fetch_assoc))
{
echo '<input type="image" src="button1.png" name="button1">';
echo '<input type="image" src="button2.png" name="button2">';
echo '<input type="image" src="button3.png" name="button3">';
echo $row["cName"], '<br/>', PHP_EOL;
}
</form>
I've tried adding a value field for each input icon, but that didn't seem to work. I've tried putting the row identifier in the input's name, but it came out with changed characters, making it difficult to extract.
This page will likely display up to a hundred rows from the database, so aside from creating a separate form for each icon on each row (300 forms), what's the best way to go about this?

If you can use jquery, here is how I would approach it:
<form action="nextpage.php" method="POST">
<input type="hidden" id="hidden-icon" name="icon" value="" />
<input type="hidden" id="hidden-row" name="row" value="" />
</form>
<?php
$row_num = 0;
while ($row = $result->fetch_assoc))
{
echo '<img src="button1.png" />';
echo '<img src="button2.png" />';
echo '<img src="button3.png" />';
echo $row["cName"], '<br/>', PHP_EOL;
$row_num++;
}
?>
<script type="text/javascript">
$('.click-register').on('click', function (e) {
//Stop the link from jumping to the top of the page
e.preventDefault();
//Fill in the hidden form values
$('#hidden-icon').val($(e.target).data('icon'));
$('#hidden-row').val($(e.target).data('row'));
//Submit the form
$('form').submit();
});
</script>
That code is off the top of my head and untested, but here's the general idea:
First, move the icons outside of the form, as this approach doesn't require them to be inputs any longer;
Since the icons don't need to be inputs, we make them images inside of anchors;
We put the data we need on the anchors (data-icon and data-row);
Using jquery (in this case, you could do this pure javascript if you needed to), we:
Listen for any clicks of the anchors;
Grab the data from the clicked link and fill in our hidden form fields; and
Submit the form
Again, I used jquery because it's common and familiar to many. You can accomplish this with many other javascript frameworks or even pure javascript if that was desireable. Conceptually though I think it is sound.
If you don't want to go with javascript, the option of using links instead of POST'ing with a form is potentially viable.
Here's what that might look like:
<?php
$row_num = 0;
while ($row = $result->fetch_assoc))
{
echo '<img src="button1.png" />';
echo '<img src="button2.png" />';
echo '<img src="button3.png" />';
echo $row["cName"], '<br/>', PHP_EOL;
$row_num++;
}
?>
Hope that helps!

Based on the comment by mcgraphix, I eliminated the form entirely and changed all the input to links and appended the button id and row id to each link, as shown below:
while ($row = $result->fetch_assoc))
{
echo '<img src="button1.png">';
echo '<img src="button2.png">';
echo '<img src="button3.png">';
echo $row["cName"], '<br/>', PHP_EOL;
}
Thanks, mcgraphix! :)
PS - As this posted, I saw basically the same answer by xjstratedgebx, so thank you as well!

This might seem a bit of a strange idea but you can just use submit buttons for each button and then style the image over top of the button. The good thing about submit buttons is that only the button that is pressed is sent through the request, so effectively you only need one form for the whole page, and a unique name for each button.
<form action="nextpage.php" method="POST">
while ($row = $result->fetch_assoc))
{
echo '<button class="img-button b1" name="$row["cName"]button1" />';
echo '<button class="img-button b2" name="$row["cName"]button2" />';
echo '<button class="img-button b3" name="$row["cName"]button3" />';
echo $row["cName"], '<br/>', PHP_EOL;
}
</form>
I don't know PhP so not sure if that compiles, but hopefully you get the idea that as long as the buttons have unique names, only one name will be sent through the request.
Then in your style sheet something like the following (not tested):
.img-button {
height: 20px;
width: 20px;
}
.button1 {background-image: url('button1.png');}
.button2 {background-image: url('button2.png');}
.button1 {background-image: url('button2.png');}
Hope that is useful!

How do I run a PHP code when user submit data with html

I wrote a piece of code, when the user click on submit button it send a string to PHP and then my code will run a Mysql query (based on the submitted string) and then using file_put_content it will upload the mysqli_fetch_array result to the file.
All I want to do is without refreshing the page it submit the value to php form and run the code then show Download From Here to the user.
How should I do that using javascript or jQuery ?
if(#$_POST['submit']) {
if (#$_POST['export']) {
$form = $_POST['export'];
echo $form;
$con1 = mysqli_connect("localhost", "root", "", "test_pr");
$sql2 = "SELECT email FROM `my_data` WHERE email LIKE '%$form%'";
$result2 = mysqli_query($con1, $sql2);
$rows = array();
while ($row = mysqli_fetch_array($result2, MYSQLI_ASSOC)) {
$rows[] = $row['email'] . PHP_EOL;
}
$nn = implode("", $rows);
var_dump($rows);
echo $nn . PHP_EOL;
$file = fopen("export.csv", "w");
file_put_contents("export.csv", $nn);
fclose($file);
}
}
?>
<html>
<form enctype="multipart/form-data" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method=post>
<input name="export" type="text" value="example" /> Export Address<br/>
<input name="submit" type="submit" value="submit" />
Download From Here
</form>
</html>

Assuming you know how to include jquery, you would first bind a submit handler to the submit button, (I've added an id to make it easier) and prevent the default submit action. Then add an AJAX post request to the handler. This will post to your php file. Have that file echo out your link, then have the ajax callback function append it to the desired element. Something like this:
<form enctype="multipart/form-data" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" id="form1" //Add an id to handle with >
<input name="export" type="text" value="example" /> Export Address<br/>
<input name="submit" type="submit" value="submit" />
Download From Here
</form>
<script>
$("#form1").submit(function (event) {
event.preventDefault();
$.post("//path of your php file here",{inputText: $("input[type='text']")},function (returnedString) {
$("#whereToPutReturnedString").append(returnedString);
});
});
</script>
Also, if you want to just show the link when the button is clicked, do the following:
<script>
$("input[type='submit']").submit(function () {
$("#idOfElementToPlaceLink").append("Your anchor text");
});
</script>
or you could just have it hidden with css or jquery and do $("#theId").show();
If you need more help, just holler!

How can I reloaded URL link, that it stay the same after I click on submit button

I have simple form:
<div class="form-style-2">
<form action="" name="formular" id="formular" method="GET">
<label for="actual_position"><span>From: <span class="required"></span></span><input name="actual_position" type="text" maxlength="512" id="actual_position" class="searchField"
<?php if(!empty($actual_position)){ ?>
value="<?php echo $_GET['actual_position']?>"
<?php
}else {
?> value = ""; <?php
} ?>/></label>
<label for="final_position"><span>To: <span class="required"></span></span><input name="final_position" type="text" maxlength="512" id="final_position" class="searchField" <?php if(!empty($final_position)){ ?>
value="<?php echo $_GET['final_position']?>"
<?php
}else {
?> value = ""; <?php
} ?>/></label>
<input type="submit" value="Find path" />
And another multiselect in form who gets values form url link and compere with database and get som results. Here is a code:
<table width= "570px">
<tr><td width="200px" style="align:center"><b>Waypoints:</b> <br>
<tr><td width="370px"><select style="float:center; margin-left:5px" multiple id="waypoints">
if(!empty($urls)){
foreach($urls as $url){
if($result = $conn->query("SELECT * FROM $table where $ID = '$url' "));
$atraction = $result->fetch_array(); ?>
<option value="<?php echo $atraction['lat']. "," . $atraction['lon']; ?>"
> <?php echo "<b>".$atrction['City']. ", " . $atraction['Name'];?> </option>
<?php
}
}
?>
</select></td></tr>
<br>
</table>
</form>
And getting ID-s from url code:
if(!empty($_GET[$ID])){
$urls = $_GET[$ID];
foreach($urls as $url){
// echo $url;
}
}
... and after submit, it Post to URL some variables like this:
http://127.0.0.1/responsiveweb/travel.php?actual_position=Paris&final_position=Praha&ID[]=23&ID[]=15&ID[]=55
... very important for me are ID-s values ... but when I change for example actual position and then submit I lost my ID-s and I get something like this: http://127.0.0.1/responsiveweb/travel.php?actual_position=Berlin&final_position=Praha
Can you help me how to get after clicking on submit button full url link? Thanks

I had some trouble understanding your question OP, but I think I understood somehow what you ment, so I decided to try giving you a answer.
I have re-written your code, and tried to make somehow better code-structure. I have also used form method POST in my example, so you can see how you can change the get data on the redirection url.
See my code example here: http://pastebin.com/wQ7QCBmt
I also decided to use the form method POST instead of GET, so you can easily do back-end tasks, and extend your link if neccessary. You could also add more data to the link even when using GET. You could add an hidden input inside your form, example:
<input type="hidden" name="more_data" value="a_value" />

send php post variable to url using javascript when button is clicked

I have a php page which gets $page and $user using post method, I also have a button that i want, to open a URL in the same window using $page and $user variables when clicked, to use them with $_GET[] function.
i want my URL be like:
http://www.test.com/test.php?page=$page&user=$user
my code is like this:
<?php
$page=$POST_['page'];
$user=$POST_['user'];
<?
<html>
<head>
function openurl() {
var user=<?php echo "$user";?>;
var page=<?php echo "$page";?>;
open('www.test.com/test.php?page='+page'&user='+user,'_self');
}
</head>
<body>
<button onclick="openurl()" type="button">open url</button>
</body>
</html>

There is no need for scripting at all
If you want GET:
<?php
$page=$GET_['page']; // should be sanitized and you can use REQUEST for either
$user=$GET_['user'];
$parm = "page=".$page."&user=".$user;
?>
Open URL
If you need to post:
<form action="test.php" method="post">
<input type="hidden" name="page" value="<?php echo $page; ?>"/>
<input type="hidden" name="user" value="<?php echo $user; ?>"/>
<input type="submit" value="Open URL" />
</form>

Change these lines:
<?php
$page=$POST_['page'];
$user=$POST_['user'];
<?
....
var user=<?php echo "$user";?>;
var page=<?php echo "$page";?>;
open('www.test.com/test.php?page='+page'&user='+user,'_self');
to this:
<?php
$page=$_POST['page']; //incorrect $_POST declaration
$user=$_POST['user']; //incorrect $_POST declaration
?> //php tag incorrectly closed
....
var user=<?php echo $user;?>; //echoing a variable not string (no need for quotes)
var page=<?php echo $page;?>; // echoing a variable not string (no need for quotes)
open('www.test.com/test.php?page='+page+'&user='+user,'_self'); // link was broken, forget to put '+' after page variable in link.

You can create a form and via Javascript just run YOURFORMNAME.submit();
Use href in javaScript to move to another location:
location.href="www.test.com/test.php?page='+page'&user='+user"

How to submit one form out of multiple with javascript

On my website I have a big list of all the letters people can view.
For every letter there is a form which sends some data from the letter to the next page. What I want to do is to submit the form with a link, and not with a button.
As far as I know, that is not possible with PHP. So i tried making what i want in Javascript.
My programming experience in Javascript is litterly 0%. I need some help with this :)
This is the code I'm using:
<script type="text/javascript">
function submitform()
{
document.forms["brief_weergeven"].submit();
}
</script>
<form id='brief_weergeven[]' action='<?php echo $main; ?>beveiligd/achterbanner/nieuwsbrief.php' method='POST'>
<input type='hidden' name='nummer' value='<?php echo $brieven[0]; ?>'>
<input type='hidden' name='datum_maand' value='<?php echo $maand_getal; ?>'>
<input type='hidden' name='datum_jaar' value='<?php echo $jaar; ?>'>
<a href="javascript: submitform()" class='button'>Nieuwsbrief <?php echo $brieven[0]; ?> (<?php echo $maand .' ' .$jaar; ?>)<BR></a>
</form>
This code runs for every letter. As you can see, I'm using a array to give all the forms a seperate ID. The only thing is that i have no idea how to let javascript know which forum i submitted.
How can I do this? Please remember that i know nothing about javascript, so please explain what you're doing in your answer.

You dont need javascript to do this, just use css to make your button look like a link:
Css:
button {
border:none;
padding:0;
background: none;
color: blue;
text-decoration: underline;
cursor: pointer;
}
html:
<button type="submit">Submit</button>

You can usedocument.getElementById('form-id')
And event handler like this
var form = document.getElementById('your-form-id');
form.onsubmit = function(){
// code
}

user574632 gave you a nice alternative. Still even want to use JavaScript you can try below.
Use the jQuery onclick method having the id attribute of the link as selector.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#submit_link").on("click", function(){
var form = $(this);
var url = form.attr("action");
var data = form.serialize();
$.post(url, data);
});
});
</script>
<form id='brief_weergeven[]' action='<?php echo $main; ?>beveiligd/achterbanner/nieuwsbrief.php' method='POST'>
<input type='hidden' name='nummer' value='<?php echo $brieven[0]; ?>'>
<input type='hidden' name='datum_maand' value='<?php echo $maand_getal; ?>'>
<input type='hidden' name='datum_jaar' value='<?php echo $jaar; ?>'>
<a href="#" id="submit_link" class='button'>Nieuwsbrief <?php echo $brieven[0]; ?> (<?php echo $maand .' ' .$jaar; ?>)<BR></a>
</form>