I make a form in Wordpress Template that makes certain calculation and displays the result in a modal Bootstrap.

HTML:
 

     //FORM
    <form method="post" id="myForm">   
     <span>Name</span><br><input type="text" name="name" id="name" required>

     <span>Email</span><br>
     <input type="email" name="email"  id="email" required>

     <span>Altura</span><br>
     <input type="number" name="altura" id="altura" required>
       
    <span>Peso</span><br>
    <input type="number" name="peso" id="peso" required>
       <br><br>

    <button type="submit" id="enviar" onclick="calcularIMC();">Enviar</button>

     //MODAL
    <div class="modal fade" id="ajax-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
       <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div id="corpo_modal">
                      <p> ALL FIELDS </p>
             </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
       </div>
      </div>
    </div>

JAVASCRIPT:

    function calcularIMC(){  
    var nome = document.getElementById("nome").value; 
    var email = document.getElementById("email").value; 
    var estilo = document.getElementById("estilo").value; 
    var experiencia = document.getElementById("experiencia").value; 
    var altura = document.getElementById("altura").value; 
    var peso = document.getElementById("peso").value;  
    var resultado = 5;
    
    var corpo = document.getElementById("corpo_modal");
    
    
    var imc = 0;
    if(altura >0 && peso >0){
      imc = peso / (altura * altura);
    }
    
    
     if(estilo == "Surf"){            
             if((imc<=25) && (resultado == 5)){          
              corpo.innerHTML = '<img src="1.png" style="width: 150px; height:150px">';
            }
          else{         
             corpo.innerHTML = '<img src="2.png" style="width: 150px; height:150px">';
              }
         } 
    
    
      else if(estilo == "SUP"){  
    
            if((experiencia >= 3) && (imc <=29)){
              corpo.innerHTML = '<img src="3.png" style="width: 150px; height:150px">';
            } else{
              corpo.innerHTML = '<img src="4.png" style="width: 150px; height:150px">';
            }                       
         }
    }

The problem is that when I send the form, it updates the page and does not display the modal.<br>
After some research, I found that to solve this problem I will need to use Ajax - jQuery.ajax.

I found this code:

    $(function() {
      $('form#myForm').on('submit', function(e) {
          $.post('', $(this).serialize(), function (data) {
              // This is executed when the call to mail.php was succesful.
              // 'data' contains the response from the request
          }).error(function() {
              // This is executed when the call to mail.php failed.
          });
          e.preventDefault();
      });
    });

When I create a form in a SEPARATE page without putting in wordpress template, it works. But when I put the code in wordpress template it updates the page after 3 seconds.

I also discovered that I can use a native function `ajax` in `jquery`, the function `$.ajax();` and inside of oneself I use tags like `url`, `type`, `data` and so on. I'm a beginner in Ajax and I'm lost on how to do this.

> Why the function `e.preventDefaul();` not works when I put in wordpress template?? It's possible make it work in wordpress template?

or

> How I can use the `$.ajax()` to solve this problem??

I want send the form without refresh the page! 

Is there an easy way to repeat headers for each record in a radgrid master/detail table?

In records with a lot of children, the headers can scroll off the screen, and then the user has to scroll up and down to read the headers. It would be nice if there were a way to automatically repeat the header each time you write a new MasterHeader, for instance, since RadGrid doesn't have a "freeze" feature where the headers will remain frozen at the top of the screen while the user scrolls down.

Is there an easy way to do this?

I know absolutely nothing about responsive design.  

I was wondering if someone could point me to some small example of this.  

What I'd like is to set up (hopefully quickly) two extremely simple pages in my web app to be compatible with multiple devices.  

One page contains a RadGrid with only a few columns and a template popup with a few controls including a RadEditor.

The other page contains two RadComboBoxes, a RadEditor, and two buttons.

Hello,

I am calling a telerik radbutton's click event via javascript from within a RadAjaxPanel and it is causing a postback rather than a call back. When I click the button manually all works as expected (a callback occurs).

