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());
}
});
Related
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>
<form data-request="onSend" data-request-update="'{{ __SELF__}}::attbanco': '#banco' "
data-request-flash >
<table>
<tr>
<td>Nome: </td> <td ><input type="text" id="nome" name="nome"></td>
</tr>
<tr>
<td>Idade: </td> <td ><input type="number" id="idade" name="idade" value="{{usuario.idade}}"></td>
</tr>
<tr>
<td>Telefone: </td> <td ><input type="text" id="telefone" name="telefone" value="{{usuario.telefone}}"></td>
</tr>
</table>
<button type="submit" >Enviar</button>
<input type="hidden" value="{{usuario.id}}" name="id">
this code work, saves the values on database, but i need manually refresh page to see the result on my
screen, someone know how refresh after submit?
Please, explain most simple possible, i am newbie
The best way to do what you want is to put the form in a partial and update it when the form is submitted.
Replace your form with this:
<div id="specialForm">
{% partial __SELF__~"::specialForm" %}
</div>
Create a partial to describe the form; I used specialForm. It should reload the form and clear the content.
<form data-request="onSend" data-request-update="'{{ __SELF__}}::attbanco': '#banco', '{{ __SELF__ }}::specialForm': '#specialForm' "
data-request-flash >
<table>
<tr>
<td>Nome: </td> <td ><input type="text" id="nome" name="nome"></td>
</tr>
<tr>
<td>Idade: </td> <td ><input type="number" id="idade" name="idade" value="{{usuario.idade}}"></td>
</tr>
<tr>
<td>Telefone: </td> <td ><input type="text" id="telefone" name="telefone" value="{{usuario.telefone}}"></td>
</tr>
</table>
<button type="submit" >Enviar</button>
<input type="hidden" value="{{usuario.id}}" name="id">
</form>
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
I have a problem, my client needs me to change a drop down menu to a radio button selection, 1 of them, needs to be endless options to be clicked, the other max of 4 out of 10.
This is what my form looks like:
<form id="contact-form" name="contact-form" method="post" action="submit.php">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="35%"><label for="name">Name</label></td>
<td width="52%"><input type="text" class="validate[required,custom[onlyLetter]]" name="name" id="name" value="<?=$_SESSION['post']['name']?>" /></td>
<td width="13%" id="errOffset"> </td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" class="validate[required,custom[email]]" name="email" id="email" value="<?=$_SESSION['post']['email']?>" /></td>
<td> </td>
</tr>
<tr>
<td><label for="subject">Area of Interest</label></td>
<td><select name="subject" id="subject">
<option value="" selected="selected"> - Choose -</option>
<option value="interactiveDinner">Interactive Dinner Series</option>
<option value="winemakerDinner">Winemaker Dinners</option>
<option value="Culinary Travel">Culinary Travel Adventures</option>
<option value="education">Food & Beverage Education</option>
<option value="host a Shikany Event">Host an event at your location</option>
<option value="partnership">Partner with us</option>
<option value="Hire Shikany">Hire Chef Michael Shikany for your event</option>
<option value="Charity Inquiry">Charity / Philanthrophy / Non-profit Inquiry</option>
</select> </td>
<td> </td>
</tr>
<tr>
<td valign="top"><label for="message">Please provide color to your inquiry</label></td>
<td><textarea name="message" id="message" class="validate[required]" cols="35" rows="5"><?=$_SESSION['post']['message']?></textarea></td>
<td valign="top"> </td>
</tr>
<tr>
<td><label for="captcha"><?=$_SESSION['n1']?> + <?=$_SESSION['n2']?> =</label></td>
<td><input type="text" class="validate[required,custom[onlyNumber]]" name="captcha" id="captcha" /></td>
<td valign="top"> </td>
</tr>
<tr>
<td valign="top"> </td>
<td colspan="2"><input type="submit" name="button" id="button" value="Submit" />
<input type="reset" name="button2" id="button2" value="Reset" />
height="16" alt="loading" /></td>
</tr>
</table>
</form>
<?=$success?>
</div>
It sounds like you need to use check boxes instead of radio buttons. That will allow the user to select as many of the options as they want. To limit the number of selections they can make to 4, you can use the code found at http://www.javascriptkit.com/script/script2/checkboxlimit.shtml
Hope this helps.
You will not be able to achieve what you describe with radio buttons, you will need to use checkboxes. This is simply so more than one option can be selected.
Also if you name each checkbox in each group with the same name, something like select1[] and select2[]. Then when you post your form back to the server, the selected options will magically be in an array.
If you want to limit the number of selected boxes, then you will have to use some javascript that fires on the click event of each checkbox to count the number selected and allow or disallow any further selections.
I've been searching a bit for a jquery plugin that could help me to edit an entire form in place without having to write markup for both the form and displaying the data. Where you can just click "edit" and then the form fields would appear instead of the text, and then save and the form fields would turn into text again.
Does anyone know of one?
Here's the plugin in its crudest form:
(function( $ ){
var YesNo = new Array();
YesNo["true"] = "Yes";
YesNo["false"] = "No";
$.fn.inline = function() {
this.each(function(){
if ($(this).is('table')) {
$(this).find('input, select, textarea').not('[type=button],[type=submit]').each(function(){
if($(this).attr("type")=="checkbox"){
$(this).parent().append("<span class=\"editable\">"+YesNo[$(this).attr('checked')]+"</span>");
$(this).hide();
//$(this).append("<span>"+$(this).val()+"</span>");
$(this).bind('blur',function(){
var t = YesNo[$(this).attr('checked')];
$(this).hide().next().show().text(t);
});
}
else{
$(this).parent().append("<span class=\"editable\">"+$(this).val()+"</span>");
$(this).hide();
//$(this).append("<span>"+$(this).val()+"</span>");
$(this).bind('blur',function(){
var t = $(this).val();
$(this).hide().next().show().text(t);
});
}
});
$(this).find('td').live('dblclick', function(){
$(this).children('.editable').hide().prev().show().focus();
});
}
});
};
})( jQuery );
Call to plugin:
<script type="text/javascript">
$().ready(function () {
$('#dataform').inline();
});
</script>
And the supporting example markup:
<table id="dataform">
<tr>
<td class="label">First Name</td>
<td><input type="text" value="Robin" /> </td>
<td class="label">Last Name</td>
<td><input type="text" value="Maben" /> </td>
</tr>
<tr>
<td class="label">City</td>
<td><input type="text" value="Bangalore" /> </td>
<td class="label">Country</td>
<td><input type="checkbox" checked="checked" /> </td>
</tr>
<tr>
<td class="styleLabel">Status</td>
<td class="styleControl">
<select id="Select1" class="styleDrop">
<option>Active</option>
<option>Inavtive</option>
<option>Pending</option>
</select></td>
</tr>
<tr>
<td>Description</td><td><textarea>Hello World</textarea></td>
</tr>
<tr>
<td>
<input type = "button" value="Click" />
<input type = "submit" />
</td>
</tr>
</table>