Add <div> IDs to <input> OnClick

Hi all. I have very limited experience with Javascript, and I need assistance with a few lines of code. As you can see here, I am building a form in which the user can select multiple items and then click a submit button. When an item is selected, I would like that item's ID (e.g. "peak") to be added to the hidden input named "vs" such that if multiple items are selected, the form is submitted via the GET method and the following URL looks something like:
page.php?vs=watch+peak+surge

The page is here.

Thank you.

 

Why in the world are you using javascript for this? This is how GET works. Just name the inputs vs[] and have at it

 

Please explain. The items to be selected are <div> objects, not <input> objects.

 

To send the form data with GET you must use a form an inputs. A simple solution if the data is in divs, I would mirror them with hidden inputs. Toggle them on and off with Javascript and put everything into a form.

<form action="GET">
<div id="test_div>My option.</div>
<input type="hidden" id="test_input" name="test" value="My option." />
</form>

HTML:

 

WHY?

Just put the inputs in the form properly, and style them as you see fit. Why in the world do you want to break everything with random divs and other crap, when it's mostly not needed (and if you need to, say to style inputs the way you want them, there are plenty of javascript libraries out there designed to do just that).

 

People's comments above are your solution.
And if I understand you clearly, you can do something like this:
:HTML

<div id=watch onClick="clickEvent(this.id)">watch</div>
<div id=peak onClick="clickEvent(this.id)">peak</div>
<div id=surge onClick="clickEvent(this.id)">surge</div>
<form method=GET action="page.php">
    <input type=text id=test_input name=test value="" />
    <input type=submit id=submit value=Submit />
</form>

Code (markup):

:JavaScript

function clickEvent(element) {
    var elem = document.getElementById(element);
    elem.addEventListener('click', function() {
        var test_input = document.getElementById('test_input');
        test_input.value = elem.innerHTML;
    }, false);
}

Code (markup):

Hope that help,

 

*headdesk* I can't even... no, sorry. I can't be arsed. Do people actually make code like this?

 

I just demonstrate how it might work with javascript. I'm not good at PHP. So I leave that to you

 

Laughably most of the halfwits vomiting up "scripting for nothing" DO make code like this. They abuse DIV + Scripting to do a submit's job... Yes, I said a SUBMIT's JOB.

See Ketting00's JS for nothing... on top of the invalid markup due to a lack of string enclosures and an actual block-level child and uppercase method some servers and/or browsers will reject...

<form method="get" action="page.php">
	<fieldset>
		<button type="submit" name="test" value="watch" id="watch">
			Watch -- What you were shiting into a DIV for nothing
		</button>
		<button type="submit" name="test" value="peak" id="peak">
			Peak
		</button>
		<button type="submit" name="test" value="surge" id="surge">
			Surge
		</button>
	</fieldset>
</form>

Code (markup):

Is probably what @PoPSiCLe and I are thinking without needing a single blasted line of JS. ****ing scripttards man... Another approach would be to put the content into LABELS with a FOR attribute pointing at CSS hidden inputs, but that's in most cases likely far, FAR more code than needed.

JS for nothing and your scripts for free, that ain't working, that's NOT how you do it; Lemme tell ya, these guys ARE dumb.

Vast majority of people sleazing out JS for things like this not knowing enough about HTML to be writing websites in the first damned place.

 

I use this technique to grab image and sound data from the user devices and upload them to a server. It serves my purpose well. I did say that if he wanted to do it javascript way.

I don't want perfection anyway.

 

Hi PoPSiCLe,

That sounds like a good idea.
Given that the OP's current markup looks like this:

<li id="watch">
  <div class="itemPicture">
    <img src="/images/specs-watch.jpg">
    <div class="checkmark"><i class="fa fa-check-square fa-2x"></i></div>
  </div>
  <div class="specs"><h2>Apple Watch</h2><span class="price">$349+</span></div>
</li>

Code (markup):

