1

i have a popup modal dialog on a sharepoint 2013 online site, inside it i want to have a submit button and a checkbox, if user checks it then the submit button is enabled. This code works except that nothing happens to the submit button. The submit button works if its not in the modal dialog.

This html code is inside my modal dialog:

<html>
<body>
<div id="InformationBox" style="display:none;">
<div id="Div2" style="height:100px; padding-top:10px;padding-left:10px;padding-right:10px;">

<label id="lblInformationMessage"> </label>
<br>
<img id="Picture" src=""/></img>
<div id="Div3" style="padding-right:5px;">

<p>i understand</p>
<input type="checkbox" id="checkme" />

<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />


</div>
</div>

</body>
<script>

var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
 checker.onchange = function(){
if(this.checked == true){
    sendbtn.disabled = true;
} else {
    sendbtn.disabled = false;
}
  }
 </script>
 </html>

 var cloneModalContent = document.createElement('div'); 

                      $("#lblInformationMessage").html(newsArray[i].NewsText);

                           cloneModalContent.innerHTML =  document.getElementById('InformationBox').innerHTML;

                           var options = {
                               title: newsArray[i].Title,
                               autoSize: true,
                               html: cloneModalContent,
                               dialogReturnValueCallback:   myCallback,
                               allowMaximize: true,
                               showClose: true,
                               };
  • You have not attached any event to the submit button.What do you want to do on submit? – Unnie Apr 22 '14 at 16:52
  • I want that the submit button is disabled and enabled if the user check the checkbox. It works on like js fiddle but not inside the modal dialog ... – Anders Apr 22 '14 at 20:56
  • Did you confirm that the onchange event is called.use alert or console.log inside the onchange function – Unnie Apr 23 '14 at 5:25
  • ok i will check – Anders Apr 23 '14 at 12:45
  • Its not working, this is so annyoing – Anders Apr 24 '14 at 7:39
1

If you want the modal dialog to close when the submit button is clicked, you'll need to apply some code to make it close the dialog.

<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " onclick="function() { window.frameElement.commonModalDialogClose(1, ''); }" />
  • I have already made a callback like that, I want that the submit button is disabled and enabled if the user check the checkbox. It works on like js fiddle but not inside the modal dialog ... – Anders Apr 22 '14 at 20:57
0

Try any of below methods:

Method 1:

 <input type="checkbox" id="checkme" onchange="EnableDisableButton(this);" />

And add below function:

 function EnableDisableButton(checker){
    var sendbtn = document.getElementById('sendNewSms');
sendbtn.disabled =checker.checked;

    }

Method 2:

      window.onload=function(){
        var checker = document.getElementById('checkme');

     checker.onchange = function(){
var sendbtn = document.getElementById('sendNewSms');
        sendbtn.disabled=this.checked;
        }
    }
  • That didnt worked either, i think @Dylan Cristy answear is right, sp 2013 destroys the elements id, so it will be null – Anders Apr 25 '14 at 7:45
  • @Jarule SharePoint does not destroy ids. If the element is having runat="server" property then sharepoint will append some extra text to the element id.But in your case the elements will be rendered with the same id(bcoz no runat=server).You can do one thing, use developer tools and check the id of the checkbox and button – Unnie Apr 25 '14 at 8:02
  • Unnie is right, I did not notice that you didn't have the runat='server' property, and without that, the IDs should stay as you set them. – Dylan Cristy Apr 25 '14 at 15:21
0

I'm not sure if this still happens in SP2013, but SP2010 will destroy your element IDs. So I'd say your javascript is not working because checker and sendbtn are null, because after SharePoint renders the page, they no longer have the IDs you thought they did.

I would try something like this:

var checker = document.getElementById('<%= checkme.ClientID %>');
var sendbtn = document.getElementById('<%= sendNewSms.ClientID %>');

EDIT

Ok, since you can use jQuery, you can get this to work in the following way:

  1. Add the runat="server" property to both of your input elements.
  2. Move your whole script block up into a head section.
  3. Use this as the script:

    $(document).ready(function () { $('#<%= checkme.ClientID %>').change(function () { if ($(this).is(':checked')) { $('#<%= sendNewSms.ClientID %>').removeAttr('disabled'); } else { $('#<%= sendNewSms.ClientID %>').attr('disabled', 'disabled'); } }); });

[At the time of this edit, SPSE appears to not be formatting my code block as a code block. Don't really know what's up with that. Sorry if it looks messy.]

  • I think this is right, checking with firebug it says my elements are null, i will try your solution. – Anders Apr 25 '14 at 7:46
  • I tryied this but it said checker is null – Anders Apr 25 '14 at 7:52
  • Is it possible for you to use jQuery? Or do you have to stick with straight Javascript? – Dylan Cristy Apr 25 '14 at 15:22
  • I can use jquery, i have a ajax call by jquery now so its fine with jquery if you got some tip? – Anders Apr 25 '14 at 15:26
  • Ok, added a way to do it with jQuery, that definitely works for me (inside a modal dialog). For some reason it seems like the code block is not formatting correctly though, don't know what to do about that. – Dylan Cristy Apr 25 '14 at 22: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.