How to use image as value for radio button

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Misty Corning

Would I be able to just have them labeled instead of pictures? I needed female and male for gender (the form I sent)

Misty Corning

So I have to have an image set to each of the fields, correct? It all depends on what image I have set them to? That's how I'm understanding it.

SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Misty Corning

Thank you; however, I meant to "hide" the radio button. I was able to get the caption next to the buttons. Does it have to be an image in order to do this?

Use CSS from Julian Hansen to hide the button, namely:

<style>
input[type="radio"] {
  display: none;
}
</style>

see #a42355323

ASKER

Thanks Olaf,

I am just trying this solution. I am sure that it will work. I will write again after trying in case I get any problem.

Regards
Saxena

SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Does it have to be an image in order to do this?

No it can be text but your original question was about if you could make it a picture instead of text so we seem to be going around in circles a bit.
With reference to your opening question do you want to use pictures or not?

ASKER

Hello Olaf,

Following is my php. As you can see that I am using table so that I get the form in tabular format. Do you want me to add your code in place of ".$_POST['grade']." ?
Regards
Saxena

<?php
/**
* Simple example script using PHPMailer with exceptions enabled
* @package phpmailer
* @version $Id$
*/

require 'class.phpmailer.php';

try {
$mail = new PHPMailer(true); //New instance, with exceptions enabled

$to = "emailAddrss@domain.com";
$mail->AddAddress($to);
$mail->From = $_POST['email'];
$mail->FromName = $_POST['name'];
$mail->Subject = "Contact Form";

$body = "<table>
<tr>
<th colspan='2'>Contact Form</th>
</tr>

<tr>
<td style='font-weight:bold'>Full Name:</td>
<td>".$_POST['name']."</td>
</tr>

<tr>
<td style='font-weight:bold'>E-Mail:</td>
<td>".$_POST['email']."</td>
</tr>

<tr>
<td style='font-weight:bold'>Mobile:</td>
<td>".$_POST['mobile_number']."</td>
</tr>

<tr>
<td style='font-weight:bold'>Age:</td>
<td>".$_POST['age']."</td>
</tr>

<tr>
<td style='font-weight:bold'>City: </td>
<td>".$_POST['city']."</td>
</tr>

<tr>
<td style='font-weight:bold'>Select Method: </td>
<td>".$_POST['method']."</td>
</tr>

<tr>
<td style='font-weight:bold'>Grade of Baldness: </td>
<td>".$_POST['grade']."</td>
</tr>

<table>";

$body = preg_replace('/\\\\/','', $body); //Strip backslashes
$mail->MsgHTML($body);

$mail->IsSMTP(); // tell the class to use SMTP
$mail->SMTPAuth = true; // enable SMTP authentication
$mail->Port = 25; // set the SMTP server port
//$mail->Host = "saxena@aspirehairrestoration.com"; // SMTP server
//$mail->Username = "name@domain.com"; // SMTP server username
//$mail->Password = "password"; // SMTP server password

$mail->IsSendmail(); // tell the class to use Sendmail
$mail->AddReplyTo("saxena@aspirehairrestoration.com");
$mail->AltBody = "To view the message, please use an HTML compatible email viewer!"; // optional, comment out and test
$mail->WordWrap = 80; // set word wrap

$mail->IsHTML(true); // send as HTML
$mail->Send();
echo 'Thank You. Your form has been submitted. Please check your mail for details.';
} catch (phpmailerException $e) {
echo $e->errorMessage();
}

?>

SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

ASKER

Thanks Olaf,

Sorry for the delayed reply as I was little engaged with Julian, who really has helped me a lot. I tried the solution you gave me initially but I am not getting the images. My html and php is as follows:

<form name="contactForm" action="php/email_handler.php" method="POST">
    <table>
<tbody>
<tr>
<th>Grade of Baldness*:</th>
<td><input id="bald" class="form-control" name="grade"  required type="radio" value="2" required/>2<img 

