Add form inside panel bar and submit

6 posts, 0 answers
  1. Tarim
    Tarim avatar
    5 posts
    Member since:
    Dec 2009

    Posted 15 Mar 2012 Link to this post

    Hi,

    I want to add a submit form to panel bar. when I click submit button it will be submit and display result inside panel. But, I do not know how to do it.

    Can you help me please?

    Thanks,

    for example: 
    <ul id="panelBar">
    <li>
                        Add User
                       
                         <div>
    <form>
    <input type="submit" name="btnSubmit" value="Submit" />
    </form>
    </div>


    </li>
    <li>
      Update User
    </li>
    </ul>
  2. Tarim
    Tarim avatar
    5 posts
    Member since:
    Dec 2009

    Posted 22 Mar 2012 Link to this post

    I tried few different ways, but all of them did not work. Can someone help me please?

    for example:
           <?php
                     if(isset($_POST['btnSubmit']))  echo 'var item = $("#pnlSubmit .t-item:eq(0)"); panelBar.expand(item);';
                                           ?>   

    It did not work.

    Thanks,
  3. Kendo UI is VS 2017 Ready
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 26 Mar 2012 Link to this post

    Hi Nur,

    I am afraid that information about your scenario is not enough. Could you please provide more details and if possible a sample project? 

    Thank you in advance!

     

    All the best,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Tarim
    Tarim avatar
    5 posts
    Member since:
    Dec 2009

    Posted 26 Mar 2012 Link to this post

    Hello Iliana,

    Thank you very much for your reply. What I want to do is. I have panel bar. It has few panels, each panel has submit button. When user submit it will be submit and display error message inside panel bar.

    Thanks,

    Here is example: This is PHP code

    echo '<div id="MainPanel"><ul id="pnlSubmit"><li>Add New Partner Link<div>';
     echo '<form name="form1" method="post" action="index.php?PID='.$_e->encode(12).'">';
    echo '<table width="100%" border="0" cellpadding="2" cellspacing="2">';
    echo '<tr><td width="15%"></td><td colspan="2" class="page_small_error_lable">';
       if(isset($_POST["btnSubmitInsert"])) //if click submit button
    {
            do something
    }
    echo '</td>
    <td></td>
    </tr>
    <tr>
    <td width="15%">&nbsp;</td>
    <td colspan="2" class="MainPageTitle">Add New Partner Dynamic Landing Page</td>';
    echo '<td></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td class="page_lable_normal">&nbsp;</td>
    <td class="MainText">&nbsp;</td>
    <td></td>
    </tr>
    <tr>';
    echo '<td width="15%"></td>
    <td class="page_lable_normal">Account Type:</td>
    <td class="MainText">';
    echo '<select name="cmbAcctType" class="TxtBox100" id="advPartnerType" >';
    echo '<option value="">Select One</option>';
    echo '<option value="7">User - All Steps</option>';
    echo '<option value="13">Reseller - All Steps</option>';
    echo '<option value="25">User - No Plan</option>';
    echo '<option value="26">Reseller - No Plan</option>';
    echo '</select>';
    echo '</td><td></td></tr>';
    echo '<tr><td></td>
    <td class="page_lable_normal">Partner Name:</td>';
    echo '<td class="MainText"><input name="txtPartnerName" class="TxtBox100" type="text" value="" size="30">';
    echo '</td><td align="left">(Note: Partner name must start with PL6390,RS6390,MR6390,TP6390)</td></tr>';
    echo '<tr><td></td><td class="page_lable_normal">Url Display Name:</td>';
    echo '<td class="MainText"><input name="txtUrlName" class="TxtBox160" type="text" value="">';
    echo '</td><td align="left">(Note: This is a display name on the url link)</td></tr>';
    echo '<tr><td></td><td class="page_lable_normal">Temp Item ID:</td>';
    echo '<td class="MainText"><input name="txtTempItemRecid" class="TxtBox50" type="text" value="">';
    echo '</td><td align="left">(Note: Please make sure Temp Item ID is correct</td></tr>';
    echo '<tr><td></td><td class="page_lable_normal">Lengs of Day:</td>';
    echo '<td class="MainText"><input name="txtLengs" class="TxtBox50" type="text" value="">';
    echo '</td><td align="left"></td></tr>';                        
    echo '<tr><td></td><td class="page_lable_normal">Item ID:</td>';
    echo '<td class="MainText"><input name="txtItemRecid" class="TxtBox50" type="text" value="">';
    echo '</td><td align="left">(Note: Please make sure Item ID is correct</td></tr>';
    //echo '<tr><td></td><td class="page_lable_normal">Installation Code:</td>';
    //echo '<td class="MainText"><input name="txtInstallationCode" class="TxtBox160" type="text" value="">';
    //echo '</td><td align="left">(Note: Installation code must be correct format.)</td></tr>';
    echo '<tr><td></td><td class="page_lable_normal">Auto Activate:</td>';
    echo '<td class="MainText">';
    echo '<select name="cmbAutoActive" class="TxtBox50" id="advPartnerType" >';
    echo '<option value="0">No</option>';
    echo '<option value="1">Yes</option>';
    echo '</select>';
    echo '</td><td align="left"></td></tr>';
    echo '<tr><td></td><td></td><td class="page_lable_normal">&nbsp;</td>';
    echo '<td align="left"><input type="submit" name="btnSubmitInsert" value="Submit" /></td>';
    echo '<td></td></tr></table></form>';
    echo '</div></li></ul></div>';
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 29 Mar 2012 Link to this post

    Hi Nur,

    I am afraid the content of the Kendo UI PanelBar cannot be replaced out of the box. It is possible to change the inner html of the corresponding element via custom java script. I suggest using the sumbit event of the form to perform AJAX request and replace the content on response success. For example:
    $("form").submit( function(e){
        e.preventDefault();
        //Here you need to make AJAX request and use the code below to replace the content
        var container = $(this).closest(".k-content");
        container.html("Some text here");
    });

    As a general information, if the point of your scenario is to perform validation, you may check the validator extension of the framework. It will give you the opportunity to validate the form fields on the client side and show error messages in case of invalid input.

    Kind regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Swarup
    Swarup avatar
    17 posts
    Member since:
    Apr 2012

    Posted 25 May 2012 Link to this post

    Hi,

    i am also trying the same..i am having an input box for user to enter the vehicle no and when the user enters the submit button it will dispaly the vehicle details..i have got all the ui rich look but i am unable to connect to the php file from submit button

    Thanks,
    Swarup
Back to Top
Kendo UI is VS 2017 Ready