Cheerio: Select values of multiple inputs - jquery-selectors

I have a table of inputs like this:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td><input value="Jill" /></td>
<td><input value="Stein" /></td>
<td><input value="30" /></td>
</tr>
<tr>
<td><input value="Eve" /></td>
<td><input value="Jackson" /></td>
<td><input value="94" /></td>
</tr>
</table>
Each of these inputs also has a class of "contact-cell".
How can I get these all of these values at once using Cheerio?
If I do $('.contact-cell').val() I only get the first input's value Jill. I would love to have a result of 'Jill, Stein, 30, Eve, Jackson, 94', 'Jill Stein 30 Eve Jackson 94' or ['Jill', 'Stein', '30', 'Eve', 'Jackson', '94'] or something along those lines.

$('.contact-cell').get().map(input => $(input).attr('value'))
The get() turns it into an array of js elements

Related

how to get the input text value which is inside the table column in Dialog in Karate

I got a table like below that renders in the dialog box. I am trying to capture the value of input which is inside the column.
The Xpath is /html/body/div[9]/div[2]/table/tbody/tr[8]/td[2]/table/tbody/tr[1]/td[1]/input'
I did try multiple ways to get required value but could't get it so someone help me how to capture input value which is inside the particular , full xpath and css path is not working.
<table>
<tbody>
<tr>
<td>Room type:</td>
<td><b>
Deluxe Balcony Riverview - All Inclusive
</b>
</td>
</tr>
<tr>
<td>Date:</td>
<td><b>
01 Mar 2022
</b>
</td>
</tr>
<tr>
<td>Minimum Stay:</td>
<td>
<input name="txtMinimumStay" type="text" value="1" id="txtMinimumStay" class="helper" title="The minimum nights a guest must stay in this room type" style="width:40px;">
night(s)
</td>
</tr>
<tr>
</tr>
<tr>
<td>Maximum Stay:</td>
<td>
<input name="txtMaximumStay" type="text" value="0" id="txtMaximumStay" class="helper" title="The maximum nights a guest can stay in this room type" style="width:40px;">night(s)
</td>
</tr>
<tr>
<td>Sold:
</td>
<td><b>
0
room(s)</b>
</td>
</tr>
<tr>
<td>Allocation:</td>
<td>
<table>
<tbody>
<tr>
<td width="70px">
<input name="textAllocation" value="0" id="textAllocation" type="text" style="width: 50px">
</td>
<td style="font-size: 9px">Extra adult rate (per night):</td>
<td>
<input name="txtAdultPrice" type="text" value="21" maxlength="4" id="txtAdultPrice" class="helper" title="Extra person charge for adults" onchange="updateGuestCapacity(false)" style="width:40px;">
$AUD
<br>
<span id="Regularexpressionvalidator1" style="display:none;">Please only enter a whole number for the adult rate</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Rate:</td>
<td>
<br>
<table>
<tbody>
<tr>
<td width="70px">
<input name="txtQuickRate" type="text" id="txtQuickRate" style="width: 50px;" value="85">
$AUD
</td>
<td style="font-size: 9px">Extra child 1 rate (per night):</td>
<td>
</td>
<td>
<input name="txtChildPrice" type="text" value="15" maxlength="4" id="txtChildPrice" class="helper" title="Extra person charge for children 1" onchange="updateGuestCapacity(false)" style="width:40px;">
$AUD
<br>
<span id="Regularexpressionvalidator2" style="display:none;">Please only enter a whole number for the child 1 rate</span>
</td>
</tr>
<tr>
<td></td>
<td style="font-size: 9px">Extra child 2 rate (per night):</td>
<td>
</td>
<td>
<input name="txtChild2Price" type="text" value="7" maxlength="4" id="txtChild2Price" class="helper" title="Extra person charge for children 2" onchange="updateGuestCapacity(false)" style="width:40px;">
$AUD
<br>
<span id="Regularexpressionvalidator3" style="display:none;">Please only enter a whole number for the child 2 rate</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Availability Status:
</td>
<td>
<table id="rblStopSellDialog" cellspacing="0" cellpadding="0" style="font-size:8pt;border-collapse:collapse;">
<tbody>
<tr>
<td><input id="rblStopSellDialog_0" type="radio" name="rblStopSellDialog" value="0" checked="checked"><label for="rblStopSellDialog_0">Available</label></td>
</tr>
<tr>
<td><input id="rblStopSellDialog_1" type="radio" name="rblStopSellDialog" value="1"><label for="rblStopSellDialog_1">Stop sell</label></td>
</tr>
<tr>
<td><input id="rblStopSellDialog_2" type="radio" name="rblStopSellDialog" value="2"><label for="rblStopSellDialog_2">Closed to arrival</label></td>
</tr>
<tr>
<td><input id="rblStopSellDialog_3" type="radio" name="rblStopSellDialog" value="3"><label for="rblStopSellDialog_3">Closed to departure</label></td>
</tr>
<tr>
<td><input id="rblStopSellDialog_4" type="radio" name="rblStopSellDialog" value="4"><label for="rblStopSellDialog_4">On Request</label></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