src="http://www.aspirehairrestoration.com/wp-content/uploads/2011/09/grade_2.png" alt="no image"></td>
<td><input class="form-control" name="grade" value="3" required type="radio"/>3<img 

src="http://www.aspirehairrestoration.com/wp-content/uploads/2017/11/grade_3.png" alt="no image"></td>
<td><input class="form-control" name="grade"  required type="radio" value="4"/>4<img 

src="http://www.aspirehairrestoration.com/wp-content/uploads/2017/11/grade_4.png" alt="no image"></td>
<td><input class="form-control" name="grade" required="" type="radio" value="5"/>5<img 

src="http://www.aspirehairrestoration.com/wp-content/uploads/2017/11/grade_5.png" alt="no image"></td>
<td><input class="form-control" name="grade" required="" type="radio"value="6"/>6<img 

src="http://www.aspirehairrestoration.com/wp-content/uploads/2017/11/grade_6.png" alt="no image"></td>
<td><input class="form-control" name="grade" required="" type="radio" value="7"/>7<img 

src="http://www.aspirehairrestoration.com/wp-content/uploads/2017/11/grade_7.png" alt="no image"></td>
</tr>
</tbody>
</table>
    <input class="button" type="submit" value="Calculate" />
</form>
<?php 
echo "grade:";
switch (isset($_POST['grade']) ? $_POST['grade'] : 'none')
{
    case '2':
    echo('<img src="http://www.aspirehairrestoration.com/wp-content/uploads/2011/09/grade_2.png">');
    break;
    case '3':
    echo('<img src="http://www.aspirehairrestoration.com/wp-content/uploads/2017/11/grade_3.png">');
    break;
    case '4':
    echo('<img src="http://www.aspirehairrestoration.com/wp-content/uploads/2017/11/grade_4.png">');
    break;
    case '5':
    echo('<img src="http://www.aspirehairrestoration.com/wp-content/uploads/2017/11/grade_5.png">');
    break;
    case '6':
    echo('<img src="http://www.aspirehairrestoration.com/wp-content/uploads/2017/11/grade_6.png">');
    break;
    case '7':
    echo('<img src="http://www.aspirehairrestoration.com/wp-content/uploads/2017/11/grade_7.png">');
}
?>

Can you explain what you expected the script in your last post to do.

ASKER

Hi Julian,

If you remember my other question, in my form I have given value for each radio button and an image to display in the form. When the form is submitted, the radio button value comes to me. What I want is that the radio button value as well as the image that is assigned to that value, both should come to me.

SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Having the code of both form and form evaluation is ok, but is it really that way? Is that code email_handler.php?

In my phpfiddle I showed you can use a switch to specify the image source for every case. In case the values are 2-7, why don't you simply use this as part of the image file name as is?

Your code actually works as is, when I put it into phpfiddle: http://phpfiddle.org/lite/code/5r47-mf6i
The only thing I changed is the form action set to "#", which in short means the same script creating the form evaluates the form submit.

So I assume you only have split code in HTML form and the email_handler.php. Of course, the code creating the mail has to be in the script called by the action of the form.

Besides that, as said you can simplify creating the image src without switch here:

if (isset($_POST['grade']))
{
    echo('<img src="http://www.aspirehairrestoration.com/wp-content/uploads/2011/09/grade_".$_POST['grade'].".png">');
}

It's recommended to check the submitted value range is really within expected and allowed image numbers, as anyone wanting to hack the server simply would submit anything else but 2-7, eg javascript code. For that matter, while it is very verbose, the switch statement really checks the values are correct and displays no image for any other submitted value than "2" to "7". So you can stay with it, too.

Perhaps just look into access log on your server to see what is called by the form action if you start with action="php/... vs starting with action="/php/... vs starting with action="~/php/... or action="./php...

If you want to be sure what script is called use an absolute URL, it just makes it harder to test with localhost.

Bye, Olaf.

ASKER

Thanks Olaf,

I will try your simplified code and get back.

Bye, Saxena

I recommend that you sanitize the POST variables as well (process and filter the inputs to make them safe) to prevent an XSS attack.

SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

