Jquery dynamically added inputs to form have not POST data PHP - input

I'm adding <input> fields in form using jquery html() on click event.
$('#container').html('<input type="text" name="ce" value="some" >');
after submitting php POST i'm unable to see index ce with print_r($_POST);
is there any special method to add elements to dom for this ? please advise.

Solved ! Thanks for answering. in my scenario even with append it didn't work. now it's done with my previous code using html(). Problem was wrapping the <form>. my table is large i'm only pointing out the problem. my structure was suppose to like:
<table>
<tr>
<form id="myform">
<td><input type="text" name="name" ></td>
<td>
<div id="container">
<!-- dynamically generated inside this div against it's id (which didn't work) -->
<input type="text" name="ce" >
</div>
</td>
</form>
</tr>
</table>
i simply Put the entire table into the 'form' tags
<form id="myform">
<table>
<tr>
<td><input type="text" name="name" ></td>
<td>
<div id="container">
<input type="text" name="ce" > <!-- dynamically generated inside div (works!) -->
</div>
</td>
</tr>
</table>
</form>
it worked perfectly with both append() and html(). hope will be helpful for someone.

When you do $('#container').html you are not adding a new input, you are replacing all your content with this new input..
try $('#container').append tag
Look at this example -> https://jsfiddle.net/660a3t1g/
$('#myInputs').append('<input type="text" placeholder="LastName: " name="some" >');

Related

Checkbox Selection in Kendo Grid Wrapper

I've added kendo-grid like this:
https://www.telerik.com/kendo-vue-ui/components/grid/selection/#toc-checkbox-selection
But when I investigate my source code under console I don't see tags "id" and "for"
<td role="gridcell">
<input class="k-checkbox" data-role="checkbox" aria-label="Select row" aria-checked="false" type="checkbox">
<label class="k-checkbox-label k-no-text"></label>
</td>

xpath with following-sibling

I want to access the table with classname 'table table-hover' that should be under the class=='box-title' that contains the text 'OODR Items for next 20 Days'. Can any one please help me out to get the xpath for this ? I tried with following-sibling but no luck. Thanks in advance.
<?xml version="1.0" encoding="UTF-8"?>
<div id="topTenSellers" class="box box-solid box-primary frontpageWidget">
<div class="box-header">
<i class="fa fa-group" />
<h3 class="box-title">OODR Items for next 20 Days</h3>
<div class="box-tools pull-right">
<button class="btn btn-primary btn-sm" data-widget="collapse">
<i class="fa fa-minus" />
</button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th style="width: 10px">#</th>
<th>Booking</th>
<th>Item Start Date</th>
<th>Site</th>
<th>Supplier</th>
</tr>
<tr>
<td>
<strong>1</strong>
</td>
<td>
(642143)
</td>
<td>21/10/2017 00:00:00</td>
<td>Ski</td>
<td>OODR - Out of Date Range</td>
</tr>
</tbody>
</table>
</div>
<!-- /.box-body -->
</div>
You can try following instead of following-sibling as mentioned h3 and table nodes are not siblings:
//div[#id="topTenSellers"]//h3[#class="box-title" and .="OODR Items for next 20 Days"]/following::table[#class="table table-hover"]
If there is only one element of that class name then either of these will work. One thing to note though, selenium can struggle with spaces in class names depending on the version and browser. If you find that is the case, then use multiple contains to handle the spaces.
//table[contains(#class,'table table-hover')]
//table[#class = 'table table-hover']
If you need that the element as a child of that OODR Items for the next 20 days
//h3[contains(text(),'OODR Items for the next 20 days')]/parent::div/following-sibling::div/table[#class ='table table-hover']
This path uses your anchor point, "OODR Items..", then goes to the parent, then sibling, then to the item with the specified class name. Good luck!

Need help finding xpath of input field beside label

I have a dom structure like this
<tr class="">
<td class="labelCol requiredInput">
<label for="name_lastacc2" class="">
<span class="requiredMark">*</span>
Last Name</label>
</td>
<td class="dataCol col02">
<div class="requiredInput">
<div class="requiredBlock"></div>
<input id="name_lastacc2" maxlength="80" name="name_lastacc2" size="20" tabindex="3" type="text"></div>
</td>
<td class="labelCol">
<label for="00NG0000008Rybp">Business Ext.</label>
</td>
<td class="dataCol">
<input id="00NG0000008Rybp" maxlength="10" name="00NG0000008Rybp" size="20" tabindex="22" type="text"></td>
</tr>
I am trying to find the input box next to its label.
Eg:
Last Name: ________________
I have tried using xpath queries like
//label[contains(text(),'Last Name']/../following-sibling::*/div/input[#type='text']
but i get an [INVALID XPATH EXPRESSION] error. Where am i going wrong ?
Your path expression is missing the closing bracket of contains().
//label[contains(text(),'Last Name')]/../following-sibling::*/div/input[#type='text']
But that said, I do not think your path expression is correct now. Your expression will match any following sibling of the parent of label[contains(text(),'Last Name')]. What you want it to find is the input element that immediately follows.
The only reason your original expression only finds one input element is that the second one is nested inside one more div. But I do not think you should rely on that.
Instead, try:
//label[contains(.,'Last Name')]/following::input[1]
Then, the result is
<input id="name_lastacc2" maxlength="80" name="name_lastacc2" size="20" tabindex="3" type="text"/>

