Here is the code
<form method="get" name="form_delivery">
Please select country for delivery<br>
<select name="deliverymethod">
<option value="0" selected="selected">Select country / region</option>
<option value="1">UK (incl. Northern Ireland)</option>
<option value="8">Australia</option>
<option value="9">New Zealand</option>
</select>
</form>
I need to identify the text "Please select country for delivery" and wrap it around the container like a "span" and replace the wrapped text
<form method="get" name="form_delivery">
<span>Please select country for delivery</span><br>
This code is generated by an automated server, I only have access to HTML Template hence Jquery is the only option for making modifications on the fly.
Any Idea's?
Two solutions here :
1 : If you don't have any binding on other elements of the form, you may simply do a replace of the HTML :
$('form').html(function(_,h){
var t = "Please select country for delivery";
return h.replace(t, '<span>'+t+'</span>');
});
2 : If you have bindings, you can't do that as it would delete all elements, you need to do it cleanly, not modifying other elements. You may use a library for that like my own groumf :
Groumf.replaceTextWithHTMLInHTML(document.body, t, function(s){
return '<span>'+t+'</span>'
});
If you know that the text is the first part of the form, you can use $($('form').get(0).childNodes[0]).wrap('<span>');.
You can use contents() to get the text nodes as well as the HTML elements using jQuery. You can then filter out the text nodes, using .filter() (which might be unnecessary, depending on your potential markup) and then get what I'm assuming will always be the first text node, using .eq().
From there we can wrap this text node in a <span> using .wrap(), traverse to this new <span>, and prepend it to our form:
var $form = $('form[name=form_delivery]')
$form.contents().filter(function(){
return this.nodeType == 3;
}).eq(0).wrapAll('<span></span>').closest('span').prependTo($form);
JSFiddle
Related
I have a select control getting values dynamically.
In the script, I need to insert the following text inside the select tags as its inner html.
<option value=""></option>
<option><h1>zoot</h1></option>
<option><div>divTest</div></option>
<option><span> style="color:red;font-weight:bold;">SpanTest</span></option>
<option><option>option</optipon></option>
What I am trying to do is in the picture below
I tried using HTMLEncode and that was not working too. Am I able to do this using JavaScript or jQuery or by any other means in html select control ?
You can add the items to the select using jQuery and the text function.
e.g.
var vals = ["<h1>zoot</h1>",
"<div>divTest</div>",
"<span> style='color:red;font-weight:bold;'>SpanTest</span>",
"",
"option"
];
var $stuff = $("#stuff");
vals.forEach(function(val) {
$("<option/>").text(val).appendTo($stuff);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="stuff">
<option value=""></option>
</select>
It you want the HTML to be user-visible, you need to encode it. Working example below.
<select name="example">
<option value=""></option>
<option><h1>zoot</h1></option>
<option><div>divTest</div></option>
<option><span> style="color:red;font-weight:bold;">SpanTest</span></option>
<option><option>option</optipon></option>
</select>
If you are trying to show previews using those HTML blocks, you may wish to drop out of select lists and provide a different user interface to do so - such as previews combined with radio inputs.
I'm just starting with Angular JS and i find it very handy in terms of data handling.
My question, is it possible to bind a custom attribute by html alone? Specifically with the select element.
Instead of getting the value attribute, i want to get a custom attribute from the option tags under select element.
Just to be clear, instead of displaying the "value" of the input element, i want to display what's inside the data-custom1 which is the word "payment".
Example would be:
<select ng-model="colors">
<option data-color-hex="#2ba2ba" value="1"> Color A<option>
<option data-color-hex="#222222" value="2"> Color B<option>
<option data-color-hex="#cacaca" value="3"> Color X <option>
</select>
<p>{{display the data-color-hex value here}} </p>
If i select an option from the select element, the data-color-hex is displayed
in the element instead of value 1,2,3.
You first need to set a name for your select:
<select name="colors" ng-model="$ctrl.colors">
<option value="1" data-custom1="paymentA">1</option>
<option value="2" data-custom1="paymentB">2</option>
<option value="3" data-custom1="paymentC">3</option>
</select>
Then, you can create a method in your ctrl which returns the data-custom1 attribute from the selected option:
$ctrl.getDataCustomFromSelect = function(selectName) {
return document.querySelector('select[name="' + selectName + '"] option:checked')
.getAttribute('data-custom1');
}
You can get that in your template doing:
<p ng-bind="$ctrl.getDataCustomFromSelect('colors')"><p>
Fiddle with that solution: https://jsfiddle.net/virgilioafonsojr/b002ccja/
I hope I understood your problem correctly and it solves the issue.
Two ways to do this, and you'll probably want to use the first:
<input ng-model="amount" data-custom1="{{payment}}">
<p>{{payment}}<p>
Or by using ngAttr:
<input ng-model="amount" ng-attr-payment="{{payment}}">
<p>{{payment}}<p>
The latter one is used for picky DOM APIs like the SVG DOM API. You can read more here: https://docs.angularjs.org/guide/interpolation
If you want get the input value, you have to use ng-model, only this.
And then, in your controller.js, get the input value from ng-model.
(I don't know if that's what you want to know)
I need to update an option text and I do not have #id of the select box.
I found examples like this:
$('#selectid option:contains("OLD_TEXT_VALUE")').text('newtext');
I can't use this example, since I can only access select like this:
selectedField.find('select')
how do I add
option:contains("OLD_TEXT_VALUE")').text('newtext');
to the above way of selecting select, is it possible?
This is my code, there can be many selects dynamically inserted into the page in this format.
<div id="basic_select_xxxx" class="form-group selectable">
<select class="form-control">
<option>Select something</option>
</select>
</div>
I can select the select only like this:
$('#basic_select_xxxx').find('select).
how to then update select option with new text by looking up the old value? Is it possible this way? I can not put id on select, so let me know if there is other way?
You can chain your jQuery Do something like:
$('#basic_select_xxxx').find('select option:contains("OLD_TEXT_VALUE")').text('newtext');
Assuming all the containers ID's start with same "basic_select_" prefix you can use that in an "attribute starts with" selector
$('.selectable[id^="basic_select_"] select option:contains("OLD_TEXT_VALUE")').text('newtext');
What I'm trying to do is give my textfield a value based an an option is select form my drop down. For example: I have 2 fields, a drop down and a textfield. I select Facebook from the dropdown and the value "http://www.facebook.com/" appears in my textfield. How can I achieve this effect? I know that I have to call a function onchange of the drop down but that's pretty much everything I know. Remember that I'm not trying to copy the exact selected value from the dropdown to the textfield here.
example markup
<select>
<option value="http://www.facebook.com">Facebook</option>
<option value="http://www.twitter.com">Twitter</option>
</select>
<input type="text" />
jquery
$('select').change(function() {
$('input[type="text"]').val(this.value);
});
Here's a fiddle
In response to your comment, there are a number of ways to do it (a switch statement, if/elseif statement etc), the easiest would probably be to create an object mapping the text to the corresponding url:
var urlFromText = {
'Facebook' : 'http://www.facebook.com/',
'Twitter' : 'http://www.twitter.com/'
};
Then, in your change handler, you can simply use:
$('input[type="text"]').val(urlFromText[$('option:selected', this).text()]);
Here's an example
HTML
<select id="network">
<option value="http://www.facebook.com">Facebook</div>
<option value="http://www.twitter.com">Twitter</div>
</select>
<input id="network-txt"/>
Jquery
$("#network").change(function(){
$("#network-txt").val($(this).val());
});
Working Example http://jsfiddle.net/nVEEE/
I would like to 'toggle' the list of options in a select box.
I have the two sets of options as strings (American states and Canadian Provinces). However, I notice that in the DOM, the select object has no 'innerhtml' property (at least not according to w3schools).
Do I have to go and remove and replace the options one by one? How do I do this?
Making use of jQuery, I usually do something like this:
var html = '[your html string with all the options elements]';
$('#mySelectId').empty();
$('#mySelectId').append(html);
As for the one-by-one idea, make sure you keep in mind the general slowness of DOM interaction. Wholesale replacement with the entire string is going to be pretty quick, but if you manipulate the DOM for each element in the select then expect it to be slow.
What I would do is create both, each in a DIV; then just hide whichever is not needed. This eliminates the need for heavy DOM manipulation (as you're only doing that once, on page load, there are fewer opportunities to leak memory in certain browsers cough cough), and is harder to accidentally mess up the app state (what with Alberta and Alabama sharing the same code and all that).
This would be the initial page:
<input type="radio" id="country_usa" name="country" value="USA"> USA
<input type="radio" id="country_canada" name="country" value="Canada"> Canada
<div id="usa_select"></div>
<div id="canada_select"></div>
and JavaScript to go with it (jQuery used here for brevity):
$(document).ready(function(){
// hide both <div> containers on page load
$('#canada_select').hide();
$('#usa_select').hide();
// create and populate both <select> boxes:
$('#canada_select').append('<select name="province_canada">'
+ '<option value="AL">Alberta</option>'
+ '<option value="BC">British Columbia</option>...'
+ '</select>'
);
$('#usa_select').append('<select name="state_usa">'
+ '<option value="AL">Alabama</option>'
+ '<option value="AK">Alaska</option>...'
+ '</select>'
);
};
// we'll also need handlers to show the correct list,
// depending on the selected country
$('#country_usa').click(function(){
// we want US states
$('#canada_select').hide();
$('#usa_select').show();
});
$('#country_canada').click(function(){
// we want Canadian provinces
$('#usa_select').hide();
$('#canada_select').show();
});
This should be the result:
<input type="radio" id="country_usa" name="country" value="USA"> USA
<input type="radio" id="country_canada" name="country" value="Canada"> Canada
<div id="usa_select">
<select name="state_usa">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
...
</select>
</div>
<div id="canada_select">
<select name="province_canada">
<option value="AL">Alberta</option>
<option value="BC">British Columbia</option>
...
</select>
</div>
At the backend, process state_usa iff country=='USA'; process province_canada iff country=='Canada'.
Why not replace the entire <SELECT>? There are a number of ways to do this. Easiest is to wrap the <SELECT> in a SPAN/DIV and replace its innerHTML.
If you're pulling your lists from an array, you can set the list length to zero, then insert the new elements in a loop.
When you say they are held as strings - do you mean that each item is a seperate string or that the list items are one string (i.e. var variable = "<li>item 1</li><li>item 2</li>";)
If the latter, could you not include the <select> tag in the string and use the jQuery replaceWith function?
Just add a multiple="multiple" attribute to your select tag if you want multiple selection or add size=".." if you want single selection