ASKER

Can you please teach me how to sanitize and filter. I am learning php from experts like you people.

Regards
Saxena

Could we do that in a separate question? It really is aseparate topic and deserves an onw entry in EEs knowledgebase.

If you now have solved the problem of adding the selected image to a mail body, could you please close the question? Or clarify what's still not working and missing aside of the sanitizing user input?

Bye, Olaf.

SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

ASKER

Hello Olaf,

Sorry for delayed reply as I had some deadlines to meet. I tried your simplified solution. Following is my php:

<td>if (isset($_POST['grade']))
{
    echo('<img src="http://www.aspirehairrestoration.com/wp-content/uploads/2011/09/grade_".$_POST['grade'].".png">');
}</td>

But after submitting the form I am getting the following error.
( ! ) Parse error: syntax error, unexpected '' (T_ENCAPSED_AND_WHITESPACE), expecting identifier (T_STRING) or variable (T_VARIABLE) or number (T_NUM_STRING) in C:\wamp64\www\calculator_form\php\email_handler_1.php on line 67

Line 67 is the one that I have written above.

Regards
Saxena

You mix HTML and PHP without using the <?php and ?> tags to mark what is PHP. Also look back to post ID 42362842 in the last code section of it, I changed my echo code to your already existing assignment code to $body. This requires no echo but string concatenation.

The echo is just there to demonstrate the img tag rendered in the browser, you want it in your email, thus you want it in your $body variable.

It's really just a small step to change from echo to string concatenation, it's like here:

<p><?php echo $someexpression; ?></p>

<?php
...
$paragraph= "<p>".$someexpression."</p>";
...
?>

And then at some point echo the $paragraph variable or use it as a parameter of eg the $mail->MsgHTML() setter.

You're working on something I already did for you earlier. You've got to get a bit of understanding on how things relate, you're more like copy&pasting things until they work. Any echo always just goes to the output arriving at a browser, to get that output into a variable you use dot (string concatenation) to other string parts to add it together and in the end assign that string to the $body variable used in the mail, instead of echoing it. So echo can't be part of the solution 1:1, can it?

As you have a hard time making these observations and conclusions, you lack a serious skill to program anything, even if it's taught to you in baby steps. I'll try once more here:

Yyou have something like this in your current mail generating code:

$body = "<table>
<tr>...

This is where it all start, it goes on for many lines and ends in

...<table>";

All these lines in the editor are one line of PHP code, it's an assignment of a string value to $body via the = operator. You can't have an echo inside an assignment.

You want the image (<img>) tag to go in there to become part of $body and get into the mail HTML body.

What you have in there is lines like this:

<td>".$_POST['age']."</td>

They just end up as a td (table data tag) containing some simple text or number, in the case of the age.
Putting in this

<td>".$_POST['grade']."</td>

You would just get the grade number in your mail. You want more this time, you want that grade number as just the last part of your image file name or URL, which in itself also is just the value of the src attribute of an image tag.

So what you need there is, as I already gave back 4 days ago:

<td><img src='/yourimagesdirectory/".$_POST['gender'].".jpg'></td>

And since you now posted your image URLs in your sample code, this more concretly is:

<td><img src='http://www.aspirehairrestoration.com/wp-content/uploads/2011/09/grade_".$_POST['grade'].".png'></td>

Now if that still doesn't work, you most likely miss your HTML form having the necessary radio input tags named "grade" and so $_POST['grade'] is not set.

Bye, Olaf.

The closing and starting double quotes should've been single quotes to encapsulate the string.

Next, the PHP tag should be there if it is being mixed in with HTML.

Optional syntax:

echo is not actually a function (it is a language construct), so you are not required to use parentheses with it.

http://php.net/manual/en/function.echo.php

Fixed code:

<td>
<?php 
if (isset($_POST['grade']))
{
    echo '<img src="http://www.aspirehairrestoration.com/wp-content/uploads/2011/09/grade_'.$_POST['grade'].'.png">';
}
?>
</td>

Don't forget to sanitize those inputs to avoid a XSS attack.

SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

ASKER

Hello Olaf,

After suggestions from Julian, following is my final php.

$mail->From     = $from;
  $mail->FromName = 'Aspire';
  $mail->Subject  = "Cost Calculator Form";
  
  // WE EXTRACT THE FORM VARIABLES TO SAFE VERSIONS 
  $name   = isset($_POST['name'])          ? $_POST['name']          : '(no name specified)';
  $email  = isset($_POST['email'])         ? $_POST['email']         : false;
  $mobile = isset($_POST['mobile_number']) ? $_POST['mobile_number'] : '(no mobile specified)';
  $age    = isset($_POST['age'])           ? $_POST['age']           : '(no age specified)';
  $city   = isset($_POST['city'])          ? $_POST['city']          : '(no city specified)';
  $method = isset($_POST['method'])        ? $_POST['method']        : '(no method specified)';
  $grade  = isset($_POST['grade'])         ? $_POST['grade']         : 0;

  // SET UP THE FORM USING HEREDOC
  $body = <<< HTML
<table>
  <tr>
    <th colspan='2'>Contact Form</th>
  </tr>
  <tr>
    <td style='font-weight:bold'>Full Name:</td>
    <td>{$name}</td>
  </tr>
  <tr>
    <td style='font-weight:bold'>E-Mail:</td>
    <td>{$email}</td>
  </tr>
  <tr>
    <td style='font-weight:bold'>Mobile:</td>
    <td>{$mobile}</td>
  </tr>
  <tr>
    <td style='font-weight:bold'>Age:</td>
    <td>{$age}</td>
  </tr>
  <tr>
    <td style='font-weight:bold'>City: </td>
    <td>{$city}</td>
  </tr>
  <tr>
    <td style='font-weight:bold'>Select Method:</td>
    <td>{$method}</td>
  </tr>
  <tr>
    <td style='font-weight:bold'>Grade of Baldness:</td>
    <td>{$grade}</td>
  </tr>
<table>
HTML;

And this is my html:

<tr>
<th>Grade of Baldness*:</th>
<td><input id="bald" class="form-control" name="grade"  required type="radio" value="2" required/>2<img src="http://www.aspirehairrestoration.com/wp-content/uploads/2011/09/grade_2.png" alt="no image"></td>
<td><input class="form-control" name="grade" value="3" required type="radio"/>3<img src="http://www.aspirehairrestoration.com/wp-content/uploads/2017/11/grade_3.png" alt="no image"></td>
<td><input class="form-control" name="grade"  required type="radio" value="4"/>4<img src="http://www.aspirehairrestoration.com/wp-content/uploads/2017/11/grade_4.png" alt="no image"></td>
<td><input class="form-control" name="grade" required="" type="radio" value="5"/>5<img src="http://www.aspirehairrestoration.com/wp-content/uploads/2017/11/grade_5.png" alt="no image"></td>
<td><input class="form-control" name="grade" required="" type="radio"value="6"/>6<img src="http://www.aspirehairrestoration.com/wp-content/uploads/2017/11/grade_6.png" alt="no image"></td>
<td><input class="form-control" name="grade" required="" type="radio" value="7"/>7<img src="http://www.aspirehairrestoration.com/wp-content/uploads/2017/11/grade_7.png" alt="no image"></td>
</tr>

I already tried the solution you have given above but received the error message I already posted yesterday. Please tell me what wrong I am doing.

Regards
Saxena

Did you really try my newest posted $body assignment? Not the echo variant. My post I referred to seems deleted, I don't know why.

Stay with Julians HEREDOC solution, it's fine.

Notice I made phpfiddle samples, which run on that site and I think you can't send mail from there (that would allow the site to be misused), so the option I had to demo how to put together an img tag string and to echo it, so the browser shows it. The only interesting part ever was after "echo", the expression creating the img tag you need in your mail.

Bye, Olaf.

The single quote comment made earlier by me wasn't a suggestion but rather a correction of Olaf's previous code that threw the error (missing single quotes).