Develop Reference

Register which image has been clicked in form

I have multiple images in a HTML document and I want them to render unique values when they are clicked (in some retrievable way). I have tried having them as form elements, like so:
<form id="myform" method="post" action="">
<input type="hidden" name="action" value="submit" />
<div class="flex-item"><input type="image" name="submit" value="alt1" alt="alt1" src="images/<?php echo $data[$counter] ?>"></div>
<div class="flex-item"><input type="image" name="submit" value="alt2" alt="alt2" src="images/<?php echo $data[$counter+1] ?>"></div>
</form>
In this case I would like to access the POST data with PHP, something like:
if (isset($_POST['action'])) {
echo '<br />The ' . $_POST['submit'] . ' button was pressed';
}
But this doesn't work, as it's the image input type, which doesn't seem to be able to send data. I have tried using a button with the image as background, but this way I would have to adapt the size of each image to make it fit in the button (which I want to avoid, as I have many images).
I know I could use an image as a submit button with Javascript, but as I said, information about which image has been clicked also needs to be available somehow. Any ideas about the best solution?

HTML / CSS - Only way.
Set up the CSS to hide the radio buttons:
.hidden {
display: none !important;
}
In your form, use radio buttons to track which image is selected. Put the image inside of a label that is "for" the relevant radio button . Be sure to put whatever info you want in PHP inside the value attribute of the radio buttons:
<form method="post" name="myForm">
<div>
<input type="radio" name="image" value="image1" id="image1" class="hidden">
<label for="image1"><img src="path-to-your-image.jpg"></label>
</div>
<div>
<input type="radio" name="image" value="image2" id="image2" class="hidden">
<label for="image2"><img src="path-to-your-other-image.jpg"></label>
</div>
<div>
<input type="submit" name="save" value="Save Image Selection">
</div>
</form>
If you need the form to submit when they click an image, then add this bit of javascript:
<script>
// No-conflict-mode-safe document ready function (waits until page is loaded to run, which ensures radio buttons are available to bind to)
jQuery(function($) {
// Hide / suppress the submit button
$('input[type="submit"]').closest('div').hide();
// Bind to change event for all radio buttons
$('input[type="radio"]').on('change', function() {
// Submit the form ("this" refers to the radio button)
$(this).closest('form').submit();
});
});
</script>
Then, when you submit this form, in your PHP you'd be able to do this:
$image = $_POST[ 'image' ]; // 'image' is the name of the radio buttons
var_dump( $image );
// Will result in "image1" or "image2", etc - whatever "value" you assigned to the radio buttons

