Form submission via Javascript

Javascript & Ajax
#1

Dear forum, I am struggling with a JavaScript form submission. I have a background photo that i use on all of my pages (site-wide). I also made a form which will allow users to select a background from many choices. I store the background name in a database along with the member information. Each photo available is wrapped in a form, thus each input has a unique name which is actually the name of the photo without the extension. So a photo named “phphelp.jpg” will become input name=“phphelp”.

Now, everything is working well. However, i wanted to allow a user to click on the entire div to submit the form and not just on the button. I should also mention that all buttons have the same value.

I added onclick=“document.getElementById(‘phphelp’).submit();” to the image inside the div, which is wrapped with the form tag. The form submits but the name is not being passed in the submission. Why is this not working? better yet, how can submit an input name using javascript?

I remember i had trouble once with a form and it turns out that the value is passed instead of the name but i can’t remember what causes this action.

Anyone able to offer a solution?

#2

The name attribute should be the meaning/purpose of the data. The value attribute should be the specific data value. When the form is submitted, the name/value pair is submitted.

As to the rest, without having enough of the code needed to reproduce the problem, there could be a dozen different reasons why any particular code isn’t working.

#3

The code is the same as the code in an earlier topic:

https://www.phphelp.com/t/verifying-post-input-with-a-large-array/28410/5

but i’ve added an array_key_exists to match the name attribute with the image name.

Matching the name attribute is imperative because it enables me to use a decriptive verb for the value of the button, such as, Select or Update.

<form id=\"" . $randomName . "\" method="post">
<img src=\"" . $var . "\" />
<input type=\"Submit\" name=\"" . $var . "\" value=\"Select\" />
</form>

i place the javascript code in the image tag:

onclick=\"document.getElementById('" . $randomName . "').submit()\""

i generate a random name instead of storing unique names in an array.
the javascript submits the form but the code isn’t getting by my array_key_exists loop.
thus, i have no idea why the name isn’t working. Do i need to use an id on the input element?

if this is a hassle, then i can just move on. I thought it would be nice to click on the whole div container/form instead of just a button.

#4

Only ‘successful’ form fields are submitted. When you don’t click on the submit button to submit the form, it is not a successful field and isn’t included in the form data. Use a hidden field for the $var value.

#5

I just successfully tested a hidden input. Everything is working. I kept thinking about the problem and i considered that nothing is being submitted. My form only contains a submit button with a name/value pair. I added the hidden input and it works well.

However, JavaScript has complicated the matter because i’d like to use a cursor pointer in the css class. I tried to use JavaScript to set cursor to pointer on all images with id of cursorHand but the script only effects the first form image. Any suggestions to apply this to all images on the page with the same id or class name? i want to use JavaScript because if it is disabled then the form will not submit but a pointer will still show via css. No js=no pointer.

#6

You can directly use an image as a submit button with just html.

#7

Hello phdr, i know that input type can be an image but it wrecks my design. I want a div container with a thumbnail of the background photo with an input button under the photo. I like the button to have the same value for eavery background photo. Thus, Select instead of the name of the image. If i were to use an image type input, then i would have to use a different name for the input. yes? i already use the image filename for the name of the submit input.

I wanted to allow a one-click resolution which i implement javascript. I don’t see a need for it since i supply a button, however, internet users are often lazy. I’m sure that the convenience of a click on the div container will make lazy surfers happy. Also, i style the div to be brighter on hover. I realize that this hover creates a concept that the entire div is clickable. Thus, i wanted to make it clickable. I still want all values of the submit button to bear the same text, such as, Select or Update.

I suppose that i will have to create unique css ids for each image in order to apply a cursor pointer via javascript. I’ve tried queryselector and a loop but it isn’t working. Other than that, I am happy with my form. Unless, professionally speaking, my code is very sloppy and amateurish. I am still learning how to program PHP, so my solution for background selections is to place each selection in a form.

#8

input type image is working. Thank You, phdr. Once again, you’ve opened my eyes to better logic.

I know that if phdr offers advice, then it is good advice to make one a better programmer. This is not a misunderstanding. The problem was something in my code broke the form whenever i tried input type image the first time. I tried again just now and the form is working as expected and my design is exactly as i wish it to be.

phdr, you are a PHP God :smile:

Sponsor our Newsletter | Privacy Policy | Terms of Service