I want to learn how to display combined images with help of checkboxes. Lets say I have three images, the first one is a car, second one is the same car with new wheels on the car, third is is the same car but with tinted windows, fourth one is the car with both assets combined. I always display the original image of the car on the website higher and new one(tuned one) lower, but lets say if I click the box for new wheels it shows the second image or if I click tinted windows box, third image appears. The images are prepared with photoshop and stored in folder, simple stuff.
<form action="#" method="post">
<input type="checkbox" name="option" value="Wheels">Wheels</input>
<input type="checkbox" name="option" value="Tint">Windows</input>
<input type="submit" name="submit" value="Submit"/>
</form>
<?php
if (isset($_POST['option'])){
// Display.
}
?>
I made a simple form so far and lets say as I said if I check Wheels, the wheels appear on the car, I uncheck it they disappear. But how could I do that if I check both boxes, the fourth image appear? I would like a solution that if I had more different check boxes, I would not need to code a lot of statements
I am not asking for a code, but just ideas how to do it, because my idea is to hard code many if statements.
EDIT: I am sorry if this is maybe a duplicate, but I strongly want to implement this using PHP, because lets say a person might click n different combinations of how the car should look if there are more than 20 checkboxes and he wants to add different components to the car.
You say that you want to do this using PHP.
As the comments state, and my duplicate flag indicates, this is not necessary.
You can look at the GD library about layering images, skip CSS completely, and just link to that image.
Another PHP based approach is this:
<!Doctype>
<html>
<head>
<style>
.base-car
{
position: relative;
top: 0;
left: 0;
}
.additions
{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<form action="#" method="post">
<input type="checkbox" name="option[]" value="Wheels">Wheels</input>
<input type="checkbox" name="option[]" value="Tint">Windows</input>
<input type="submit" name="submit" value="Submit"/>
</form>
<img src="car.jpg" class="base-car">
<?php
$option = filter_input_array (INPUT_POST,$filter_args); //see: http://php.net/manual/en/function.filter-input-array.php
foreach($option){
echo "<img src=\"$option.png\" class=\"additions\">";
}
?>
This takes your input, and create an <img> element for each option, with the CSS class that places it on top of the base car image.
This is just as easy to do in javascript
Disadvantage of PHP:
Cannot update without resending page
Extra overhead in whole page being sent every time the user updates
More network traffic
You are sending (in your example) potentially unfiltered data to your server.
Advantages of Javascript solution:
Real-time updates
Less network traffic
Only the image requests are sent to your server.
Other things to take in to account:
Do any of the images have mutual exclusivity (ie two different types of tyres)
Does the order of the options matter in relation to the layers?
Are the images the same size?
try this code:-
<form action="#" method="post">
<input type="checkbox" name="option[]" value="Wheels">Wheels</input>
<input type="checkbox" name="option[]" value="Tint">Windows</input>
<input type="submit" name="submit" value="Submit"/>
</form>
<?php
if (isset($_POST['submit'])){
foreach ($_POST['option'] as $item) {
echo '<img src="assets/images/'.$item.'.png" alt="'.$item.'" />';
};
}
Related
I made a form where user posts just links and text. No images and videos. I also did some kind of validations from server side in PHP. I also did very basic SQL INSERT for storing data in database. What I want is, that whenever user posts, it is always displayed on a website with different colors from database. I Googled it but got nothing. Any idea, or help on where to start?
Simple html form:
<form action="checkbox1.php" method="post">
<input name="name" id="name" type="text"/><br/>
<input type="text" id="name2" name="name2"><br/>
<input type="checkbox" id="checkbox" name="checkbox"><br/>
<input type="submit" id="submit" name="submit">
</form>
.postHolder:nth-child(5n+0) .post-text {
background: #8dc63f;
}
.postHolder:nth-child(5n+1) .post-text {
background: #009688;
}
.postHolder:nth-child(5n+2) .post-text {
background: #3f51b5;
}
.postHolder:nth-child(5n+3) .post-text {
background: #f44336;
}
.postHolder:nth-child(5n+4) .post-text {
background: #607d8b;
}
This example will work in your case, .postHolder is the class of the dive which will repeat for every post, and .post-text is class where you actually want to apply CSS, I have applied background color you can add whatever you want.
First of all, do you have predefined colors in the database?
if yes! Then you will need to send color as a parameter from the database using get or post method with your post.
Then you need to use that color and apply using javascript jquery or angular whatever your frontend is.
If you have colors in your stylesheet then you need to create predefined classes with different colors; apply them to your post dynamically.
But the second option is a bit clumsy and complex, always you will need to take which was last class you applied and then apply next class.
The third option is to use nth-child but this method has some limitations like you need to write a class for every child element.
When a form has multiple image inputs and the server side uses their names and/or values to distinguish which one was clicked, it works perfectly in FireFox. However, people often write the whole thing before finding out that HTML specifies that nothing has to be sent, and thus some browsers are not sending it.
It's not about sending any random object, but sending a pair as input_name=input_value. The best worst-case scenario example here would be what I've encountered: A list of elements all in one form and all accompanied by buttons with name="delete" value="<item_id>"
What can I do to fix this problem?
Per the HTML spec, clicking on an IMAGE input will return the parameters:
name.x=x-value and name.y=y-value where "name" is the value of the name attribute
with x-value and y-value corresponding to the click position.
Sure, the server code to deal with this will be a little annoying, but you could just check all the query parameter keys with a regular expression:
/^(.*)\.[xy]$/
to search for the IMAGE input keys to determine which IMAGE was clicked.
I tried with this sample:
<form action="#" method="GET">
<input type="text" name="t" value="Text here"><br>
<input type="image" name="a" value="1" src="http://sstatic.net/so/img/logo.png"><br>
<input type="image" name="b" value="2" src="http://www.gravatar.com/avatar/c541838c5795886fd1b264330b305a1d?s=32&d=identicon&r=PG"><br>
</form>
And I get the following urls:
FF 3.6: x.html?t=Text+here&b.x=19&b.y=17&b=2#
IE 8: x.html?t=Text+here&b.x=22&b.y=18
IE 7: x.html?t=Text+here&a.x=185&a.y=51
Opera 10: x.html?t=Text+here&a.x=107&a.y=53#
Chrome: x.html?t=Text+here&b.x=20&b.y=17&b=2#
So it seems that all the browsers are sending something image related, even if it isn't the image name directly. Since you need to scan for all the image names that you expect to see you can just scan for imagename.x instead. This seems to be how the spec indicates it should work.
The problem was half solved up to now: like here
But it didn't allow to get the value!
The correct answer is:
$('input[type=image]')
.unbind('mousedown')
.mousedown(function(){
$(this).after('<input type="hidden" name="'+$(this).attr('name')+'" value="'+$(this).attr('value')+'" />');
});
This code creates a hidden duplicate of the input when user starts clicking it. The unbind('mousedown') is to secure it happens once even if You put the code in multiple places in a weird application and it might be called more than once.
I recommend putting it in $(document).ready();
I think I am/was having a similar problem. I wanted to click on an thumbnail and have it enlarged on a different page. I was trying to do this with PHP alone but I finally had to use the tag with the . Worked great for FF3 and safari but the INPUT IMAGE values did not post for IE9 or FF9.
My work around was to put each image in its own form and then also use a hidden input to send the needed data.
<table>
<tr>
<td>
<form method="post" class="form_photo">
<input type="image" name="img_photo" value="does nothing in IE9 or FF9" />
<input type="hidden" name="photo" value="nameoftheimage.jpg" />
</form>
<form method="post" class="form_photo">
<input ...>
<input ...>
</form>
<form> ...
</td>
</tr>
Then I discovered the forms displayed vertical, making it very odd. CSS to the rescue.
.form_photo { display:inline; }
seems to have solved the vertical problem. Now the user can click on the thumbnail and the value now passes in all the browsers I have access to testing.
Using the type="image" is problematic because the ability to pass a value is disabled for some stupid lack of reason. Anyways & although it's not as customizable & thus as pretty, you can still use you images so long as they are part of a type="button".
<button type="submit" name="someName" value="someValue"><img src="someImage.png" alt="SomeAlternateText"></button>
Having looked at various similar questions, both on SO and elsewhere, I have a horrible feeling what I want to do is impossible, but here goes.
I have a page that is a table of text input rows. The user enters information on each row, and submits the data to a separate file, which creates a PDF.
The problem is that I need the user to be able to add rows to the table at will, since the amount of data can vary.
[Before you go there, I need to point out that I cannot use Javascript for any of this - I know it is easy to do in JS but the page needs to be accessible.]
Here is a very simplified version I just cobbled together to (hopefully) illustrate the point:
<?php
if (filter_has_var(INPUT_POST, 'add_rows')) {
$howmanyrows = filter_input(INPUT_POST, 'howmanyrows', FILTER_SANITIZE_NUMBER_INT);
//get all the data from table and put it in an array,
//then add 5 (or however many) new rows to said array.
}
else if (filter_has_var(INPUT_POST, 'send_data')) {
//get table data, add to session and redirect to other page with a header()
}
?>
<html>
<form action="" method="POST">
<table>
<?php //table rows added using an array of data
foreach ($data as $d): ?>
<tr><td><input type="text" value="<?php echo $d; ?>"></td></tr>
<?php endforeach; ?>
</table>
<input type="text" name="howmanyrows" value="5">
<input type="submit" name="add_rows">
<input type="submit" name="send_data">
</form>
...
</html>
As you can see, at the moment I have a clunky setup where there is just one form that encompasses the entire page, and submits the page to itself. Depending on the button that was clicked, a new row is added or the data is submitted to the PDF-creation page.
This is not ideal, for so many reasons. What I really want to be able to do is have two separate forms, or nested forms. But the former won't allow the input values to be submitted to both, and the latter is apparently bad form (no pun intended) and doesn't work.
Is it at all possible to make this do what I want it to do? Any suggestions for a different way to go about it?
I think you have the best non-javascript solution - certainly hte way I'd run with it.
One thing to make it easier is that you can use multiple inputs with the same name:
<input name="tablerow[]" type="text" value="A" />
<input name="tablerow[]" type="text" value="B" />
<input name="tablerow[]" type="text" value="C" />
And these come through the $_POST['tablerow'] as an array. The length of the array is the number of fields. Then add additional fields to that.
For accessibility, you should add a link at the top that allows the user to hop directly to the first "new" field - otherwise they need to tab through the entire form to get to the new field. (See my comment above about if JS is really unavoidable as you and they can avoid this scenario!)
This one has made me a lot of stress over the last couple of days. I am trying to set up a multi-page order form working with a CMS based on Typo3. However i am finding huge difficulties passing the session variables from a page to another. Session code is correct. I however suspect that i am not doing this accordingly to the CMS rulebook. So:
I have 4 pages in the order form. 4 .php files with 4 according .tpl files.
<form method="post" action="/index.php?puid=3&pageid=176">
<input type="radio" name="rubrik" onchange="toggleDiv('show',0);toggleDiv('check',0)" value="kfz" />KFZ
<br></br>
<input name="rubrik" id="immo" onchange="toggleDiv('show',1);toggleDiv('check',1)" type="radio" value="immobilien" class="static" />Immobilien
<input type="image" action="/index.php?puid=3&pageid=176" value="submit" src="/images/weiter.png" alt="Submit" style="float:right; margin-right:275px; margin-bottom:50px; margin-bottom:50px; margin-left:25px; text-align:left;" ></input>
</form>
This is my first form. In page1.tpl. page2.php starts like this:
<?php
session_start();
$_SESSION['Rubrik wahl'] = 'rubrik';
if (isset($_POST['rubrik'])){
$_SESSION['rubrik']=$_POST['rubrik'];
}
While in page.tpl i have:
<form method="post" action="/index.php?puid=3&pageid=177">
<textarea name="inhalt1" cols="40" rows="8" style="width:618px; height:200px;" onKeyDown="textCounter(document.inhalt.inhalt1,document.inhalt.counter,180)" onKeyUp="textCounter(document.inhalt.inhalt1,document.inhalt.counter,180)" ></textarea>
<input type="hidden" name="rubrik" value="<?php echo 'rubrik';?>"></input>
<br></br><br></br><br></br>
<input type="image" action="/index.php?puid=3&pageid=177" value="submit" src="/images/weiter.png" alt="Submit" style="margin-bottom:50px; margin-left:25px; text-align:left; float:right; margin-right:275px; margin-bottom:50px;"></input>
</form>
Now why does the 'rubrik' variable not pass from one page to another?
You are right. You are not doing it the way, you should do with TYPO3.
But i guess, you are just not using TYPO3 anyway. redFact is an commercial CMS build by the web agency newsagency. TYPO3 is a opensource CMS itself, it is build by an active community, but not by an single company.
So, at first check, if you are using TYPO3, if so buy an book or have a look at some extensions in TER and the API.
Have a look at $GLOBALS['TSFE']->fe_user->getKey, setKey and $GLOBALS['TSFE']->storeSessionData()
I guess, you are able to read german (your button is called "weiter"). So there are a lot of german TYPO3 books. Just buy some of them and start using the API. I know one pretty good book in english "Typo3 Extension Development" by Dmitry Dulepov, even it is from 2008, it is still valid for beginners.
What's the best practice to create an image button that sends a value and runs a php script (that executes a mySQL query) when clicked. The button has to be an image and not a default submit type of button. I've been googling this for a few days and I still can't find a sutable answer. I could use GET and make a few image buttons (images with links that contain values) on the page that redirect to itself which then I can collect with
if (isset($_GET['variable']))
but I don't really want the user to see the values. I tried creating a form which has only one button in it that when clicked will reload the page and I could capture and use the value with
if (isset($_POST['submit_value'])) {$var = $_POST['submit_value']; }
but I can't seem to make this work, at least not when the button is an image. So if anyone knows a decent way to do this, please share. It doesn't have to be AJAX e.g. page reload is perfectly fine. I'm guessing that I need JavaScript to do this but I don't really know JavaScript so a working example would be nice.
SELF-ANSWER
Thank you for all of your answers. I found that the simplest working way to go with is to create a form with an input type of image that makes the submit and an input type of hidden that carries that value.
<form action="some_page.php" method="POST">
<input type="hidden" name="variable" value="50" />
<input type="image" src="image.png" name="submit" />
</form>
And on the PHP side I use this to catch the value.
if (isset($_POST['variable'])) { $var = $_POST['variable']; }
This is the most suitable solution for my problem. Thank you all again for your speedy responses.
Image buttons are pretty much a mess! :(
I would suggest using CSS to put background-image to ordinary <input type="submit">. This way value will always be visible (eg. sent in request) when user submits the form.
For example:
.myImageSubmitButton{
width: 100px;
height: 22px;
background: url(images/submit.png) no-repeat;
border: none;
/** other CSS **/
}
the bad thing here is that you must set width and height according to image used...
if it must be a <button> you can redirect the form to another script like this:
<form action="somescript.php" method="POST" name="myform">
<input type="submit" name="submit" value="normal submit">
<button name="foo" type="button" value="bar"
onclick="document.myform.action = 'someotherscript.php';
document.myform.submit()">
<img src="someimage.png">
</button>
</form>
or change a hidden field and post the form to the same page like this:
<form action="somescript.php" method="POST" name="myform">
<input type="submit" name="submit" value="normal submit">
<input type="hidden" name="action" id="hidden_action" value="normal_action">
<button name="foo" type="button" value="bar"
onclick="document.getElementById('hidden_action').value = 'special_action';
document.myform.submit()">
<img src="someimage.png">
</button>
</form>
Just a note: if the user wants to, they CAN retrieve the values, for example with Firebug. This cannot be changed.
Also, HTML buttons can be images. See this.
Or use XMLhttprequest on an image wih onclick. There are many tutorials for XMLHTTPRequest. For example this.
You can make a POST form and use the image as a submit button without javascript:
<input type="image" src="myimage.gif" name="submit">
invoke a submit using onclick event on the image
<img src="image.jpg" onclick="document.formname.submit();" />
make submit button with image like that
<input type="submit" style="background-image:url(image); border:none;
width:10px;height:10px; color:transparent;" value=" " name="submit_value"/>
I think the only two ways of doing this are with gets (like you've stated) or with a form where the image button is an input with type submit.
I'm pretty sure you can change the styling of a submit button so that it has a background image, if not then ignore my ignorance.