I am trying to set a value to a hidden form element by selecting their Id and not their name attribute. The hidden element has id="user_lat and name="user_lat". How can I do that?
I seem to be able to select by name:
$("input[name='user_lat']").val(results[0].geometry.location.lat());
MY attempt at selecting by id below does not work:
$("input #user_lat").val(results[0].geometry.location.lat());
If the id is to be applied to the input, the selector can have no spaces:
$("input#user_lat").doSomething();
If you place a space between input and #user_lat, the selector attempts to match a child of the input, which doesn't make much sense. It would be like having the following markup:
<input><el id="user_lat" /></input>
Removing the space matches any input that contains the ID:
<input id="user_lat" />
You must stick them together "input#user_lat"
input #user_lat means:Look for an input and then find inside the element with id user_lat
You are close, take out "input" from the second statement and you should be good.
$("#user_lat").val(results[0].geometry.location.lat());
When you are usign the selector "input #user_lat" your saying the element "user_lat" inside an input. So what you need to do is just delete the space between them, something like this:
$("input#user_lat") ...
Related
How do I check a checkbox element according to the value in cypress, while the value attribute does not exist.
I want to check the checkbox according to the value, not the id, because the id is different for each page.
Because in some pages, the id starts with c1, and some page ids start with c2, and some start with c5.
How would I check the element according to value?
I got the selector for all 3 checkboxes, but it checked all the 3 elements. I want specific element according to value attribute, but there there is no value attribute.
i tried this
cy.get('.x-overlay__wrapper--right input[type="checkbox"]').check()
but it checked all the element
and this checked the first element
cy.get('.x-overlay__wrapper--right input[type="checkbox"]').first().check()
but I want the checked according to value, but here in attributes there is no value attribute.
the value that i want is just written next to checkbox
and here in html
Looking at the html, perhaps search for the text then use parent and sibling commands to shift the subject to the checkbox, something like
cy.contains('span', 'Free Shipping') // find your text
.parent('div') // move to parent div
.siblings('span.checkbox') // move to checkbox span
.find('input') // select it's input
.check();
Example with comments explaining the code:
cy.get('.x-overlay__wrapper--right input[type="checkbox"]').each((checkbox, i) => { // Get the elements and run .each() on them
if (cy.get('.cbx.x-refine__multi-select-cbx')[i].innerHTML === "value") { // If the value is something, perform an action. Replace "value" with the value that you need to test it for
checkbox.check()
}
})
I have the following line of code in my javascript:
$('form #fullvalue').val('Monthly Payment: '+fullvalue2+'pm');
What I need to do is wrap the words "Monthly Payment" in a span element.
I coded it like this (see below), but then it doesn't pick up that it's an html element, it outputs the html as text:
$('form #fullvalue').val('<span>Monthly Payment: </span>'+fullvalue2+'pm');
* UPDATE *
Sorry for the confusion, but I'm not trying add a span to a text field. It's for a line of text inside my form, but not a text or text area field - it's just a normal line of text that appears inside the form. The "fullvalue2" javascript code outputs a result from a calculator in the form. And I'm simply trying to add the text "Monthly Payment", which should be wrapped in a span, before "fullvalue2"
You can't.
The value of a form control can only be plain text.
If you need markup, then you need to use something more complicated (such as a div with contentEditable set and a pile of JS to read it back when you want to use the data).
To set HTML of a node, use $.html, $.val is for form fields.
$('button').click(function(){
var fullvalue2 = $('#val').val();
$('form #fullvalue').html('<span>Monthly Payment: </span>'+fullvalue2+'pm');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="val" value="123.34"/>
<span id="fullvalue">Original value</span>
</form>
<button>Change HTML</button>
Use label element to include descriptive text about an input or textarea element within a form , for attribute at label element to reference id of input or textarea associated with label element
I want to add a default value to an input field on an existing form when the page is loaded. All of the inputs on the field have the same name and ID on this form.
<table>
<tr><td>Name:</td><td><input id="MultiLookupPicker" name="MultiLookupPicker"/></td></tr>
<tr><td>Company:</td><td><input id="MultiLookupPicker" name="MultiLookupPicker"/></td></tr>
<tr><td>Department: </td><td><input id="MultiLookupPicker" name="MultiLookupPicker"/></td></tr>
</table>
Here's the example http://jsfiddle.net/ljd144/6ocsLk6k/
How would I add a default value to the input immediately following the text "Company"? Thanks!
The input is not in your td so the find method won't work. You need to select the next td first.
$( "td:contains('Company')").next("td").find("input").val("test");
I updated your fiddle with the right selector
JSFiddle updated
You can't use the same id on multiple element, it's very very bad and will lead to unexpected result.
to add a default value, you can do it in html :
<tr><td>Name:</td><td><input id="MultiLookupPicker" value="yourvalue" name="MultiLookupPicker"/></td></tr>
or in jquery :
$("$MultiLookupPicker").val("yourvalue");
Try it ..but id must be unique
$( "td:contains('Company')").next().find("input").val("test");
NOTE: In your fiddle $( "td:contains('Company')").find("input") it always return empty array bcoz there is no input element that td , so use next() and find the input
updated fiddle
I have a checkbox in a column of an html table. When I check or uncheck it I want some text to be displayed/removed from a text area in the next column of the same row.
I did the following:
$(this).parent().parent().find('textarea').text = 'some text'
and also
$(this).parent().parent().find('textarea').val = 'some text'
but it does not work.
The html is like:
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<textarea>
</td>
</tr>
I want to get the textarea of the same tr of the checkbox I check
UPDATE
I found that I should use .val("some text") but now the function is called only if I click the checkbox in the first row. Not for the rest
The issue is with how you are trying to set the value not how you are finding the element
try this
$(this).closest('tr').find('textarea').val("some text");
See here for more info .val()
UPDATE
an element ID has to be unique so you can't reuse the same one. Give all your checkboxes unique id's i.e "chkOne", "chkTwo" etc. Then use a class on all the checkboxes you wish to run this functionality from. i.e class="chkSelection". Then change your jQuery to look like this
$('.chkSelection').change(function() {
if($(this).is(':checked')){
$(this).closest('tr').find('textarea:first').text('Some text here');
}
});
This way all your checkboxes with a class of "chkSelection" when changed will run the functionality to find the next textarea and set the text.
Just give them identifiers, as surely you'll need to reference them somehow elsewhere (and if your structure changes it won't break as a side-effect) - note the use of val(), too:
<tr>
<td><input id="someName" type="checkbox"/></td>
<td><textarea id="someOther"></textarea></td>
</tr>
Then you can reference them explicitly:
$("#someName").change(function(e) {
$("#someOther").val("some value");
});
Keep it simple.
try this code
$("table input[type=checkbox]").change(function(){
// Your code.
});
Give generic classes to all the checkboxes and textareas... In the .change() function of the checkbox try using this: (Considering the class of the textarea is textarea)
$(this).parent().find('.textarea').html("Your text here");
To check if the checkbox is checked/unchecked, try attr('checked').. Also to get the values of all checked checkboxes, try 'input[type="checkbox"]:checked').val()
my solution
$('table input:checkbox').change(function(){
$(this).parent().next().find('textarea').val("some text");
});
If you want to be able to toggle the text on and off by checking/unchecking the box, something like this would work:
$("input[type=checkbox]").change(function() {
$(this).filter(":checked").parent().next().text('Text!");
$(this).not(":checked").parent().next().text('');
})
This would listen for any change to any checkbox on your page. When a checkbox changes, it will select the checkbox's parent's sibling (the next <td> element after the one surrounding the checkbox) and set its text to 'Text!' if the box is checked, or an empty string if the box is unchecked.
The benefit to using this method, aside from the text on/off functionality, is that you don't need to assign CSS classes/ids for it to work.
My problem today could be rather simple. I am trying to obtain all required elements inside of a form for which there is no text (they are of type input, text). Here is my JS:
var inputs = $('#form').find(':input');
if(inputs.filter('[required] [value=""]').first().focus().length)
//do something
This is the element in the HTML:
<input type="text" name="title[]" id="name_" required />
I should add that this input element is being added dynamically by javascript, meaning, it's appended after a certain action has taken place.
The true problem is that the code inside of the if statement is never true even when I don't type a value for the given text field.
Any help is appreciated.
The value attribute of an input tag is not the same thing as the value property of an input element. The first one happens to be in the HTML, gets parsed in the DOM and acts as the defaultValue. The latter one is the dynamic value which represents the currently entered input. See also .prop() vs .attr()
Your element does not even have a value attribute, so it will never match the selector. Instead, you will need to use a filter function that checks the properties:
inputs.filter(function() {
return this.required && this.value=="";
// equivalent: $(this).prop("required")
// and $(this).prop("value") or $(this).val()
})
If you mean to select required inputs that are empty, your selector is wrong. The space represents ancestor relationship, parent/children:
if (inputs.filter('[required][value=""]').length) { // Element is `required` and empty
....
}
There are 2 issues with your code.
('[required] [value=""]')
Supposed to be
('[required][value=""]')
And with the above selector you can never select the input below
<input type="text" name="title[]" id="name_" />
as it has no value attribute in the first place. Also required attribute is missing
The inputs that would match your selector would be of this signature
<input type="text" required="true" value="" name="title[]" id="name_" />
Check Fiddle