onClick function not working for a selected option field

Question

I got a Paypal button on my webpage includes this generated code:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" class="center-align" id="paypal">
  <input type="hidden" name="cmd" value="_s-xclick" >
  <input type="hidden" name="hosted_button_id" value="XMMPHFAWFLLRG">
  <input type="image" src="https://www.paypalobjects.com/de_DE/DE/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal." ">
  <img alt=""

By clicking on the "buy now" logo, JS should check, if an option is selected. I am using the Materialize Framework, and that's the select field:

<select>
  <option value="0" disabled selected>Kategorie</option>
  <option value="1">Beauty</option>
  <option value="2">Technik</option>
  <option value="3">Deko</option>
</select>

So no ID or class names, it's the only select on the page.

My Javascript, which I tried looks like that:

function isSelected() {
  if (getElementsByTagName("select").value == '0') {
    alert("Bitte eine Kategorie auswählen!");
  }
}

How do you guys think, I could solve the problem? I checked similiar questions, but didn't get it solved.

Did you look at this question/answer? It has the solution for your problem: https://stackoverflow.com/a/26248617/1309377 — Andrew Lohr, Dec 17 '18 at 15:07
`getElementsByTagName` returns HtmlCollection (0, 1 or many elements). The collection doen't have notion of `value`. So you need to pick specific element from the collection you want to check. — Yury Tarabanko, Dec 17 '18 at 15:09
Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Ivar, Dec 17 '18 at 15:09
Possible duplicate of [Get Options Value Using Tag Name in JavaScript](https://stackoverflow.com/questions/26248598/get-options-value-using-tag-name-in-javascript) — Andrew Lohr, Dec 17 '18 at 15:10
Putting the click event handler on the select will work for the options too. — Mark Baijens, Dec 17 '18 at 15:25

flowtron · Answer 1 · 2018-12-17T15:32:18.267

0

A) if it is disabled is there any sense in it being also selected? just a logic question, maybe your framework may cause issues with this too B) the options[ selectedIndex ].value is what you should be looking at

var paypalSelect = getElementsByTagName("select")[0], // only if it really is the first SELECT on your page .. otherwise .. see below
ppsIndex = paypalSelect.selectedIndex, 
ppsValue = paypalSelect.options[ ppsIndex ].value

you may consider giving it an ID, like so:

<select id="paypal_select_Kategorie">…</select>

and then

var paypalSelect = document.querySelector( '#paypal_select_Kategorie' ) // etc.pp.

So .. to put it all together: First give the input:image:submit an onclick listener:

onclick=checkCategory(this)

Then add this function:

function checkCategory( ppSelect ){
  var ppsIndex = ppSelect.selectedIndex, 
    ppsValue = ppSelect.options[ ppsIndex ].value
  if( parseInt( ppsValue ) == 0 ) console.log( "disabled standard" ); else console.log( "non-standard selection: "+ ppsValue )
}

edited Dec 17 '18 at 15:32

answered Dec 17 '18 at 15:11

flowtron

854
7
20

Alright.. but how do I check, if it's Val: 0, if I click on the paypal logo? it's not a "submit button" inside a
tag.
– Tom Otten Dec 17 '18 at 15:15
if( parseInt( ppsValue ) == 0 ) console.log( "Kategorie: Kategorie ) else console.log( "Kategorie ==> "+ ppsValue ) – flowtron Dec 17 '18 at 15:18
Huh? Has this something to do with a onClick function? I mean like, if a user clicks on "buy now", how do check then, if it's value 0 or not. Value 0 is just the disabled standart value of "Kategorie" for letting the user know, what to pick on the selection. – Tom Otten Dec 17 '18 at 15:22
the "disabled standard" .. makes my logic circuits go tweeky ;-) .. and the rest of your question isn't any clearer. I will add the code from the comment to my answer and hope that clears it up. – flowtron Dec 17 '18 at 15:25

score -2 · Answer 2 · answered Dec 17 '18 at 15:10

-2

Using JS should be your last choice ;) (if you only want to check if something is selected) Try to use require fields on html5 and use the validations. https://www.w3schools.com/tags/att_select_required.asp

answered Dec 17 '18 at 15:10

Sebastian Felix Schwarz

278
3
14

I guess this could work, if the – Tom Otten Dec 17 '18 at 15:12

onClick function not working for a selected option field

2 Answers2