Unable to click on <label> to select a radio option in form - radio-button

Working on this form - form A trying to replicate the same behaviour as you can see in this one - form B. In the form B, if you click in the <label> of each option, it just works, while in form B, you have to click each one of the <input> elements if you want to make a different choice. Why?
Both samples have not CSS included, no CSS libraries loaded, it's just HTML
Form A
<form accept-charset="UTF-8" class="edit_order" id="edit_order_260" method="post">
<div style="display:none">
<input name="utf8" type="hidden" value="✓">
<input name="_method" type="hidden" value="put">
<input name="authenticity_token" type="hidden" value="N+XdGRhPcpB+999PYEU5Bs5bvdBYkLd4Ko+cNdhoppA=">
</div>
<h3 class="panel-title">
<label for="order_Best price"><input checked="checked" id="order_delivery_option_best_price" name="order[delivery_option]" onclick="enable_submit();" type="radio" value="best_price">
Best price</label>
</h3>
<h3 class="panel-title">
<label for="order_Best delivery date"><input id="order_delivery_option_best_delivery_date" name="order[delivery_option]" onclick="enable_submit();" type="radio" value="best_delivery_date">
Best delivery date</label>
</h3>
</form>
Form B
<form role="form">
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
</form>

Just remove for attribute from the labels. For example:
<label><input checked="checked" id="order_delivery_option_best_price" name="order[delivery_option]" onclick="enable_submit();" type="radio" value="best_price">Best price</label>
Or make for value match the value of the id attribute of corresponding input tag. Like this:
<label for="order_delivery_option_best_price"><input checked="checked" id="order_delivery_option_best_price" name="order[delivery_option]" onclick="enable_submit();" type="radio" value="best_price">Best price</label>
In this case you don't have to nest the input inside the label and it will still work:)

Related

Selenium Java select div based on nested element text

I have below HTML structure. Would like to select the label which has with value 3.x
I have tried below xpath expressions
"//label[contains(#class='options')]/div/p[contains(text(),'3.x')]"
"//div[#class='answerOpts']/label[contains(#class='options')]/div/p[contains(text(),'3.x')]"
But it didn't work. Received Exception org.openqa.selenium.NoSuchElementException: Unable to locate element:. Could you please let me know the solution?
HTML structure
<div class="answerOpts">
<input class="optionRadios" type="radio" name="2565" id="answer_9218" value="9218">
<label class="options searchable" for="answer_9218">
<div>
<p>2.x</p>
</div>
</label>
<input class="optionRadios" type="radio" name="2565" id="answer_9219" value="9219">
<label class="options searchable" for="answer_9219">
<div>
<p>3.x</p>
</div>
</label>
<input class="optionRadios" type="radio" name="2565" id="answer_9220" value="9220">
<label class="options searchable" for="answer_9220">
<div>
<p>4.x</p>
</div>
</label>
<input class="optionRadios" type="radio" name="2565" id="answer_9217" value="9217">
<label class="options searchable" for="answer_9217">
<div>
<p>1.x</p>
</div>
</label>
</div>
Here some xpath examples how you can get label element:
//label[normalize-space(.)='3.x']
//label[contains(#class,'options') and .//p[.='3.x']]
//label[contains(#class,'options') and #for and .//p[.='3.x']]
//p[.='3.x']/ancestor::label[1]
//p[.='3.x']/ancestor::label[contains(#class,'searchable')][1]
try with below xpath
.//div/p[text()='3.x']/parent::div/parent::label/preceding-sibling::input[1]

Can I use bootstrap form class outside form tag

This question is about best practice. Can I use form-horizontal class on a <div> element. I am trying to use style that these form class provides but I don't want to use form tag.
Is it good practice ?
<div class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
</div>

using Bootstrap3 form in laravel5.1