(you see, they have an image, a title and a price associated with each item), which kind of input element would you suggest is best for the job?

 

1) would have been nice if the OP had shared their markup -- how did you see it?

2) If it warrants it's own heading dividing it into it's own category, it shouldn't be a list item. Since the image and other content is BEFORE the heading, it probably shouldn't have a heading. After all, numbered headings MEAN "the start of a subsecton of the higher ordered/lower numbered heading before it" which is NOT what seems to be going on here. Which of course is why HTML 5's "SECTION", "ARTICLE" and "NAV" tags are pointless redundancies.

3) Not sure what it needs all those DIV for... but that's guessing wildly without seeing how it's styled.

4) WHICH of those DIV or elements is to be clicked on? If the whole thing, are you SURE it 'needs'

5) re-reading the original post, I'm STARTING to think that these should be checkboxes with the rest of the content in a label, NOT scripting or submits. (I was basing my previous post on what others misunderstood the post to be about) -- completely missed that he's asking for multiple elements to be selected or deselected.

Guessing wildly without seeing the appearance...

<li>
	<input type="checkbox" name="specs[watch]" id="specs_watch" />
	<label id="watch" for="specs_watch">
		<img src="/images/specs-watch.jpg" alt="Apple Watch" />
		<span>Apple Watch <span>$349+</span></span>
	</label>
</li>

Code (markup):

Is probably what's needed there. I'd use a media query to isolate pre-CSS3 browsers and let those show the input[checkbox], then on modern browsers use absolute positioning to hide it off the left side. Since the label has a for attribute clicking on it is the same as clicking on the checkbox, so you could then use "input:checked+label" (+ is the "adjacent sibling selector") to target the label for styling. Things like the 'checksquare' I'd probably do with generated content... though that too would hinge on how you are styling things.

You want multiple selections, that's what a checkbox is FOR. USE IT, even if you're going to hide it for appearance. IF I were to get scripting involved, it would be to replicated :checked+label by doing a class swap on the parent LI for IE8/earlier... and that would be the ONLY thing it would "need" scripting for.

Though honestly, for legacy browsers again I'd probably just show the checkbox somewhere instead of hiding it.... possibly where the "generated" whatever the devil "fa fa-check-square fa-2x" nonsense is.

 

Thank you for the detailed reply.
It hadn't occurred to me that you could use a checkbox and position it off the screen.
That's a better solution than using JavaScript.

 

If they were able to use pure CSS and markup to get an ID out of a DIV without using JavaScript I would have called them supermanthorcaptainamericagenius.

Their approach are prehistoric.

 

Tossed together a quick demo showing it in action:
http://www.cutcodedown.com/for_others/jason_s/template.html

as with all my examples the directory:
http://www.cutcodedown.com/for_others/jason_s/

Is unlocked for easy access to the gooey bits and pieces.

I didn't hide the checkboxes and instead positioned them where they'd be useful -- but as it sits right now it gracefully degrades functional all the way back to IE 5.5 so... In Pre-CSS3 browsers you don't get the highlight effects, but you can still see the checkbox. Again you COULD use some scripting to trap and replicate that behavior, but I wouldn't consider it worth the effort.

Graceful degradation FTMFW -- so long as it is functional, don't waste time and code making it look the same in old browsers for people who refuse to join us in this century.

When it comes to processing it server side, all you need to do is foreach $_GET['item'] as any indexes returned will be the unique part of the field name.

-- edit -- I just added a dummy bold tag sandbag to deal with the fact that IE won't let you click on images inside a label (which is some real herpaderp BS). Most people throw scripting at that, but an aPo positioned over the image can do the same job. I'd use generated content for that instead of a bold tag if I gave a **** about IE7/earlier.

For those of you who don't know the lingo, aPo == position:absolute; relPo == position:relative;

 

Thank you. That's very informative, especially the graceful degradation in older versions of IE.
I would like your post, but I can't find the like button.
Presumably it's hidden for new members.