I want to fill a HTML form, I am using mechanize module of python.
my HTML code is like that for checkbox and dropdown is :
<div id="post_cd">
<input role="checkbox" id="cd_info" class="cbox" type="checkbox">
<span class="s-iso" style="display:none"></div>
<label for="type" id="cdtype" class="cd" style="width:60px;margin:1px;float:left;text-align:right;">CD type:</label>
<select id='cdtype' class=" ui-iso" style="width:100px;margin:1px;float:left;">
<option value="CD1">Error1</option>
<option value="CD2">Error1</option>
<option value="CD3">Error2</option>
</select>
I have tried with following but getting errors:
for checkbox: form.find_control("cd_info").items[0].selected = True
for dropdown: form['cdtype']= ['Error1']
error:
raise ControlNotFoundError("no control matching "+description)
mechanize._form.ControlNotFoundError: no control matching name 'cd_info'
raise ControlNotFoundError("no control matching "+description)
mechanize._form.ControlNotFoundError: no control matching name 'cdtype'
There is no <form> in your HTML code. So probably form is not pointing to an element around the HTML code you provide at the moment you call find_control or the subscription operator.
You can try to print the text of the form to be sure you are looking at the right thing:
print form
Related
I think I am having an issue with value binding. I have 2 dropdowns on my page currently. The rest of the page is using PrimeNg for UI and would like to make these dropdowns look the same as the rest of the page. How should I go about making this work.
One dropdown is a supervisor list.
<div class="ui-g form-group">
<label for="supervisors">Supervisors * </label>
<select
class="form-control"
id="supervisors"
required
[(ngModel)]="model.supervisor"
name="supervisor"
>
<option *ngFor="let sup of supervisors" [value]="sup">
{{sup}}
</option>
<div
[hidden]="supervisors.valid || supervisors.pristine"
class="alert alert-danger"
>
Supervisor is required
</div>
</select>
</div>
The other is a leave code list
<div class="ui-g-12 ui-md-1" id="test">
<label for="codes">Leave Codes * </label>
<select
class="form-control"
id="codes"
placeholder="Select Leave Code *"
required
[(ngModel)]="model.code"
name="code"
>
<option *ngFor="let cod of codes" [value]="cod">{{cod}}</option>
</select>
</div>
I have 2 arrays of values being called from my .ts file
supervisors = ['Alex',"Jones",'Joe','Rogan'];
codes = ['Personal Leave','Vacation Leave', 'Sick Leave'];
When I use the tags I just get an empty drop down. I tried just using initially but then I was not able to get the required fields to validate.
Did you import DropdownModule?
import {DropdownModule} from 'primeng/dropdown';
See the documentation, html binding should be
<p-dropdown [options]="supervisorList" [(ngModel)]="supervisor"></p-dropdown>
where supervisorList will be defined as SelectItem in controller and needs to be in a label + value format.
supervisorList: SelectItem[];
this.supervisorList= [
{label: 'Alex', value: 'Alex'},
...
];
I'm using HTML <select> Tag, so as it is known allready:
The element is used to create a drop-down list.
The tags inside the element define the available
options in the list.
I want to achieve next thing:
after I select value in a drop-down list I would like to set select's value to a default value which is "-/-" ..
Here is how it looks:
And code:
<div class="form-group">
<label class="control-label dash-control-label col-sm-3" for="">Select Select2:</label>
<div class="col-sm-3">
<select id="taxSelect" class="form-control dash-form-control select2" style="width: 100%;" data-minimum-results-for-search="Infinity">
<option disabled [ngValue]="null" >-/-</option>
<option *ngFor="let code of codes" [value]="code.id">
{{code.title}}
</option>
</select>
</div>
I mean when I open modal again I want to see "-/-" as it is default value, and not the value that I previously selected.. So basically onSubmit() in typescript I would like to reset to set again "-/-" as a default value..
P.S I've tried:
show() {
$('select').val('0');
$('select').val($('select').children().eq(0).val());
$('select2').val('0');
$('select2').val($('select').children().eq(0).val());
$("select[title='-/-']").attr('selected', 'selected');
}
So basically when Modal is shown I wanted to reset drop-down values to "-/-" but it doesn't work..
Thanks a lot guys!
CHEERS!
I am new in angularjs. Currently I am working on select box in angularjs. I need to show select box with database values and with default selected values.For me values are coming in drop down but initial selection is not working.
Here is my code Any answer or suggestions is highly appreciated
html
<body ng-controller='CompositionController'>
<input type="hidden" name="selectedRegion" id="selectedRegion" value="14" />
<label class="popupboxtext">Select Substrate</label>
<select class="popupselect" ng-options="sb.SUBSTRATE_ID as sb.SUBSTRATE_NAME for sb in Substrate" ng-model="selectedSubstrate" >
<option value="" >Select Substrate</option>
</select><br/>
<label class="popupboxtext">Coating Side 1</label>
<select class="popupselect" ng-options="CS1.COATING_ID as CS1.COATING_NAME for CS1 in CoatingS1" ng-model='selectedCoatingS1'>
<option value="" >Select Coating</option>
</select>
</body>
js file
$scope.selectedCoatingS1 = invalue;
here this 'invalue' I am fetching from database. Here i am having the problem
$scope.selectedCoatingS1 = '29';
Here is the link you can check this for further details
http://54.148.151.90/test
if i am giving direct value with cots then its working perfectly but with database value its not working . Any suggestions are highly appreciated
Thank you
In angular the select controls works with objects so instead of setting a string ('29') to the scope... try setting the whole object, something like:
$scope.selectedCoatingS1=$scope.CoatingS1[0];
Where defaultCoat should be something like:
{
COATING_ID:'someId',
COATING_PROR1:'some property,
...
}
I'd this html code:
<li>
<label>
<input type="radio" name="payment[ebzc_option]" value="saved" />Saved</label>
<div class="input-box">
<select name="payment[ebzc_method_id]">
<option value="">Please select...</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</li>
<li>
<label>
<input type="radio" name="payment[ebzc_option]" value="saved" />New</label>
<div class="input-box">
<select name="payment[ebzc_method_id]">
<option value="">Please select...</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
</li>
and I need to toggle the <div class="input-box"> adjacent to the checked radio (name="payment[ebzc_option]") button using prototype.
Can anybody help me to do this? I'd not worked on prototype before.
any hint on selecting radio button by name attribute (name="payment[ebzc_option]") in prototype.js
Set up a function that you can call both at page load and whenever a radio button is clicked.
function setSubmenuVisibility(){
$$('input[type="radio"]').each(function(elm){
if(elm.up('label') && elm.up('label').next('div')){
var sub = elm.up('label').next('div');
if(elm.checked){
sub.show();
}else{
sub.hide();
}
}
});
}
setSubmenuVisibility();
document.on('click', 'input[type="radio"]', function(evt, elm){
setSubmenuVisibility();
});
You can toggle the visibility using Element.toggle
Many ways to do this
you could use the DOM traversal methods if the HTML will be the same
$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){
this.nextSiblings().first().toggle();
});
In this instance we use $$() to select all of the radio buttons with the name attribute payment[ebzc_option] and use the invoke() method to call observe() on all of them. In the closure of the event handler this is the element the event happened on, then you collect all of the next siblings using nextSiblings(), pick the first() one out of the array and run toggle() on it.
This is not ideal because it depends on the HTML structure to stay the same.
Lets try adding an id to the divs you want to toggle (ids need to be unique like you discovered), and lets add that id to the radio button in a data attribute. Data attributes can be anything you want just need to start with data-
<div class="input-box" id="input-box_saved">
<input type="radio" name="payment[ebzc_option]" value="saved" data-toggle="input-box_saved" />
Now our observer statement changes to
$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){
$(this.readAttribute('data-toggle')).toggle();
});
you could even extend the observer closure to make sure only one of the divs is open at a time
$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){
$$('.input-box').invoke('hide');
$(this.readAttribute('data-toggle')).show();
});
EDIT I missed that the <input> and <div> were not siblings as the closing </label> was going off the right side of the box. In this instance the DOM traversal would be a bit more up() and down() to get it to work.
I have a checkbox in my HTML that looks like this:
<input type="hidden" name="<TMPL_VAR NAME=SHORT>" value="<TMPL_VAR NAME=ELSE>">
<input type="checkbox" name="<TMPL_VAR NAME=SHORT>" id="checkbox-2" value="<TMPL_VAR NAME=FLAG>" class="checkbox mid-margin-left">
<label for="checkbox-2" class="label"><TMPL_VAR NAME="NAME"></label>
Basically, what I am trying to accomplish here is for one value to be sent if the checkbox is checked, and another to be sent if the checkbox is not checked (a default value basically). Now, this is dynamic, so I am really unable to do something in the CGI to say, "If this is defined then it means this, and if it's not then it means something else."
Anyway, when I leave the box unchecked, I get the value from the hidden input. However, when I check it I get both values. Now, I could say, "If this has more than one value, then the value to use is the second one." But, what if I am getting the value of a select list that accepts multiple values? In that situation I don't want to say take the 2nd value, because all values sent are valid.
So, what I am trying to say is this: "If it is a checkbox, and there is more than one value, then take the second value; otherwise, take the first."
Any ideas on how to do this? Maybe I am not doing this right? Any suggestions on a better way to accomplish this? I don't want to use a radio button for a boolean (yes/no), but if that's the only way, then so be it.
If you do not want JS, I would suggest you change your form so there's an alternate value for every field with a prefix on the name:
<form id="myform" method='post' action="/echo/json/">
<input type="hidden" name= "alternate-foo" value="foo not selected" />
<input type="hidden" name="alternate-bar" value="first bar" />
<p>Foo <input type='checkbox' name='foo' id='foo' value='foo selected' /></p>
<p>
<select name='bar' id='bar' multiple>
<option value='first bar'>bar 1</option>
<option value='second bar'>bar 2</option>
<option value='third bar'>bar 3</option>
</select>
</p>
<p><input type='submit' name='submit' value='submit' /></p>
</form>
In your Perl code, you could do something like this:
use strict;
use warnings;
use CGI;
my $q = CGI->new;
$q->param( 'foo', $q->param('alternate-foo') ) unless $q->param('foo');
$q->param( 'bar', $q->param('alternate-bar') ) unless $q->param('bar');
Or, to be more dynamic:
use 5.014;
foreach my $alt ( grep { /^alternate-/ } $q->param ) {
my $name = $alt =~ s/^alternate-//r;
$q->param( $name, $q->param( $alt )) unless $q->param($name);
}
I would do it with JavaScript and jQuery for convenience. Only downside is, it will not work if your clients have disabled JS.
Your form could remain pretty much the same. I made a simple example. Make sure there are ids on everything.
<form id="myform" method='post' action="/echo/json/">
<input type="hidden" id="hidden-foo" value="foo not selected" />
<p>Foo <input type='checkbox' name='foo' id='foo' value='foo selected' /></p>
<p>
<select name='bar' id='bar' multiple>
<option value='first bar'>bar 1</option>
<option value='second bar'>bar 2</option>
<option value='third bar'>bar 3</option>
</select>
</p>
<p><input type='submit' name='submit' value='submit' /></p>
</form>
Now here's the JS code, which should be placed below the form or inside an event handler for the load event:
$(document).ready(function() {
$("#myform").submit(function(){
// if checkbox is not checked, change value and check so it's transmitted
if (! $("#foo").is(":checked")) {
$("#foo").val($("#hidden-foo").val()).prop('checked', true);
}
// take first option if no option is selected
if( $("#bar option:selected").length == 0 ) {
$("#bar option:first").attr('selected','selected');
}
})
});
It's pretty straight-forward:
if the checkbox is not ticked, it will change it's value to the one of the hidden field and tick it.
if no option is selected, it will select the first one
Here's a jsFiddle to demonstrate. You should open your Firebug console to see the output.
It should now be fairly easy to turn this into something dynamic that can handle all form fields without your template engine having to meddle with the JS code.