Below is a working example of a form. I need to display additional text field if user selects "Other" in drop down menu.
Unfortunately, I can't use example below because it requires Mootools but I use Jquery. Don't want to force users to download one more file (Mootools) just for one form.
Is there any way how to do this without Mootools? Thanks.
<form action='user_friends_manage.php' method='POST'>
<table cellpadding='0' cellspacing='0'>
<select name='friend_type' onChange="if(this.options[this.selectedIndex].value == 'other_friendtype') { $('other').style.display = 'block'; } else { $('other').style.display = 'none'; }">
<option></option>
<option value='1'>Friend</option>
<option value='2'>Family</option>
<option value='other_friendtype'>Other</option></select>
</td>
<td class='form2' style='display: none;' id='other'> <input type='text' class='text' name='friend_type_other' maxlength='50' /></td>
</tr></table></form>
try this:
*if(this.value=='other_friendtype') {document.getElementById('other').style.display='block'}*
in onchage event of select control.
Related
I have a form which has 2 dropdowns questions.
Depending what the user answers, depends what will happen.
So for example
Are you human? The person answers yes and then another question show asking if they are employed, if they say yes to this then a sign up form will show.
If they say no to either question then some sorry cant sign you up text would show, with a form reset option ideally.
The first question seems to work fine, The issue is, it shows all messages for the second question which should be hidden until the value is selected and only one message should show.
Are you human?<br><select data-bind='value:thisSelect'>
<option value='none'>Select answer</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
<p data-bind="visible:thisSelect() === 'yes'">
Are you employed?<br>
<select data-bind='value:currentSelect'>
<option value='blank'>none</option>
<option value='form'>show form</option>
<option value='sorry'>Something else</option>
</select></p>
<br><br>
<p data-bind="visible:currentSelect() === 'blank'"> </p>
<p data-bind="visible:currentSelect() === 'form'">Hello, now display the sign up form</p>
<p data-bind="visible:currentSelect() === 'sorry'">Goodbye</p>
And my Knockout JS
var testing = {
thisSelect: ko.observable()
};
ko.applyBindings(testing);
var test = {
currentSelect: ko.observable()
};
ko.applyBindings(test);
My Js fiddle is here https://jsfiddle.net/Chazlie/sdpayfo7/12/
Another version I tried is here http://jsfiddle.net/Chazlie/2exnjm4t/24/ but this just replaces the message from the first question so is not what I was hoping it would do.
Thank you
For anyone else who is struggling with the same issue, I have solved this with the following, I believe the issue was that I was trying to call the bindings twice, instead of creating one variable and controlling it all there.
Are you human?<br><select data-bind="value: selectedChoice">
<option value="none">Select answer</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<p data-bind="visible: selectedChoice() === 'yes'">
Are you employed?<br>
<select data-bind="value: currentSelect">
<option value="blank">none</option>
<option value="form">show form</option>
<option value="sorry">Something else</option>
</select></p>
<br><br>
<p data-bind="visible:currentSelect() === 'blank'"> </p>
<p data-bind="visible:currentSelect() === 'form'">Hello, now display the sign up form</p>
<p data-bind="visible:currentSelect() === 'sorry'">Goodbye</p>
<script>
var viewModel = {
selectedChoice: ko.observable("none"),
currentSelect: ko.observable("none")
};
ko.applyBindings(viewModel);
</script>
I have a bit of trouble in Odoo, setting the selected attribute for a website-formular.
I have some data in an underlying model, which is displayed in a table inside the form. The lines are displayed correctly, but the values for the select-field are not set correctly. It always shows the first value in the select-list instead the saved value in the model.
<t t-foreach="quote_lines" t-as="quote_line">
<tr>
<td>
<!-- public categories for a selection field -->
<select t-attf-name="supplier_{{quote_line.line}}">
<t t-foreach="categories" t-as="c">
<t t-if="c.name==quote_line.supplier"><option t-field="c.name" selected="selected" /></t>
<t t-if="c.name!=quote_line.supplier"><option t-field="c.name" /></t>
</t>
</select>
</td>
....
</tr>
</t>
The form is loaded into odoo and displays fine - except that the -tag ignores my selected attribute. When i look in the generated html, the select/option values are set, just this attribute is ignored.
Any hints what i'm doing wrong or just don't see?
Try using selected="True"
Also, take a look at how website_sale does for countries:
<div t-attf-class="form-group #{error.get('shipping_country_id') and 'has-error' or ''} col-lg-6">
<label class="control-label" for="shipping_country_id">Country</label>
<select name="shipping_country_id" class="form-control" t-att-disabled=" 'disabled' if shipping_id >= 0 else ''">
<option value="">Country...</option>
<t t-foreach="countries or []" t-as="country">
<option t-att-value="country.id" t-att-selected="country.id == checkout.get('shipping_country_id')"><t t-esc="country.name"/></option>
</t>
</select>
</div>
https://github.com/odoo/odoo/blob/9.0/addons/website_sale/views/templates.xml#L1072-L1080
When I open my dropdown list, the width of list is greater than drop down box.
List width should same as drop down box.
You can use the following:
select, option { width: __; }
Keep in mind this may not work on Google Chrome. If you want a cross-browser solution you will probably have to use PHP to clip the String with SubStr. You can probably also use jQuery to set the length of the option text.
jQuery('#dropdown option').each(function() {
var optionText = this.text;
console.log(optionText);
var newOption = optionText.substring(0,19);
console.log(newOption);
jQuery(this).text(newOption + '..');
});
select, option {
width:150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table>
<tr>
<td>
<select id="dropdown" style="width:150px;">
<option value="test">123123123123123123123123123123</option>
<option value="test2">123123123123123123123123123123</option>
<option value="test3">123123123123123123123123123123</option>
</select>
</td>
<td>
<input type="text">
</td>
</tr>
</table>
JsFiddle
You will have to set the substring values of
var newOption = optionText.substring(0,19);
By yourself though.
Try to set width of options same as select box
#SelectBoxid {
width:150px;
}
#SelectBoxid option{
width:150px;
}
Okay so I am converting some code to jQuery and currently the js is just changing the focus to a button with the target id using whenever you press enter or double click in a <select> tag. document.getElementById.focus() and then document.getElementById.click() and returning true to submit this form. Just looking for some example on how to do same thing using jQuery instead. I understand that there is a .keypress() and a .dblclick() function in jQuery and thats what I think I should be using but passing the values of the input box or the select values are a little difficult since there are multiples of each in the form. FYI this is a search page that sends SQL to an oracle database.
Update-
$(document).ready(function(){
$('form').submit(function(){
$(this).keypress()
if(event.which ==13){
}
});
});
This is what i have so far not sure if i am on the right track or not.
so here is an example of how the form is.
<form>
<tr>
<td nowrap="nowrap"><b> Search by Number </b></td>
<td style="vertical-align:top"><input type="text" name="revisor_number" value=revisor_number>" size="55" maxlength="100" /><br/><span style="font-size:75%">commas between numbers (10,15,20), dash for range(10-20)</span><br/></td>
<td> <input type="submit" name="submit_number" id="submit_number" value="GO"/></td>
</tr>
<tr>
<td style="vertical-align:top" nowrap="nowrap"><b> Search by Type </b></td>
<td>
<select name="subtype[]" size="3" multiple="multiple" onkeypress="keyPress(event, 'submit_subtype');" ondblclick="keyPress(event, 'submit_subtype');">
<option value="">>--- All ---</option>
<td style="vertical-align:top"> <input type="submit" name="submit_subtype" id="submit_subtype" value="GO"/></td>
You need to move it outside of your submit function, replace it with:
$('input, textarea').keypress(function(e) {
if(e.which == 13) {
$(this).blur();
$('#submit').focus().click();
}
});
Assuming '#submit' is the ID of your button.
I don't know if i understand what you want,
but submitting a form with a button in jQuery is something like :
$('button').on('click', function(){
$('yourForm').submit();
});
I have a dropdownlist control and it's populated with a list of peoples names from a database. I want to enable a CheckBox control if the user selects a person in the list and disable the checkbox if they select BLANK (also an option in the list).
Here is a portion of my code...
<tr>
<td> <asp:Label ID="lblAssignedTo1" runat="server" Text="Assigned To:"></asp:Label></td>
<td><asp:DropDownList ID="ddlAssignedTo1" runat="server" AppendDataBoundItems="True" DataSourceID="dsAssignedTo" DataTextField="StaffName" DataValueField="StaffID"><asp:ListItem Text="" /></asp:DropDownList></td>
</tr>
<tr>
<td> <asp:Label ID="LabelEmail1" runat="server" Text="Send Email:"></asp:Label>
</td>
<td><asp:CheckBox ID="cbEmail1" runat="server" Checked="true" /></td>
</tr>
The checkbox is a trigger to send an email to the person selected from the list. I want it to default the checkbox to "enabled" if a person is selected from the list to make sure the program I am using is going to send an email later on.
I had a look at http://api.jquery.com/change/ for an example of this, but it's not using a checkbox control, so not sure if it would work. Sorry I am new to jScript.
Thanks in advance
A pure HTML and JavaScript approach would look something like this:
<select id="people">
<option value="">Select One</option>
<option value="person1">Person 1</option>
<option value="person2">Person 2</option>
<option value="person3">Person 3</option>
</select>
<input type="checkbox" name="sendemail" id="sendemail" disabled="disabled" />
$(document).ready(function() {
$('#people').change(function() {
if($(this).val() == '') {
$('#sendemail').attr('disabled', 'disabled');
}
else {
$('#sendemail').removeAttr('disabled');
}
});
});
http://jsfiddle.net/AEXpG/
In terms of your code, just grab the select list and checkbox ClientId and then apply the above jQuery code to them.