0

I am using the following Javascript code using Script Editor on NewForm.aspx. It supposed to be working but by debugging I can see that the value returned from the dropdown select is empty. I looks to me that I am missing a .js library. Any help would be greatly appreciated

<script src="../SiteAssets/jquery.min.js"></script>
<script type="text/javascript"> 
function PreSaveAction() 
{ 
   return formVal(); //calls the validation on save 
} 
function formVal() 
{ 
 if($("select[id^='Store #']:selected").text()=="<Select a store>") 
    {alert('Error:Please select valid store number from dropdown list before submitting'); 
    return false;
    } 
else { 
    alert(select[id^='Store #']:selected").text());
    return true;
     }
} 
</script>
  • Well, are you missing a library, i.e. do you have jquery.min.js in where you are referencing it? Does the browser's console show any js load issues? – moe Aug 10 '18 at 7:05
  • Thank you, Moe. Yes, I do. I actually ended up downloading jquery-3.3.1.min.js. Went to the ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js, copied the content presented in the browser and pasted into a text file, changed the extension to .js and uploaded to SiteAssets. Am I doing it wrong? – Kirill Aug 10 '18 at 18:57
  • The easiest way is to download the jquery.js, upload the file as is to your Site Assets and refer it from there. Copying the content directly to SP isn't a good idea. – moe Aug 11 '18 at 10:53
  • Thank you, Moe. I actually found an issue - my code was missing option before ":selected". It should say - $("select[id^='Store #'] option:selected.text()==<Select a store>" – Kirill Aug 11 '18 at 19:53
0

The psuedo selector ":selected" does not exist on the select element. It is located on the option element. So if you change it to the code below you should be getting a different result.

<script src="../SiteAssets/jquery.min.js"></script>
<script type="text/javascript"> 
function PreSaveAction() 
{ 
   return formVal(); //calls the validation on save 
} 
function formVal() 
{ 
 if($("option[id^='Store #']:selected").text()=="<Select a store>") 
    {alert('Error:Please select valid store number from dropdown list before submitting'); 
    return false;
    } 
else { 
    alert(option[id^='Store #']:selected").text());
    return true;
     }
} 
</script>

But you should have a look at those queryselectors. I dont think they are totally correct.

| improve this answer | |
  • Thank you very much, Brannmar. Unfortunately, it did not help and it still comes back empty. I am very new to Javascript so please bear with me - might it be that I have not included the .js file properly. I went to ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js and taken the content presented in the browser, pasted into a text file and changed the extension prior to loading into the SiteAssets. Am I doing it wrong? Also, can you please elaborate on what you mean by incorrect queryselectors – Kirill Aug 10 '18 at 19:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.