I am working on an image gallery at the moment. When a user is logged in, an x appears over each image and a checkbox next to it to enable the user to delete that image. Only if the checkbox is checked will the image be deleted.
They are both in a (one for each image in the gallery), the small image "x.gif" is an input type="image" that submits the $_POST form. The checkbox inherits the name of the image and is to prevent accidentally pressing the x button and deleting an image.
The problem is that the checkbox name, upon posting it gets converted from (for instance)
"Image.jpg" to "Image_jpg"
When i test it with print_r($_POST);
Should I create code for replacing _jpg or _gif into .jpg and .gif after the post or is there a way to make it possible to use period signs in input names?
Any help is greatly appreciated.
This is standard PHP behaviour. More info here.
Doing a manual str_replace on _jpg or _gif is a bad idea because those strings could also appear within a file name:
winter_impression_jpg_strong_colours.jpg
In that case, the file name would become unusable.
You could alternatively either
Mask the dots using some other combination of characters (e.g. ___DOT___)
Change the logic: Have numbered fields (checkbox_1 checkbox_2....) and store the name in a separate field (checkbox_1_name = "image.jpg")
I would recommend changing the structure of your form to have a field for confirmation (the checkbox) one field for the name (hidden) and your submission button (image):
<input type="checkbox" name="confirmation" />
<input type="hidden" name="target" value="file.jpg" />
<input type="image" />
Rather than using input type="image" use the normal img tag and place the x image in that and then modify your code as per those changes otherwise you can simply replace the underscore with a dot.
Related
my form has images as inputs so i used
there is no submit input because i used the image as submit
now i can get the image id
<input type="image" src="my/source" name="Logo" />
i had tried to put hidden input but it returned all the ID's in the data not the selected one
If you need to transport an actual value, then <input type="image"> is not a good choice to begin with. The only info you will get in the form submission data set, is the click coordinates, under the parameter names Logo.x and Logo.y (with name="Logo".)
You should use a button instead. That allows you to specify the submission value, and the image itself can be put inside the button, using a normal img element.
<button name="Logo" value="some_id_here"><img src="my/source"></button>
type="submit" is the default type for buttons, so it does not need to be put on there explicitly to make this a submit button.
We currently have a site that provides webforms. (podio.com)
These webforms are limited, as it does not provide conditional formatting.
(ex. Selecting option A, unhides field 1,2,4 to fill out or
Selecting option B, unhides field 1,4,6 to fill out.)
My solution: I created a php webform, with the same fields, and im able to control conditionals this way. I then just POST the variables to the other site/webform and it submits the form.
Works Great!
Now the issue is attachments.
So my question is: How would i go about pushing an attachment from my new form to the other form so it actual is submitted?
My current code for the attachment:
<input type="file" name="attachments[]" value="" accept="" data-reactid=".0.1.1.0:$0.0">
This obviously lets them chose a file, but how would i go about carrying this attachment to the actual webforms 'choose file upload' field, so it submits with the other data?
Please let me know if i need to explain more.
change this line
<form class="contact100-form validate-form" action="/infotech/webforms/tickets/results.php"
method="post" name="it_webform">
to this
<form class="contact100-form validate-form" action="/infotech/webforms/tickets/results.php"
method="post" name="it_webform" enctype="multipart/form-data">
as Clint pointed out, this needs to be there. This is infact required on ANY form that is expected to send files, without this enctype attribute, the form is just basic text for all the server cares and the files array is not sent.
Maybe like this : you can't use a local image in your second form, because the file is not stored on the user computer. but when you receive the first form : encode the image in base64 and use it in second generated form
1) use <img src = "data:image/png;base64, xxxxxx" . to display image
2) use a hidden field with value="xxxxxx..." to send to 2nd script
note : the picture cannot be changed.
you can add a option (input check box) "choose another file" to allow picking another local file, then the script check if it should handle the first picture
(base 64 encoded) or the new picture, according the "choose another file" check box value
I have this HTML button code at the end of a form
:
input type="image" name="enter" value ="test" src = "design_files/addpanier.png
It generates the button and I can click on it, but when I test for the button in PHP using:
if(isset($_POST['enter'])).....
it is not detected in Firefox or Mircosoft Edge but is OK in Chrome.
I have got round it by duplicating the 'enter' field using a hidden field
i.e.
input type="hidden" name="enter" value= "enter"
input type="image" name="enter" value ="test" src = "design_files/addpanier.png"
The values in the field don't matter.
But is my original code wrong or are the browsers at fault?
You need to test for the presence of an enter.x (or enter.y), instead of enter, in the form data. The reason is that for an image submit button, the contribution to the form data is defined differently from other fields: the coordinates of the clicked location (or 0, 0 if a method other than a pointing device was used) are included in the data, with names derived from the name attribute value with the strings .x and .y appended. (Some browsers also include a field with the name from the name attribute, but this isn’t useful since you cannot count on it.)
Ref.: Description of input type=image at MDN (Follow the links to specs to find the most authoritative definitions of what happens at form submission.)
I have an html form with action on a php script. And I've set the submit button to have a custom image, and not to show up as the default grey thing. I've tested the code in chrome, and the php script works fine (meaning, the submit button successfully calls and executes the php script, upon clicking it). This same code however does not work in IE 7.
Could you please let me know how to get it to work with IE 7 as well (I need support for IE 7)-
Code:
<form action="some_php_script.php" method="post">
<input type="image" src="submit-button.png" name="submit-plus" id="submit-plus" value="submit" />
</form>
On a related note, I have one more question -
the above form currently references the "some_php_script.php". Can i have a php snippet be written in this html section so that it can pass some values in the script url, like below -
<form action="some_php_script.php?page=12" method="post">
(Basically, I want the ?page=12 to be passed dynamically based on someother value in the current page.)
Thanks!
try with
<button type="submit" name="submit-plus" id="submit-plus" value="submit">
<img src="submit-button.png" alt="submit" title="submit"/>
</button>
Reference
http://www.w3.org/TR/html4/interact/forms.html#h-17.4.1
image Creates a graphical submit
button. The value of the src attribute
specifies the URI of the image that
will decorate the button. For
accessibility reasons, authors should
provide alternate text for the image
via the alt attribute.
When a pointing
device is used to click on the image,
the form is submitted and the click
coordinates passed to the server. The
x value is measured in pixels from the
left of the image, and the y value in
pixels from the top of the image. The
submitted data includes name.x=x-value
and name.y=y-value where "name" is the
value of the name attribute, and
x-value and y-value are the x and y
coordinate values, respectively.
If the server takes different actions
depending on the location clicked,
users of non-graphical browsers will
be disadvantaged. For this reason,
authors should consider alternate
approaches:
Use multiple submit buttons (each with
its own image) in place of a single
graphical submit button. Authors may
use style sheets to control the
positioning of these buttons. Use a
client-side image map together with
scripting.
Im not sure if you figured out a solid solution for this or not but I was having the same issue in IE 7. The button image looks great in IE 8+ and of course in Firefox & Chrome.
You can keep the button tags in there as shown in the example from diEcho, or you can go back to your original code with the input tags. What you want to do is add a "background-color" style and set it to "transparent". I see you dont have a class associated with the button so you can just create an inline-style in the input tag.
<form action="some_php_script.php" method="post">
<input type="image" src="submit-button.png" name="submit-plus" id="submit-plus" value="submit" style="background-color: transparent;" />
</form>
Give it a shot! If you get a funny looking border around the button you can add an additional style of border: none; to your inline style.
I have a form with series of 3 file upload fields, each of which has a related hidden "todo" fields.
The file upload fields start greyed out and a user can either upload a new file, remove a file if one has previously been uploaded in that position or leave it unchanged (i.e. use the previously uploaded file or leave it blank).
The todo fields should store what is to be done with each file (i.e. 0=upload new, 1=delete existing, 2=leave unchanged).
I have a series of buttons next to the upload field. One for "upload new" (which enables the file upload field and (should) set the related todo field to 0; one for remove (which disables the file upload box); and one for "leave unchanged" (which also disables the file upload field).
I've found the name="blah[]" technique for creating arrays when the form is posted to a PHP document which makes looping through the files nice and easy. The trouble is that I need to edit the value in the related "todo" fields and if they're all named "todo[]" then I can't refer to one specifically...
The code is something like this:
<input type="file" name="file[]" />
<input type="hidden" name="todo[]" />
<input type="button" onclick="enableFileField('file[]', 0)" value="Upload New" />
<input type="button" onclick="enableFileField('file[]', 1)" value="Remove Current" />
<input type="button" onclick="enableFileField('file[]', 2)" value="No Change" />
I'm pretty sure I'm missing something and that this is actually quite simple...
You can give the fields ids in addition to names. The name would be used for the post to the server, but the id can be used for referencing the input in JavaScript:
<input type='hidden' id='todo_0' name='todo[]'>
<input type='hidden' id='todo_1' name='todo[]'>
In JavaScript, document.getElementById("todo_0") will give you the first todo field. Be sure to keep the ids sufficiently different that Internet Explorer doesn't get confused (it has namespace bugs around id and name [it tends -- completely incorrectly -- to put them in the same namespace]).
You could increment a counter in javascript as you add more fields, so you create todo[0], todo[1], etc. This wouldn't change how PHP interprets it.
Edit:
Realised you aren't creating fields on the fly in javascript, but the naming still applies
You could give each of the todo inputs a unique ID that you remember, or, I believe you can use
<input type='hidden' name='todo[0]' />
<input type='hidden' name='todo[1]' />
etc. in your HTML.
If I understand what you are asking, you want to be able have to multiple fields that will be used to upload a file. For example, if you have 3 files to modify, you would have three hidden todo fields?
A quick and easy solution would be to keep a hidden field for the number of files such as:
<input type='hidden' name='numFiles' value='1' />
and update that as you add or remove files with javascript. Then as others have suggested, give each todo a unique id as such:
<input type='hidden' name='todo1' />
Now you can easily find a todo because each file will have a unique one and you will be able to update it from there.
Once you post the form, you can pull the number of files there will be from the numFiles field and loop through all the todo's with a number appended to the end.