cloning input text in a form

I have the following form:
<form method="post">
<table>
<tr>
<td>Foo</td><td><input type="text" name="field1" /></td>
</tr>
<tr>
<td>Bar</td><td><input type="text" name="field2" /></td>
</tr>
<tr>
<td>Foo</td><td><input type="text" name="field3" /></td>
</tr>
<tr>
<td>Test</td><td><input type="text" name="field4" /></td>
</tr>
<tr>
<td>Foo</td><td><input type="text" name="field5" /></td>
</tr>
</table>
I'd like to insert text in field1 and automatically cloning it in all fields that are in foo rows. For example, if I insert "abcd" in field1, also field3 and field5 could be filled automatically with the same "abcd". Is it possible?
Using jquery it can be done this way:
$("input[name='field1']").on("input change", function() {
$("input[name='field3'],input[name='field5']").val($(this).val());
});
$("input[name='field1']").keyup(function(e){
if(e.keyCode == 13)
{
$( "input[name^='field']" ).val($(this).val());
}
});

create a table in td using zend decorator

I am using zend forms and zend decorators.
I want to create a sub-table in a parent table's td. like this:
<table>
<tr>
<td>Username:</td>
<td>
<table>
<tr>
<td> <input type="text"> </td>
<td> <img/> </td>
</tr>
</table>
</td>
</tr>
</table>
How can i create this table.
can anyone help me plz.
This might not be the best solution, as you maybe able to create your own decorator to render the form (with the sub-tables). But you could always render each form element individually, using the renderViewHelper() function
<table>
<tr>
<td>Username:</td>
<td>
<table>
<tr>
<td><?php echo $this->form->username->renderViewHelper() ?></td>
<td> <img/> </td>
</tr>
</table>
</td>
</tr> <tr>
<td>AnotherElement:</td>
<td>
<table>
<tr>
<td><?php echo $this->form->anotherElement->renderViewHelper() ?></td>
<td> <img/> </td>
</tr>
</table>
</td>
</tr>
</table>

Is there any way to create form with multiple submit buttons on Spring MVC using annotations?