Example:

document.getElementById('<% = SaveEditorButton.ClientID %>').click();

Please help.

I have scenario where the values of textbox inside rad grid is getting loss when Filter has done.

Example

COLUMN1            COLUMN2                COLUMN3                    COLUMN4

   A                            B                        TEXTBOX1                     TEXTBOX2

   C                            D                       TEXTBOX3                     TEXTBOX4

I am giving value for TEXTBOX1 and TEXTBOX2. When I search for "C" in COLUMN1 using FILTER which is available in radgrid all the values

entered in TEXTBOX1 and TEXTBOX2 are getting loss.



My scenario is not to get loss when I Filter for any record.



Please assist me on this

HI there

I have a radlistbox on my page that displays a list of items with checkboxes that I programatically add items to:

 <telerik:RadListBox ID="NewslettersRadListBox" runat="server" Width="100%" CheckBoxes="true" Height="200px"></telerik:RadListBox>

What I need to do is to display the items in 2 columns. Is this at all possible?

I have attenpted to do this by modifying the styles as descibedin the following thread: http://www.telerik.com/community/forums/aspnet-ajax/listbox/how-to-show-two-columns-when-use-checkboxes.aspx but this doesn't work.

Thanks in advance!

For some reason my drop down is getting reset on my page load i popuplate the dropdown by trapping the post back.

 

Hi,

I'm using the Telerik Rad Spell Checker in my page attached screenshot.
A Textbox and Rad Spell Check.

When I tried to navigate the page using tab key in the Keyboard. At First it is navigated into the Textbox "Text 1" field and when I pressed tab key again, it is pointed to the Rad Spell Checker and Spell Check Dialog Box is opened this seems like a tab key is considered as a click event and once I clicked ok the Dialog Box disappears.

When I press tab key again, the dialog box continuously opened instead of navigating into the next field in the page which is "Text 2" Text box.
This behavior is observed  in the Firefox Browser only.

But in the Chrome and IE.  It's working fine. When I press tab key after the Text box “Text 1”, it is pointing to the spell checker but no dialog box is opened and when I pressed tab again it is pointing to the next fields in the page.

The Telerik Version details are below:

Runtime Version: v4.0.30319
Version: 2014.2.618.45

Attached the screenshots for both. 

 

Regards

Mani

 

Ok for some reason I have a recurrance dated for 19/04/2016 but for some reason its giviing me recurrances in the past instead of the future.

I am sure if i set weekly which I have done acording to the option it should set them in the future.

Hi there,
I am using a TabStrip and am struggeling with scrollbars within the tab strip content. I found out that I am able to solve this by using css style "display: inline-table" instead of "display: block".
Unfortunately I am not able to set this style in my code:

@(Html.Kendo().TabStrip()
                      .Name("tab1")
                      .HtmlAttributes(new {style = "height:auto" })
                      .Items(ts =>
                      {
                          ts.Add().Text("Text1").Enabled(true).HtmlAttributes(new { id = "item1"}).Content(@Html.Partial("_Form1", new Model1()).ToHtmlString());
                          ....
This will generate following markup structure:
<div class="k-tabstrip-wrapper">
<div class="k-widget k-tabstrip k-header k-floatwrap k-tabstrip-top">
<ul class="k-reset k-tabstrip-items">
....[some more ul]...
<div class="k-content k-state-active" id="tab1" style="display:block" role="tabpanel" aria-expanded="true">
...
The problem appears in the line above where display is set to "block". The browser shows:
element.style {
display: block;
}
1. I did not specify this style. I assume this is generated?
2. I cannot override this property using:
<style>
    .k-tabstrip .k-content.k-state-active {
        display: inline-table;
    }
</style>
3. Neither setting .Htmlattributes on the grid nor the tabstrip helps, as they're corresponding to parent divs.

Does anybody know how to do this?