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,
                               };
Improve this question
8
  • You have not attached any event to the submit button.What do you want to do on submit?
    – Unnie
    Apr 22, 2014 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, 2014 at 20:56
  • Did you confirm that the onchange event is called.use alert or console.log inside the onchange function
    – Unnie
    Apr 23, 2014 at 5:25
  • ok i will check
    – Anders
    Apr 23, 2014 at 12:45
  • Its not working, this is so annyoing
    – Anders
    Apr 24, 2014 at 7:39

3 Answers 3

Reset to default
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, ''); }" />
Improve this answer
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, 2014 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;
        }
    }
Improve this answer
3
  • 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, 2014 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, 2014 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, 2014 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.]

Improve this answer
15
  • I think this is right, checking with firebug it says my elements are null, i will try your solution.
    – Anders
    Apr 25, 2014 at 7:46
  • I tryied this but it said checker is null
    – Anders
    Apr 25, 2014 at 7:52
  • Is it possible for you to use jQuery? Or do you have to stick with straight Javascript?
    – Dylan Cristy
    Apr 25, 2014 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, 2014 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, 2014 at 22:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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