I'm trying to create simple add/remove form using annotation based Spring MVC.
'Add' functionality comes smoothly, but when I tried to add another button to form i've got stuck.
Here is my code:
Controller actions:
#RequestMapping(value = "/books/documentType.do", method = RequestMethod.GET)
public String getDocType(
#RequestParam(required = false, value = "id") Long id,
ModelMap model) {
DocTypeDTO docType = new DocTypeDTO();
if (id != null)
docType = docTypeConverter.getDTO(id);
model.addAttribute("docType", docType);
return "/books/documentType";
}
#RequestMapping(value = "/books/documentType.do", method = RequestMethod.POST)
public String setDocType(
#ModelAttribute("docType") DocTypeDTO docType,
BindingResult result,
SessionStatus sessionStatus
) {
docTypeValidator.validate(docType, result);
if (result.hasErrors())
return "/books/documentType";
else {
docTypeConverter.saveDTO(docType);
sessionStatus.setComplete();
return "redirect:/books/documentTypes.do";
}
}
Awfully markuped form:
<form:form method="post" commandName="docType" id="editForm">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#dbdbdb">
<tr>
<td></td>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td class="spacer"><img src="/images/spacer.gif" width="116" height="1" border="0"/></td>
<td class="spacer"><img src="/images/spacer.gif" width="216" height="1" border="0"/></td>
</tr>
<tr>
<td class="form-cell-text-underlined">Отображать на сайте</td>
<td colspan="2">
<form:checkbox path="shownOnSite"/>
</td>
</tr>
<tr>
<td class="form-cell-text-underlined">Международный</td>
<td colspan="2">
<form:checkbox path="international"/>
</td>
</tr>
<tr>
<td class="form-cell-text-underlined">Внутренний код</td>
<td colspan="2">
<form:input path="internalCode"/>
</td>
</tr>
<tr>
<td class="form-cell-text-underlined">Код</td>
<td colspan="2">
<form:input path="code"/>
<form:errors path="code"/>
</td>
</tr>
<tr>
<td class="form-cell-text-underlined">Код IATA</td>
<td colspan="2">
<form:input path="codeIATA"/>
</td>
</tr>
<tr>
<td class="padded-underlined">Название</td>
<td colspan="2">
<form:input path="name"/>
<form:errors path="name"/>
</td>
</tr>
<tr>
<td class="padded-underlined">Название(Англ.)</td>
<td colspan="2">
<form:input path="nameEn"/>
</td>
</tr>
<tr>
<td colspan="3">
<input type="submit" value="Сохранить">
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
Thanks!
With Spring MVC 3, this is reasonably straight-forward to do with just JSP and Controller. For example, these two submit buttons handle 'previous' and 'save' actions:
<input value="Save" name="save" type="submit" id="btnSave" class="submit_button">
<input value="Previous" name="previous" type="submit" id="btnPrevious" class="submit_button">
Then, in the controller, you accept the input name as a param in the request mapping, along with the controller 'address':
#RequestMapping(value="thisForm.form", params="save")
public String save() {
// save
}
#RequestMapping(value="thisForm.form", params="previous")
public String doPreviousStuff() {
// get mapping for previous page and return
}
If you really want two submit buttons on your form, you can do it with Javascript like this (using jQuery in this example):
<SCRIPT language=JavaScript>
function remove() {
$('#editForm').attr("action", "documentTypeRemove.do");
$("#editForm").submit();
}
</SCRIPT>
...
<button type="button" onclick="remove();">Remove</button>
Then create another RequestMapping in your controller:
#RequestMapping(value = "/books/documentTypeRemove.do", method = RequestMethod.POST)
public String removeDocType(...

Is my form laid out in a table accessible?

I am making a form to search for colleges based on athletic programs offered and the division of the sport. I have laid the form out in a table. The "all divisions" checkbox selects all the checkboxes for that sport.
I know screen readers have both forms and tables mode. Is my current design accessible or should I add labels for each individual checkbox and position them off-screen for visual users? This also needs to meet at least Section 508 requirements.
Current code for the tables looks like this:
<table>
<tr><th scope="col" colspan="2">All Divisions</th>
<th scope="col">Div I</th>
<th scope="col">Div II</th>
<th scope="col">Div III</th>
<th scope="col">Other</th>
</tr>
<tr><th scope="row">Baseball</th>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr><th scope="row">Basketball</th>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
</table>
What I want to know is whether or not a screen reader is able to associate the table headings with the checkboxes.
It is accessible. I coppyed the code into a html document and was able to read the check boxes with headers in both firefox 3.0 and Internet explorer 7 using Jaws version 10.0 as the screen reader.
I think you're going to need individual labels for each of the checkboxes, but you may be able to use the headers attribute on the table cells to accomplish the same effect.
Ok using the "ID" and "Headers" attributes in tables (scroll down to section).
<table>
<tr><th id="all" colspan="2">All Divisions</th>
<th id="div1">Div I</th>
<th id="div2">Div II</th>
<th id="div3">Div III</th>
<th id="other">Other</th>
</tr>
<tr><td id="baseball">Baseball</td>
<td headers="baseball all"><input type="checkbox" /></td>
<td headers="baseball div1"><input type="checkbox" /></td>
<td headers="baseball div2"><input type="checkbox" /></td>
<td headers="baseball div3"><input type="checkbox" /></td>
<td headers="baseball other"><input type="checkbox" /></td>
</tr>
</table>