When you use your code, you get the submit param (because of the button's attribute name) in your $_POST object. The value will be the value attribute.
So you can check this like this:
<form id="myform" method="post" action="">
<input type="hidden" name="action" value="submit" />
<div class="flex-item"><input type="image" name="submit" value="alt1" alt="alt1" src="images/img1"></div>
<div class="flex-item"><input type="image" name="submit" value="alt2" alt="alt2" src="images/img2"></div>
</form>
<?php
if (isset($_POST['submit'])) {
if ($_POST['submit'] == 'alt1') {
echo 'alt1 clicked';
// First button clicked
}
else {
echo 'alt2 clicked';
// second button clicked
}
}
?>

Form wont submit via ajax

I have a form within a div that I want to submit via another page which will run the query and then return to the first page again all within the div which is in a larger page.
I have put the following javascript at the top of the page:
<script name='addactivity'>
function submitForm() {
$.ajax({type:'POST', url: 'activity_new.php', data:$('#newactivity').serialize(), success: function(response) {
$('#newactivity').find('.activities').html(response);
}});
return false;
}
</script>
and have placed the form in the div as follows:
<form id='newactivity' method="post">
<b>Activity Number:</b><input type=text name='activitynumber' class='textborder'>
<b>Title:</b><input type=text name='activitytitle' class='textborder'>
<b>Time (mins):</b> <input type=text name='activitytime' class='textborder'>
<b>Leaders:</b> <input type=text name='leaders' class='textborder'><br>
<b>Description:</b><textarea name='activitydescription' class='textareaborder'></textarea>
<input type='submit' value='Submit' id='submit'></form>
<div id="activities"></div>
The submit button does not appear to do anything. It should post the values to activity_new.php which looks like:
<?php
session_start();
$input2=$_SESSION[ 'unitid' ];
$meetingid=$_POST['meetingid'];
$activitynumber=$_POST['activitynumber'];
$activitytitle=$_POST['activitytitle'];
$activitytime=$_POST['activitytime'];
$leaders=$_POST['leaders'];
$activitydescription=$_POST['activitydescription'];
include 'connect_db.php';
$q1c="INSERT into activities (meetingid, unitid, activitynumber, title, description, time, leaders) VALUES ('$meetingid', '$input2', '$activitytitle', '$activitydescription', '$activitytime', '$leaders')";
$r1c = mysqli_query($dbc,$q1c);
echo $meetingid;
echo $activitynumber;
echo $activitytitle;
//header("location:editmeeting.php?id=$input2");
?>
I currently have the javascript on the main page that contains the divs but have also tried it at the top of the page with the form in. I've also tried these two combinations with the onsubmit = "return submitForm();" as onclick = "return submitForm();" on the button itself.

as per your code when you click on button it will not fire onsubmit() event .
if you change button type to submit it will work as you have added return false to your function
<input type='submit' value='Submit'>
Or use below code .you can use button click event to submit form via ajax using jquery
HTML
<input type='button' value='Submit' id="submit">
Jquery
$(document).ready(function(){
$(document).on('click','#submit',function(){
$.ajax({type:'POST', url: 'activity_new.php', data:$('#newactivity').serialize(), success: function(response) {
$('#newactivity').find('.activities').html(response);
}});
});
});
NOTE : from below code in success function . there is no element named '.activities' in your form. make sure to use correct selector attribute.
$('#newactivity').find('.activities').html(response);

Simply change input type:
<input type='submit' value='Submit'>
^^^^^

Open a new window using data from input form

In a input form in a HTML file, the user is supposed to put an URL (let's call it thislink). Then I want, when the user clicks on the submit button, to open a new window whose URL integrates thislink, that is its URL should be: '/selection/yes/?value='+thislink'.
Here are 2 tentatives of code:
1st tentative:
<form id="urlarticle">
<input type='text' name='thislink'>
<input type='submit' value='Select' onclick = function() {window.open('/selection/yes/?value='+thislink)};>
</form>
2nd tentative:
<form id="urlarticle">
<input type='text' name='thislink'>
<input type='submit' value='Select'>
</form>
<script type='application/javascript'>
$("#urlarticle").submit(function() {
window.open('/selection/yes/?value='+thislink);
});
</script>
But both tentatives are not working, any help to get the right way to write it appreciated!

Since you tagged jQuery, you could do it like this:
http://jsfiddle.net/729uh/
Javascript:
$("#urlarticle").submit(function() {
var linkValue = $('input[name="thislink"]').val();
window.open('/selection/yes/?value='+linkValue);
});
Html:
<form id="urlarticle">
<input type='text' name='thislink'/>
<input type='submit' value='Select'/>
</form>
What this does is:
use jQuery to select the input that has a name attribute with value thislink
take the value that was written in it
append that value to your link

show and hide div after submiting an action when checkbox is check and uncheck

I am trying to show or hide div after submitting an action. so let say I have textarea and I put "example" there then checked the checkbox. after submitting, the "receipt.php" page must display "example" , and if I unchecked the checkbox and submit, the receipt.php page must hide the "example". I tried searching similar to my problem but I really don't have idea how to solve it. I have this code so far but i dont have any codes in "receipt.php" since I really don't have idea. pls help me
<form method ="POST" action ="receipt.php">
<textarea name ="comment"></textarea><br>
<input type="checkbox" id="checkbox" value ="1" >Show this comment in receipt<br>
<input type ="submit" value ="Print">
</form>

You don't need the server response to recognize if the checkbox was checked unless you have some validation on server side. If using JQuery, you can do this:
$('#checkbox').change(function(){
$('#your_div').toggle();
});
If you want to rely on what your server says you need to return something to your ajax call.
for example {response: true/false}

In Html:-
<form method ="POST" action ="receipt.php">
<textarea name ="comment"></textarea><br>
<input type="checkbox" name="reciept-chk" id="checkbox" value = "1" >Show this comment in receipt<br>
<input type ="submit" value ="Print">
</form>
In receipt.php:
<?php
..//recept.php
if(isset($_POST['reciept-chk'])){
// Write Code example here
}
?>
If you want to validate it client side before posting your value in receipt.php then
you can simply validate by piece of jquery.
$(document).ready(function(){
$('#checkbox').change(function(){
if ($('#checkbox').is(':checked')) {
$("#exampleDiv").show();
} else {
$("#exampleDiv").hide();
}
});
});
Please avoide toggle() as it deprecated in 1.8

Here is the code you'll need in your unique PHP file :
<form method="POST">
<textarea name="comment">
<?php (isset($_POST['checkbox1']) && $_POST['checkbox1'] == '1') ? echo "Example"; : echo ""; ?>
</textarea>
<br>
<label for="checkbox1">Show this comment in receipt</label>
<input type="checkbox" id="checkbox1" name="checkbox1" value="1" />
<br>
<input type="submit" value="Print" />
</form>
Replace what you want in place of "Example".

If you are using javascript only, you might try something like this:
<script>
function show(){
if(form.toggledisplay.checked == false){
document.getElementById('example').style.display = "none";
}
else{
document.getElementById('div').style.display = "block";
}
}
</script>
<form method = "POST" action="receipt.php" onsubmit="show()">
<textarea name = "comment"></textarea><br>
<input type="checkbox" name="toggledisplay" id="checkbox" value = "1" >Show this comment in receipt<br>
<input type = "submit" value = "Print">
</form>
<div id="example" style="display:none;">This is the div you want to show</div>
If you are populating the contents of the div from the receipt.php file, you could make a post request to it, when the onsubmit() function is fired and fill the contents of the div like:
document.getElementById('div').innerHTML = "Result from the get/post request"
Hope this points you in the right direction.

form with 2 buttons need to call different functions based on value

I have a page which has lot of post data in the url.
For example,
www.test.com/test.php?userid='tester'&name=test&so on
The above page has a form that has something like this:
<?
$set=get_value_set;
if($set ==1) {
$set_value="SET";
} else {
$set_value="UNSET";
}
?>
<form name="test">
<input type="text" readonly="READONLY" value="<? echo $user_id; ?>">
<input type="submit" value="Email" name="submit_user">
<input type="submit" value="<? echo $set_value; ?>" name="submit_user">
<?
function setuser()
{
//sets the value
}
function email_user()
{
//sets the value
}
?>
there are two buttons above, when I click on email, i want the value of email button to be passed to the email_user function and do some proceesing there. Similar thing when I click on the set button.
NOTE:But in both cases above, I want the form to remain in the same page with the same post data in the url, but I also want the page to be refreshed so that the set button can have a value of Set or Unset depending on the database update.
Is this possible?

I would start to remove the submit action of each button and change them to
<input type="button" class="btn-Email" value="Email" name="submit_user" />
<input type="button" class="btn-Other" value="<? echo $set_value; ?>" name="submit_user" />
and then, using jQuery, you can easily process each click and submit the form
$(function() {
$(".btn-Email").click(function() {
// append anything you want
var but_email_value = $(this).val(), // or $(".btn-Email").val()
btn_other_value = $(".btn-Other").val();
$("form").submit();
});
$(".btn-Other").click(function() {
// append anything you want
var but_other_value = $(this).val(), // or $(".btn-Other").val();
btn_email_value = $(".btn-Email").val();
$("form").submit();
});
});

change your HTML
<form id="test" name="test">
...
<button onclick="email_user();">Email</button>
<button onclick="setuser();"><? echo $set_value; ?></button>
</form>
your functions should submit the form for you:
document.getElementById("test").submit();