How do I implement something like this?

Well I have to implement something as follows:
I need to display a list of Contact IDs of all the contacts I have in my model.
<ul>
#for (int i = 0; i < Model.Contacts.ToList().Count; i++)
{
<li><a onclick="showContactInfoDialog(#Model.Contacts.ToList()[i].ContactId)">Model.Contacts.ToList()[i].ContactId</a></li>
}
</ul>
Each list element will be clickable, upon clicking which, a dialog will popup.
function showContactInfoDialog(id) {
document.getElementById('contact-dialog').style.display = 'block';
}
The dialog should show that particular contact's First Name, Last Name, Title, Email.
<div id="contact-dialog">
<form action="Contact/SaveContactEdits" method="post">
<table>
<tr>
<td>First Name</td>
<td>
<input type="text" name="FName"value="#Model.Contacts.ToList()[id].FirstName" /></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<input type="text" name="LName" value="#Model.Contacts.ToList()[id].LastName" /></td>
</tr>
<tr>
<td>Title</td>
<td>
<input type="text" name="Title" value="#Model.Contacts.ToList()[id].Title" /></td>
</tr>
<tr>
<td>Email Address</td>
<td>
<input type="text" name="Email" value="#Model.Contacts.ToList()[id].Email" /></td>
</tr>
</table>
<input type="submit" value="Save"/>
</form>
</div>
The dialog should let user make edits to the contact's details.
How do I do this? I'm having problem in passing the 'id' parameter to the dialog box element.
<div id="contact-dialog">
I'm having problem in passing the 'id' parameter to the dialog box
element.
The way you are using the id is not correct as you use it like the following. In the given code below (taken from your code) you are using the id as the index and that won't work most of the time especially if the ids does not start with 0.
Model.Contacts.ToList()[id]
That also won't work because the onclick event happens on the client side where the model is no longer available. So what you can do, since calling another controller method is not an option is to write all the details in a hidden field. Put them on a single container, for example one div per contact, the assign the id of the contact to the div. When the a tag is clicked, you read the values from the div and assign them to the form. All of this can be handled easier with tools like knockout, but if using it is not an option then here's the code that will do the trick.
// in your loop do this
// btw, it would be better if you Contacts object is an IList so you can do indexing easier
<li><a onclick="showContactInfoDialog(#Model.Contacts.ToList()[i].ContactId)">Model.Contacts.ToList()[i].ContactId</a>
<div id="#("contactrow"+Model.Contacts.ToList()[i].ContactId)">
#Html.HiddenFor(m=>Model.Contacts.ToList()[i].FirstName)
// do the same for the rest of the fields you want to show on the dialog
</div>
</li>
before you show the dialog, copy the contents to the form:
function showContactInfoDialog(id) {
// we are targetting this -> <input type="text" name="FName"
// assign an id (fname) for optimal performance
var container = $("#contactrow"+id);
        $("#fname").val(container.find('#FirstName').val());
// do the same for the rest of the fields
document.getElementById('contact-dialog')
.style.display = 'block';
}

Accessing a file dialog inside an iframe

I have an inline jsp page which has the code for the html type: file. The below displayed IFRAME tag is in the main jsp. I want to pass on the file name and submit this file dialog using the web driver. Basically want to do something like:
WebElement elem = driver.findElement(By.id("attachmentfile"));
elem.sendKeys("C:\\Users\\Public\\Pictures\\Sample Pictures\\Koala.jpg");
However, am not able to get a hold of the attachmentfile id. Any help would be appreciated. Thanks.
Main Jsp:
<IFRAME id=fileupload src="fileupload.jsp?type=uploadbutton"
frameBorder=0></IFRAME></TD></TR></FORM>
The fileupload.jsp is as below:
<html> <body>
<form name="frm_fileUpload" ENCTYPE="multipart/form-data"><%
<tr>
<td>
<input type="file" name="attachmentfile"
id="attachmentfile" onChange="uploadFile ();" />
<input type="button" name="uploadbutton" id="uploadbutton"
value="Upload" class="button" />
</td>
</tr>
</table>
</form>
</body>
</html>