I am trying to make a form using bootstrap3 in laravel5.1 so that I can get values from user and store it on the database and want to redirect the same page.
here is the form part of my code --
<div class="row">
<form action="{{url('fastshops/menu')}} " method="post" role="form">
<legend>ADD NEW ITEM</legend>
<div class="form-group">
<label for=""></label>
<input type="text" class="form-control" name="ItemID" id="" placeholder="Item ID...">
<label for=""></label>
<input type="text" class="form-control" name="ItemName" id="" placeholder="Item Name...">
<label for=""></label>
<input type="text" class="form-control" name="SellPrice" id="" placeholder="Sell Price...">
<label for=""></label>
<input type="text" class="form-control" name="NetPrice" id="" placeholder="Net Price...">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
but this part action="{{url('fastshops/menu')}} is not working ! If I click on the submit button I am having TokenMismatchException ! please help me out.
thanks in advance.
add this
<input type="hidden" name="_token" value="{{Session::token()}}"/> or
<input type="hidden" name="_token" value="{{csrf_token()}}"/>
inside your form.
Laravel 5 automatically check for CSRF on all Post request for all the routes. Read the docs, they are pretty self explainatory

Bootstrap input box - smaller width required

I know this has been asked before but I the answers don't seem to work for me.
I am looking to decrease the size of my textbox and line it up beside a select and some text.
Here is my code.
<div class="controls">
<div class="btn-group">
<label class="btn btn-default">
<input type="checkbox" name="blah" value="true">
Title
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>5</option>
<option>8</option>
</select>
<input class="form-control col-xs-1" placeholder="x" type="text" required="required">this should be beside the textbox. I also want the textbox to be small. One character small.
</label>
</div>
</div>
Also in bootply.
http://www.bootply.com/NePcbYQqfm
Thank you in advance!
Try this:
<div class="controls">
<div class="btn-group col-xs-4">
<label class="btn btn-default">
<input name="blah" value="true" type="checkbox">
Title
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>5</option>
<option>8</option>
</select>
</label>
<input class="form-control input-sm" placeholder="x" required="required" type="text">this should be beside the textbox. I also want the textbox to be small. One character small.
</div>
</div>
It will work.

How to create an array of sub-forms with CForm?

I have an array of models, all of them being instances of one class. I need to create a form which contains subforms corresponding to the models from the array.
Have to use CForm, because i've made a nice small extension of it, which can render subforms in CJuiTabs. In the code used at the moment POST-parameter names are wrong, because they get prefixed by the name of the class of a model from the array.
Below you can see a snippet of HTML-code generated. See those YPageInfo[...] named inputs? That's the problem - only one set of inputs with this prefix gets received by the server.
<div style="visibility:hidden"><input type="hidden" value="1" name="yform_20bd4d2c" id="yform_20bd4d2c" /></div>
<div class="row field_name">
<label for="YPageRevision_name">Name</label>
<input name="YPageRevision[name]" id="YPageRevision_name" type="text" maxlength="45" />
</div>
<div class="row field_parent_id">
<label for="YPageRevision_parent_id">Parent Id</label>
<input id="YPageRevision_parent_id_hidden" name="YPageRevision[parent_id]" type="hidden" /><input id="YPageRevision_parent_id" type="text" value="" name="autocomplete-field" />
</div>
<div id="yw1">
<ul>
<li>en</li>
<li>ru</li>
</ul>
<div id="enSubFormTab"><div class="row field_title">
<label for="YPageInfo_title" class="required">Title <span class="required">*</span></label>
<input name="YPageInfo[title]" id="YPageInfo_title" type="text" maxlength="256" />
</div>
<div class="row field_content">
<label for="YPageInfo_content" class="required">Content <span class="required">*</span></label>
<textarea name="YPageInfo[content]" id="YPageInfo_content"></textarea>
</div>
</div>
<div id="ruSubFormTab"><div class="row field_title">
<label for="YPageInfo_title" class="required">Title <span class="required">*</span></label>
<input name="YPageInfo[title]" id="YPageInfo_title" type="text" maxlength="256" />
</div>
<div class="row field_content">
<label for="YPageInfo_content" class="required">Content <span class="required">*</span></label>
<textarea name="YPageInfo[content]" id="YPageInfo_content"></textarea>
</div>
</div>
</div>
<div class="row buttons"><input name="submit" type="submit" value="Create" />
</div>
I found one way to do what I needed.
In the elements property of the sub-form there are some inputs declared. Each standard input element declared there is an instance of CFormInputElement, so it has the attributes property. Here you can set any HTML attribute, which will be rendered in the resulting input tag. I put my custom name attribute here, and change it in a loop, where i create sub-forms configuration items for the main CForm.
Maybe there is a better way?