I have a simple drop-down box and I am successfully using Javascript to automatically fill a textbox when a drop-down item is selected.
Once I edit any of the textbox's automatically filled text, or use a "Clear" button to erase textbox, the drop-down list no longer replaces fills the textbox.
How can I continue to use the drop-down box once the user has altered the textbox?
JSFiddle Version
HTML code:
<select id="dropdown" onchange="preset();">
<option value="">Select a person:</option>
<option value="Abe" >Abe</option>
<option value="Bob" >Bob</option>
<option value="Cal" >Cal</option>
<option value="Dan" >Dan</option>
</select>
<input type=Submit value="Clear" onclick="document.getElementById('mytext').value='';">
<textarea id="mytext"></textarea>
Javascript code:
function preset() {
document.getElementById("mytext").innerHTML=document.getElementById("dropdown").value
}
You use innerHTML in one place, and value in another. Using value in both fixes it.
Demo
Update the submit button to this:
<input type=Submit value="Clear" onclick="document.getElementById('mytext').innerHTML='';">
Related
Wondering if it is possible that when a checkbox is clicked it changes the select box to a textbox with the same id "Wine_name"
Not really clued up when it comes to javascript, so any help will be greatly appreciated.
The reason I need this, when a user is filling out a form, if the selectbox does not have the option they want to select, they can click the check box which will then allow them to manually type in the text they want.
Well.. you can do it.. just keep in min that you have to disable the hidden input so that it wont be processed when the form is submited.
Have a look at the code that i've come up to do it.
I'm not sure it you really need the same 'id' attribute, if you're just sending a form and processing the result on the server side, you can 'name' the submitted parameters with the 'name' attribute. So that you can freely use different ids on the view side without changing the backend to conditionally verify it.
var checkbox = document.querySelector("#custom_value");
var select = document.querySelector("#selection");
var altSelect = document.querySelector("#selection_alt");
checkbox.addEventListener('change', function(event) {
select.classList.toggle('hidden');
select.disabled = !select.disabled;
altSelect.classList.toggle('hidden');
altSelect.disabled = !altSelect.disabled;
});
.hidden {
display: none;
}
<input type="checkbox" id="custom_value"> Alternative
<br>
<select id="selection" name="selection">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
</select>
<input type="text" disabled class="hidden" name="selection" id="selection_alt" placeholder="Custom value..">
We want to display Dropdown items when click on dropdown. And need to set text of selected item in Textbox, We done with it using onchange event.
But we do not want to display selected text of dropdown in dropdown;s textbox itself.
We are using dropdown reverse triangle option in front of Textbox to perform necessary logic.
Is it possible to hide dropdown selected text?
Since you havent shared any code assuming few thing I have created a fiddle.. kindly check http://jsfiddle.net/TmJCE/848/
all you need to do is after selecting an item from dropdown reset the dropdown
HTML
<select id="name" >
<option value="">select all</option>
<option value="Text 1">Text 1</option>
<option value="Text 2">Text 2</option>
<option value="Text 3">Text 3</option>
</select>
<input type="text" class="txt">
jQuery
$(document).ready(function(){
$('#name').change(function(){
var x=$('#name').val();
console.log(x);
$('.txt').val(x);
$('#name').prop('selectedIndex',0);
});
});
I'm trying to create a "How did you find us form element" and I'm having some jQuery trouble. The user selects from a list of options, one of which is "other". When selected other a text box that allows them to be more specific. In an effort to make this more user friendly that input is hidden when another option is displayed. I've got the jQuery working to show and hide the text input as the user changes the option but I would like it to clear any text in the text box in the event the user selects other, fills something in, then selects another option.
<label for="pcFindUs">How did you hear about us?</label>
<select name="pcFindUs" id="pcFindUs" onChange="getval();">
<option value="No Answer">Select One</option>
<option value="Internet Search">Internet search</option>
<option value="Internet Advertisement">Internet ad</option>
<option value="Soclail Media">Social media </option>
<option value="Unknown">I don't remember</option>
<option value="other">Other</option>
</select><br/>
<div id="pcHiddenOtherSpecify" style="display:none;">
<label for="pcFindUsSpecify">(Please Specify): </label><input type="text" value="" id="pcFindUsSpecify" name="pcFindUsSpecify" maxlength="50">
</div>
<script>
function getval(){
var values = $('#pcFindUs :selected').val();
if (values == "other"){
$("#pcHiddenOtherSpecify").css("display","block");
}else{
$("#pcHiddenOtherSpecify").attr("value","");
$("#pcHiddenOtherSpecify").css("display","none");
}
}
</script>
The pcHiddenOtherSpecify div containing the additional input appears and disappears just fine, but the value of #pcHiddenOtherSpecify still has whatever the user entered.
I've also tried
$("#pcHiddenOtherSpecify").val("");
With no luck. Any ideas what I may be doing wrong here?
You are trying to change the value of a div element, not an input. Try this:
$("#pcFindUsSpecify").val("");
Wrong ID
$("#pcFindUsSpecify").val("");
try
$("#pcFindUsSpecify").val("");
check it out
http://codepen.io/JcBurleson/pen/MKBBWq
i have the first select options
<form id="infform" method="post">
<select id="infmenu" name ="infmenu" size="1" class="select" >
<option value="0" >Please Select your article</option>
<option value="3" selected='selected' > value 1</option>
<option value="2" > value 2</option>
<option value="18" > value 3</option>
<option value="16" > value 4</option>
</select>
<input type="hidden" name="hiddenselect" value="3" />
</form>
and the second is
<form action="" method="POST" id="form0">
<input type="text" name="date0" class="tcal" value="" readonly="readonly" /><br />
<input type="image" src="../submit.png"/>
<input type="hidden" name="submit0" />
</form>
this my javascript
function displayv() {
var singleValues = $("select option:selected").text();
$("#hiddenselect").val(singleValues);
$("select > option:first").prop("disabled", "disabled")
}
$(document).ready(function(){
$("select").change(function() {
displayv();
});
displayv();
$("select#infmenu").change(function() {
$("#infform").submit();
});
});
now when i select the first option the page refresh and i get the value selected.
and when i submit the second submit the page refreshes and the first select option returns empty Please Select your article.
so how should this be fixed please .
EDIT :
this the php how i handle between them.
if (isset($_POST['infmenu'])){
$infmenu = $_POST['infmenu'];
// some sql of updating here
}
if (isset($_POST['submit0'])){
//some updating sql here
}
It's not really clear to me what your question really is.
If you're saying you're not seeing your select item value when you submit the second form, then that is normal and expected. You have two independent forms so when you submit the second form, the data from the first form will not be sent to the server.
The submit button /image only sends data for the inputs within it's own form, not data from any other forms within your html body tag.
Edited to add: you could:
have a single form tag instead of two
modify your jquery so that it puts the select value into the hidden field of the second form s well as the hidden field of the first. Then when second form is submitted, have your PHP script read the hidden field value and use that when rendering the HTML to decide which option has the selected attribute.
use cookies with some JavaScript to set the cookie when the value of select changesuse Ajax to do a partial submit - assuming server doesn't need to know value of select item when dealing with second form
There is no action="" assigned to the first button.
You have two forms.
When you click the submit in the second form, of course the data of the first form is not submitted.
Also, the submit button in the second form has no name, so you perhaps cannot evaluate in PHP if the button is clicked. But that's a different story
You should make the two forms one.
If they are too far apart on your page. You should save the value of the select box in the hidden field in the second form with php
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