Add form inside panel bar and submit

[Tarim]

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>

[Tarim]

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,

[Iliana Dyankova]

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

[Tarim]

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>';

[Iliana Dyankova]

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

[Swarup]

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