I'm trying to add a HTML link to an input box using the following jQuery:
var E = "<a class='tagged_person' contenteditable='false' href='http://www.google.com'>Click This</a>";
$("input[name='newComment']").val(E);
Which is working, but its literally displaying the <a href..., which is what I wanted backend wise, but on the frontend, I'd like the user to see it as rendered as a HTML <a> link. Just like on Facebook/Twitter you can tag users and then there's a link.
I think you're looking for the JQuery method .append. That lets you pass a string of HTML and have it parsed into the DOM. Check it out here
For example:
$('#myDiv').append('Search for it!');
There's also .appendTo() if it suits your aesthetic better.
Edit: If you're trying to literally stick html as the value of a text input, you can't do that. <input type="text"> carry text, and that's it. You'd have to make your own input form, or use a JQuery plugin. Why would you want to have a link in a form input anyway though? Sure, you could have the user redirected when clicking the form through different event handlers, but input is for inputting. If it redirects, then you didn't really want an input in the first place.
You can use the following code, which when select it will open the link in a new window.
<form action="../">
<select name="myDestination">
<option value="http://www.website1.com/">Website 1</option>
<option value="http://www.google.com/">GOOGLE</option>
</select>
<input type="button"
value="Open in New Window!"
onclick="ob=this.form.myDestination;window.open(ob.options[ob.selectedIndex].value)">
</form>
Or without the need to press a button:
<form action="../">
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="">Choose a destination...</option>
<option value="http://www.website1.com/">Website 1</option>
<option value="http://www.google.com/">GOOGLE</option>
</select>
</form>
Also created a jsfiddle to demonstrate: jsFiddle
Related
Using the chosen lib I run into the following issue, you can reproduce it yourself by going to their show-and-tell-page:
https://harvesthq.github.io/chosen/
Steps to reproduce:
In their standard select section, select -any country you want- in both the standard dropdown and the chosen dropdown
Click 'fork on github'(or any link) to leave the page
Navigate back by hitting the back button in chrome
The standard dropdown shows you the previously selected country
The chosen dropdown is empty (but under the hood the value is selected, according to what I'm seeing with my form. It just is not showing)
So this leads to confusion. When the user would back and then go forward again by submitting the form(in my case) it would use another value than what is shown.
My form basically looks like:
<form id="myForm" action="${home}mySite/foo/bar" method="GET">
<select id="bar" name="barName" class="chosen-select">
<option value="a">foo 1</option>
<option value="b">foo 2</option>
<option value="c">foo 3</option>
<option value="d">foo 4</option>
</select>
<input type="submit" value="Continue"/>
</form>
If I remove the class="chosen-select" it works as I expect, but I lose chosen's nice search feature which I want. I've tried messing around with
<option value="a" selected="selected">Foo 1</option>
in the dropdown, but that doesn't help.
I've also tried changing the method="GET" to POST but there is no difference in behaviour. It still works as in the example link I provided.
The chosen lib generates the following in on the page:
<div class="chosen-container chosen-container-single" title="" id="parkingZoneOwner_chosen" style="width: 40%;"><a class="chosen-single">
<span>Foo 1</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div></div>
But nothing about the generated html looks wrong to me, even after backing to the page.
I tried this in the js (events):
<script type="text/javascript">
$(function () {
$(document).ready(function () {
$(".chosen-select").chosen({
width: "40%",
search_contains: true
});
$('.chosen-select').on('chosen:ready', function(evt, params) {
$(".chosen-select").val("a");
});
});
});
$('.chosen-select').on('chosen:ready', function(evt, params) {
// alert("reached")
// I had really high hopes for this one:
$('.chosen-select').trigger('chosen:updated');
//Also tried this one:
$('#myForm')[0].reset();
});
Anyone know a way to fix this? Either the chosen dropdown needs to show what actually will be submitted in the form or the entire form maybe could be reset to default values somehow.
This solved it in the end, turning off autocomplete on the form.
<form id="myForm" action="${home}mySite/foo/bar" autocomplete="off" method="GET">
I don't know why this works.
Simple JS fiddle containing my code in working state
I have a jQuery UI Autocomplete field, with a Dropdown button attached. It works floorlessly, however - its kinda annoying you have to manually delete the words inside the field for a search.
I am unsure if jQuery UI has a feature for it, unless i'd love to know.
I've tried to use onClick functions with JS, however since my field is not exactly an "form field" I've got kinda lost here.
My goal is to: reset the text field when a user presses it.It has prewritten text in it "Please select (Or Type)"
my cshtml file looks as following
cshtml
And it looks like this on the browser browser
Code for Image 1:
<select asp-for="Dinosaur" class="combobox" id="dinoType" asp-items="Html.GetEnumSelectList<Dinosaurs>()">
<option selected="selected" type="text" onclick="resetText()" value="0">Please select (Or Type)</option>
</select>
<span asp-validation-for="Dinosaur" class="text-dark" />
As you can see it has the text in, which i have to CTRL + A, DELETE before i can search in my field.
A function to clear this text when a user presses it will easen the pressure.
I might just be stupid to see the simple solution, i just feel like I've tried some of the things that I'd believe would work. (As the onclick="ResetText()" with a JS code attached to it)
When I click on drop down this is what showing.
Best Regards,
You don't want to wire an onclick listener on your option element, you want an onchange event listener on your select element. onclick is not supported on option elements.
use onchange instead of using onclick and this action should be on the select tag. not on the options. Try this example.
$('select').on('change', function() {
if (this.value === 'disabled') {
this.value = '';
}
console.log(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select asp-for="Dinosaur" class="combobox" id="dinoType" asp-items="Html.GetEnumSelectList<Dinosaurs>()">
<option selected="selected" type="text" value="disabled">Please select (Or Type)</option>
<option type="text" value="One">One</option>
<option type="text" value="two">two</option>
</select>
<span asp-validation-for="Dinosaur" class="text-dark" />
I have a project im working on, that needs a javascript OnChange Script for a dropdown box on media upload page.
I have a drop-down box with 2 options -'Yes' and 'No'. If the user selects 'No' i don't want the form to submit and possibly display a message saying why.
Is anyone able to provide a script to do this? I have to enter this on the attribute itself (eah attribute has the ability to have a OnChange script), i can change the attribute references to the specific ones needed. More of a general 'formula' for the script is needed.
Maybe i'm too vague and its not possible to make on the information i have given you.
Thanks in advance,
T.
first, write javascript code like this
<script>
function output()
{
var input = document.getElementById('input').value;
if(input==0){
alert("WHY???");
document.getElementById("out").value="why?";
}else{
document.getElementById("out").value="Ok";
}
}
</script>
and for the html code
<form>
<select name="input" id="input" onchange="output()">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" id="out" name="out">
</form>
note: javascript not java
My question is about java script, i want to put or add a div or button or input inside select tag using java script.
I using jquery.sumoselect plugin that make you multiple checkbox, but when i want to add some DIVs inside select tag is showing outside the list.
i want the div inside select element like this picture : http://i.stack.imgur.com/Xd6FX.jpg
this is my html code
<div class="select-box-style right">
<div class="your-list-title">Your Lists</div>
<select multiple="multiple" class="md_what_get right SlectBox">
<option selected value="electronics">Electronics</option>
<option value="games">Video Games</option>
<option value="books">Books</option>
<option value="others">Others</option>
<option value="others"><input type="text" name="lname"></option>
</select>
<div class="add-list-box">
<input type="text" class="input-add-list"/>
<label class="label-spcbtn-blue spr" >Add</label>
</div>
</div>
and this how to call the plugin:
<script type="text/javascript">
$(document).ready(function () {
$('.SlectBox').SumoSelect();
});
</script>
thank you for helping!
....
Update!
see this link http://wenzhixin.net.cn/p/multiple-select/docs/
On The Filter1 you can see the input search inside select element, how can i do that?
Neither SumoSelect or MultipleSelect (as is) supports the feature you are looking at. But, first, some clarification needed:
<select> boxes are a standard HTML tag, that accepts no other tags than <optgroup> or <option>. see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
SumoSelect and MultipleSelect are both Javascript plugins that “converts” real selects into custom built <div> tags, with javascript to handle the logic.
That said, you can either modify/extend those plugins to create the desired <div> or you can build your own “<select> into <div> converter”.
But, for the sake of simplicity, you could just create a <div> with all the desired functionality, using regular plain old checkboxes, and hiding/displaying the whole <div> according to your UX flow/needs.
I have two dropdowns with different values in each and have an submit button in last..
Now what i want to do is that, when i select an option form first dropdown and then another option from the second dropdown. Now when i click on submit button it would show there related value popup window having close button in it.
Code is as follows :
Calling from :
<select>
<option>America</option>
<option>India</option>
</select>
Calling To :
<select>
<option>England</option>
<option>France</option>
</select>
<input type="submit" name="" value="" />
These four countries have four different rates..
When i select calling from America to England than it ll show a popup window of its rates.
And when i select calling from America to France than it ll show a pop window of its own rates ..
Thanks in advance if u can help me .. :)
Guessing you just want the selected values or something?
First give the dropdowns a name and/or id.
lets make it simple and just make it a button instead of a submit.
<select id="list1">
<option>USA</option>
<option>India</option>
</select>
<select id="list2">
<option>UK</option>
<option>Fr</option>
</select>
<input type="button" value="Click here" onClick="showAlert();">
<script language="javascript" type="text/javascript">
function showAlert() {
alert('Just get the values in here by ID.selectedItem.text I believe it is');
}
</script>
I believe that is basicly what you are after.
P.s.What exactly do you mean with rates?
In that case take what Mithin Sasidharan wrote and instead of the links he used just use a page you made and then put the info on that page that you have.
You can also just make a link and style it with CSS to make it look like a button.
If you did that you can simply use
This will make the link open a new window with the page you pointed towards.
check this out.
http://jsfiddle.net/NFq2f/2/