We have a vue-js page (#vue/cli 4.5.6) with numerous components, which mostly works fine. One component is doing something I don't understand: There are two radio boxes, one at the top of the page, one at the bottom. They seem to be completely unrelated; here's one
<template v-for="qSection in qSections">
...
<!--- loop to output individual questions here --->
<tr v-for = "question in qSection.questions">
<td>
{{ question.txt }}
<div v-if="question.incf">
<br/>
<textarea rows="2" cols = "80" :name= "question.cmt"
v-model="question.cmt" placeholder = "Comments here"
class="hideOnPrint"
/>
<div class="print-only"> {{ question.cmt }} </div>
</div>
</td>
<!-- okay, three more tds to hold radio box-->
<template v-for="icnt in [1,2,3]">
<td>
<label v-if="question.otherAns" class="other-ans-label">
{{ question.otherAns[icnt].txt }}
</label><br/><br/>
<input type = "radio" :name= "question.quesn" :value = "(icnt%3)"
v-model="question.answer"/>
</td>
</template>
</tr>
Here's the other
<template v-if="section.otype1 != 'Laboratory'">
<div class="hideOnPrint">
<input type = "radio" :name = "section.accept" :value="1"
v-model="section.accept"
>
{{acceptPhrase}}
</input>
<br/><br/>
<input type = "radio" :name = "section.accept" :value="0"
v-model="section.accept"
>
Investigation is incomplete. See comments.
</input><br/><br/>
</div>
</template>
So what has been happening is that clicking the radio button in the bottom area (only for value="1") un-clicks the radio button in the top area (question.answer, whichever is chosen).
According to the Vue app in Developer Tools, the top area data is still set: questions.answer = 2 still, say. And indeed if I set it equal to 1 there and back to 2, that radio box gets re-checked correctly.
How is this happening and what do I change to fix it? Or what should I do to diagnose it. Thanks!
I'd like to put up a working example but not sure how; the rest of the page has a lot of parts.
Oh, wow: I realized my mistake. It's those lines in the code,
:name= "question.quesn"
and
:name = "section.accept".
These are setting the name of the radio box to the value of those fields. They both end up equal to 1, and therefore the two radio boxes become a single radio box. Clicking one turns the other one off.
Shouldn't be using name at all; v-model does the job.
Related
I have this problem: In a form, I want to display the info from a box (idCreditorCnpCui) only if the second or the third option is selected from the form (if "P" or "O" option is selected). While I select any of these options, the box appears as it should. The problem I encountered is that when I press the "sent" button (with O or P option), the idCreditorCnpCui box disappears from the view.
This is the HTML with the options of the form:
<div class="form-field">
<label for="payment.creditorOrganizationOrPerson"><localization:localize key="creditorOrganizationOrPerson.label"/></label>
<div class="form-field-element">
<input type="radio" property="payment.creditorOrganizationOrPerson" value="N" onclick="display();" /> N <br>
</div>
<div class="form-field-element">
<input type="radio" property="payment.creditorOrganizationOrPerson" value="P" onclick="display();" /> P <br>
</div>
<div class="form-field-element">
<input type="radio" property="payment.creditorOrganizationOrPerson" value="O" onclick="display();" /> O
</div>
</div>
This is the box I want to be display or no according the option selected:
<div class="form-field" id="idCreditorCnpCui" style="display:none">
<label for="payment.creditorCnpCui"><localization:localize key="creditorCnpCui.label"/></label>
<div class="form-field-element">
<input type="text" property="payment.creditorCnpCui" size="36" maxlength="35" styleClass="input-field" styleId="payment.creditorCnpCui"/>
</div>
And this is the js
function display(toDisplay,idDiv){
if(toDisplay == false){
document.getElementById(idDiv).style.display = "none";
}else{
document.getElementById(idDiv).style.display = "block";
}
}
display(false,"idCreditorCnpCui");
If I turn the final line to "display(true, "idCreditorCnpCui"), the box appear even when the option "N" is selected by default. That should not happen since the N option means the idCreditorCnpCui box is hidden. Any idea please.
I want a field to be display just if an option is selected. But when I send the form, the field disappears even when the option that display that field is selected
I have problem that I don't know how to solve. I need to set to TRUE checkbox declared as:
<li class="consents">
<form class="consents__form">
<div class="checkbox-group">
<input name="5b51a49046e0fb0001bd7b5e" class="checkbox-group__input" id="5b51a49046e0fb0001bd7b5e-SJ7k5D714Q" type="checkbox" value="false">
<label class="checkbox-group__label" for="5b51a49046e0fb0001bd7b5e-SJ7k5D714Q">
<span>...</span>
<span class="checkbox-group__required">*</span>
</label>
</div>
<button class="consents__submit" type="submit">Dalej</button>
</form>
</li>
Because those element are in list I created in python loop that iterates over elements:
consents = self.driver.find_elements_by_css_selector('input.checkbox-group__input')
for consent in consents:
checkbox = consent.find_element_by_css_selector('label.checkbox-group__label::before')
checkbox.click()
But every time I got error:
selenium.common.exceptions.NoSuchElementException
I tried also use xpath, but the effect was the same :(
Sorry! My bad! #Andersson had right and also there was a bug in my code. The loop should looks like bellow:
self.driver.find_element_by_css_selector('li.consents')
consents = self.driver.find_elements_by_css_selector('div.checkbox-group')
for consent in consents:
checkbox = consent.find_element_by_css_selector('label.checkbox-group__label')
checkbox.click()
I'm having an issue finding a radio button. Here is a snippet of the html:
<form action="/" id="frm-info" method="post"><input id="ClickedButton" name="ClickedButton" type="hidden" value="" /><input name="__RequestVerificationToken" type="hidden" value="KTQF3bkKPP0OirvtL1EYsW-Q77zq-8H9YAPqeoBB9ewpNSYoc0dOEout26qrtMmX6xBx0_roxqWRwCXAlwZRTyW9ZBTBjwNgifWqws6hyOFIRmc6O-7P6jZXbZNYJ5Pazt9Hmg2" /> <div class="row borGreyPad mlmrcolor bb0">
<div class="col-sm-12 coverImage">
<div class="col-md-7 col-lg-6 fr xs-fl">
<div class="frm-content axaborderBlue mt10">
<div class="pl25 pt15 pr15 pb10">
<p class="large-heading">Enter some basic information to get started</p>
<div class="row ">
<div class="row pl15">
<div class="col-sm-4 r xs-l mb5 f14">Application Taken: *</div>
<div class="col-sm-8 mb5">
<div class="groupBox">
<span class="dib f14 ">
<input id="ApplicationTaken" name="ApplicationTaken" tabindex="1" type="radio" value="ApplicationInPerson" /><span class="dib mr10 ">In Person</span>
</span>
<span class="dib f14 ">
<input id="ApplicationTaken" name="ApplicationTaken" tabindex="2" type="radio" value="ApplicationByPhone" /><span class="dib mr10 ">By Phone</span>
</span>
</div>
I want to select the radio button with name "ApplicationTaken" and value "ApplicationInPerson"
I've tried several different ways including:
When I click on the radio with name
"([^"]*)" and value "([^"]*)"$/ do |myName, myValue|
choose("#{myName}", :option => "#{myValue}")
end
and
When I click on the radio with name
"([^"]*)" and value "([^"]*)"$/ do |myName, myValue|
find(:xpath, "//input[#value='#{ myValue }']", match: :first).set(true)
end
I keep seeing the following error:
"Unable to find radio button "ApplicationTaken" with value "ApplicationInPerson".
I've also tried by ID, no luck. I CAN select a button on this page and fill in text fields, I just can't select radio buttons or drop downs. Thanks
Since you're using capybara try:
choose('Visible Text')
See:
https://gist.github.com/zhengjia/428105
For starters, you have two radio buttons with the same id. This is bad - you should not have duplicate ids on a page. Attempting to find an element by ID when there are duplicates is very unpredictable.
What's most likely happening is that it's finding the first element with a matching ID, and then checking the value attribute. When that doesnt match, it says the element could not be found, because it does not continue onto the next matching ID (because of the way id selectors work internally)
I see you're also using xpath to find the element. You generally should be using CSS instead of xpath for finding your elements.
So leaving the ID out, and using CSS instead, find('input[name=ApplicationTaken][value= ApplicationInPerson]') should get you the element you're looking for.
hope you're having a good time :)
I'm using a RESTful controller. Route looks like Route::controller('categories', 'CategoriesController');
I want to pass a value i.e. the category name user wants to delete
How do I do that? Or kindly point me in the right direction.
Note: I tried assigning a value to a hidden input field, when I used that hidden field's value, it was always empty, so the value is not binded to the input field "properly" in my jS function.
{{ Form::open(array('url'=>'categories/delete')) }}
<input style = "display: none;" type="hidden" name="asalDel" id = 'asalDelCat' value="acs" />
<input type='submit' class="btn btn-danger" value="Delete" />
{{ Form::close() }}
This is my form in my bladed-view
I am having a hard time aligning radio Buttons to the left in MVC 4 template using RadioButtonFor.
For some reason they are placed in the middle, abd it only happens with radio buttons below is a picture:
I have tried to float the div but it did not work .
I also tried to add css class to radio button helper but I got an overload error for the function RadioButtonFor
I even tried to put it into a table
Please advice, here is my code
<div class="editor-field" >
<table>
<tr>
<td>
#Html.RadioButtonFor(model => model.isChildTakingMedicine, true, new { #onchange = "showTextBox()" }) YES<br />
</td>
</tr>
<tr><td>
#Html.RadioButtonFor(model => model.isChildTakingMedicine, false, new { #onchange = "showTextBox()" }) NO
#Html.ValidationMessageFor(model => model.isChildTakingMedicine)
</td>
</tr>
</table>
</div>
It was the width of the radio button to wide, the default css gives a large width to all input tag.
Added the following CSS to fix it:
input[type="radio"]
{
width: 20px;
}
For some reason it took me longer than expected to arrive at the correct structure for my bootstrap'd situation. I wanted to save others the pain and I hope this layout can help. The data model, in my case, was simply an integer called Status.
<div class="form-group">
<label class="col-sm-2">Status</label>
<div class="col-sm-10">
<div class="radio-inline"><label>#Html.RadioButtonFor(m => m.Status, 1) Acknowledged </label></div>
<div class="radio-inline"><label>#Html.RadioButtonFor(m => m.Status, 2) In Progress </label></div>
<div class="radio-inline"><label>#Html.RadioButtonFor(m => m.Status, 3) Closed/Fixed </label></div>
</div>
</div>
I don't know that this necessarily answers your question, but I thought this may be helpful information for anyone having a similar issue:
I have a table with rows and columns of radio buttons (user is meant to select 1 of the radio buttons in each row). The radio buttons were not lining up with the row or column header texts. Guess what fixed it - adding a border to the table! I tried all sorts of things first, using align and valign, or align within style...that kind of thing. I took all that off and just set "border=1" for the table. Voila - radio buttons are all left aligned with the header text!