I create one Method in MVC 4.0 which taking the Request.Form (Namevaluecollection) in Form. I faced below issue in checkbox and radio button.
I added dynamically checkbox or radio button with below code, and I set the form value collection as "NameValueCollection formsCollection = Request.Form" in one of my controller method but that checkbox or radio button is not coming in "formsCollection.AllKeys" while other control like text box, text area, dropdown will work properly.
<form>
<div class="divLeft div1" id="div83ac0fad-41d5-40e5-99cd-f99ea8877b04">
<div class="control-group">
<label class="control-label">Checkbox 2</label>
<div class="controls">
<div id="cfCheckbox">
<label>Option 1</label>
<input type="checkbox" id="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04" name="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04">
<label>Option2</label>
<input type="checkbox" id="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04" name="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04">
</div>
</div>
</div>
</div>
</form>
You're having id="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04" on both check-boxes and the main div. IDs in HTML are supposed to be unique.
Remove the IDs on the checkboxes. This should fix your problem.
FormsCollection uses Name for binding, not ID. So you don't really need your elements to have IDs.
Related
I have a form which includes some hidden and visible elements inside of it and I want to submit some of the elements without validating the hidden ones. At the top of my form there are three radio buttons and they control my form elements. When radiobutton1 selected, some of my form elements become visible and when another radio button is selected, there are some other form elements are visible and some of them are hidden. My question is how am I going to submit my form elements if only they are visible? All of the inputs should be in a single form so I am not allowed to separate them into different forms or different components. What I need to do is when I click the submit button of my form, the form should only submit the visible elements, and it shouldn't send me any error because I left some of the inputs empty (the hidden ones).
I also use Vuedalite so I couldn't figure out how to handle this problem. All of the input fields in the form has the required rule but this rule should be active ONLY IF THEY ARE VISIBLE.
Here is a little code.
<form #submit.prevent="submitForm">
<!-- Content Section -->
<div v-show="showContent">
<!-- Name Field-->
<div>
<div>
<label>Name</label>
<input v-model="name" :class="{'is-invalid' : $v.networkname2GHz.$error }" type="text"/>
<small class="errorMessage" v-if="!$v.name.required && $v.name.$dirty">Name field is required.</small>
</div>
</div>
<!-- Surname -->
<!-- Content Section -->
<div v-show="showContent">
<!-- Surname Field-->
<div>
<div>
<label>Surname </label>
<input v-model="surname" :class="{'is-invalid' : $v.surname.$error }" type="text"/>
<small class="errorMessage" v-if="!$v.surname.required && $v.surname.$dirty">Surnamefield is required.</small>
</div>
</div>
<div show="showContent">
<button type="submit">Save</button>
</div>
</form>
What I want to do is when the user selects the Name radio button only the Name field of the form will be visible and Surname will be hidden, I've done that, no problem. But how do I submit only the name field when surname still empty and has the required rule?
You can use v-if instead of v-show.
The main difference between the two is that, v-if - Only renders the element to the DOM if the expression passes. v-show - Renders all elements to the DOM and then uses the CSS display property to hide elements if the expression fails.
How to show the Text box layout in MVC as text box without having drop down in the side?
In the attached screen shot, we have the drop down lay out. It has to be plain text box.
<div class="form-group">
<div class="col-sm-5 control-label">
<label class="hthin">ExceriseTimes</label>
</div>
<div class="col-sm-1">
<textarea id="ExceriseTimes" asp-for="ExceriseTimes" style="height:25px;" class="form-control" type="text"></textarea>
</div>
</div>
The <textarea> form element doesn't have type attribute, it belongs to <input>. If you want a plain single-line text box, just use <input> tag with type="text" attribute:
<input id="ExerciseTimes" asp-for="ExerciseTimes" style="height:25px;" class="form-control"
type="text" />
However if you want fixed size <textarea> element without scroll bar (looks like spinner in sample image), use both CSS styling overflow:hidden & resize:none:
<textarea id="ExerciseTimes" asp-for="ExerciseTimes" style="height:25px;" class="form-control"
style="overflow:hidden;resize:none"></textarea>
Note: You can apply additional CSS class containing both styles above (e.g. noscrollbar) and append it like class="form-control noscrollbar".
One of my test scenarios has an On-Off toggle button and I want to check is it on or off?
The button value has an internal checkbox so I used a JQuery to get the checkbox value but I am getting a null value.
JavascriptExecutor js = (JavascriptExecutor)getDriver();
System.out.println(js.executeScript("$('#f-contact-usactive').is(':checked')"));
<div class="col-3">
<div class="label">Display Contact Us
<i title="If this field is left blank, it will revert to
the default Teleflora/group value."
class="icon icon-tool-tip icon-tool-tip-federated">
</i>
<i title="This controls whether or not your address and
phone number will show on the about us page."
class="icon icon-tool-tip x-space-s">
</i>
</div>
<input checked="" type="checkbox" id="f-contact-us-active"
name="f-contact-us-active" class="on-off-switch">
<label for="f-contact-us-active" class="on-off-switch-label">
<div class="on-off-switch-state">on</div>
</label>
</div>
Please help me to get the value
your id is not correct in JQuery selector. it should be something like this. "$('#f-contact-us-active').is(':checked')".
I think your id for the checkbox is "f-contact-us-active" but in the script you are accessing "f-contact-usactive" missing a '-'.
Or have you done the typo here?
Thanks for the inputs and I got the solution
System.out.println("The Toggle value is: "+((JavascriptExecutor)getDriver()).executeScript("return document.getElementById('f-contact-us-active').checked"));
I'm hoping I'm just missing something simple because I've been looking at this for too long, but I'm stumped.
I have a form with inputs bound to vuejs. I have a group of 2 radio buttons for selecting the "gender", and the binding is working perfectly. If I click on either of the radio buttons, I can see the data change in the vue component inspector.
But I'm trying to change the radio buttons to a Bootstrap 4 button group, and can't seem to get the v-model binding to work. No matter what I try, the gender_id in my vue data is not getting updated when I click either of the buttons in the button group.
The form input values are being fed in through vue component properties, but for simplicity, my data for the radio buttons/button group would look like this:
export default {
data() {
return {
genders: {
1: "Men's",
2: "Women's"
},
gender_id: {
type: Number,
default: null
}
}
}
}
Here is the code I have for the radio button version (which is working properly):
<div class="form-group">
<label>Gender:</label>
<div>
<div class="form-check form-check-inline" v-for="(gender, key) in genders" :key="key">
<input type="radio"
class="form-check-input"
name="gender_id"
:id="'gender_' + key"
:value="key"
v-model.number="gender_id">
<label class="form-check-label" :for="'gender_' + key">
{{ gender }}
</label>
</div>
</div>
</div>
Here is the button group version that is not properly binding to the gender_id data in vue.
<div class="form-group">
<label>Gender:</label>
<div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary" v-for="(gender, key) in genders" :key="key">
<input type="radio"
class="btn-group-toggle"
name="gender_id"
:id="'gender_' + key"
:value="key"
autocomplete="off"
v-model.number="gender_id">
{{ gender }}
</label>
</div>
</div>
</div>
I've been using the following Boostrap 4 documentation to try to get this working.
https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons
In the documentation for button groups they don't even include the value property of the radio inputs, whereas they do include it in the documentation for form radio buttons.
https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios
Is this for simplicity or do button groups of radio buttons not even return the value of the checked button?
I see other threads stating that buttons groups are not meant to function as radio buttons, but if that's true for BS4, then why would Bootstrap have button groups with radio buttons as they do in their documentation referenced above? If you can't retrieve the checked state, then why not just use a <button> instead of <label><input type=radio></label>?
Any ideas as to what I'm doing wrong and/or not understanding correctly?
Thanks so much!
Thanks so much to #ebbishop for his helpful insights.
The issue was related to vue and bootstrap both trying to apply javascript to the buttons in the button group.
To get around this issue, it was as simple as removing data-toggle="buttons" from the button group. By removing the data-toggle attribute, the bootstrap js is not applied and vue can manage the button group.
Nothing is actually wrong your use of v-model here.
However: you must add the class "active" to the <label> that wraps each radio-button <input>.
See this fiddle for a working example.
Is that what you're after?
I am using selenium for testing my application.
In my application there are 5 buttons, each have a different image associated with it.
I want to click on button which have a specific image associated.
Currently i am using a while loop to get the node of image and then replacing this node into xpath of button to select it.
is there any way either with xpath or css to do this directly.
Providing more information-this is like submit button is there and then below this image is there. submit button and images are sibling element and need to click submit button when the next element is specific image
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking2" src="someimages"/>
</div>
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking1" src="someimages"/>
</div>
Could you include a snippet of your HTML? Below is an example of an image in a form and a few ways of locating it using Selenium, but these may not be relevant depending on your implementation:
<input id="submitForm" name="imgbtn" type="image" src="images/submit.png" />
id=submitForm
name=imgbtn
//input[#src='images/submit.png']
//input[contains(#src, 'submit.png')]
css=input[src='images/submit.png']
UPDATE:
Given the HTML:
<div class="select">
<span class="submit">
<div class="marking1"></div>
<div class="select">
<span class="submit">
<div class="marking2"></div>
You can locate the 'submit' span parent of the 'marking2' div using the following XPaths:
//div[#class='marking2']/..
//div[#class='marking2']/parent::*
//div[#class='marking2']/parent::span
UPDATE 2:
Based on the HTML now included in the question, you can locate the span with the class of submit related to the image many ways, a few examples follow:
//div[//img[#alt='Marking2']/span[contains(#class, 'select')]
//img[#alt='Marking2']/../../span
//div[img[#alt='Marking2']]/preceding-sibling::span
I hope this gives you some ideas. I'd certainly recommend XPath over CSS for locating these elements as it's much better at these sorts of relationships.