jquery not changing value of text input - javascript

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

Related

Angular - my ngIf hides an input-label only once

*ngIf="currentIdea.oetSupportNeeded" I have a dropdown list with 2 values - yes and no, and another input label where you can write freely. I want to show the input-label only when user chose "yes" in the dropdown list and to hide it when "no" is chosen.
My problem is that the following code works only once - when page loads and "no" is chosen, the input label is hidden, but when you choose "yes" and then "no" again, the label shows up and doesn't disappear anymore. I want it to toggle on/off depending on the user's choice
I tried using ngShow, ngHide, [disabled], etc. Nothing helped
<div class="select-wrapper" [ngClass]="{'select-wrapper-blocked': isNotAdmin()}">
<select class="input-control" [(ngModel)]="booleanVariable">
<option value="false">No</option>
<option value="true">Yes</option>
</select>
</div>
</div>
<div class="col form-input" [ngClass]="{'form-input-blocked': isNotAdmin()}">
<p class="input-label">
Some text
</p>
<input *ngIf="booleanVariable" class="input-control" [(ngModel)]="stringVariable" />
</div>
According to the code you shared, the value of your select menu is bound to the booleanVariable property of your component.
Your *ngIf queries another property, so the condition is wrong. You should be checking the booleanVariable in the condition.
Something similar happened to me few hours ago. The problem was that
<option value="false">No</option>
<option value="true">Yes</option>
was wrong. I solved it with
<option [value]="false">No</option>
<option [value]="true">Yes</option>
That's because otherwise Angular does not "analyze" the value of the option but recognizes it as a string.
Use ngModelChange event and make a function to typecast the data.
Check the link for example. Show Hide Field using *ngIf
You are using true and false as strings. You can change the test into your ngIf.
Like
<select [(ngModel)]="foo">
<option [ngValue]="true">true</option>
<option [ngValue]="false">false</option>
</select>
<input *ngIf="foo == true"/>
And to define a default value, you can set the value of foo into the class like
public foo = true;

Indenting Text in the select box when something is entered into the input field

I have figured out that dir="rtl" will make the text to position on the right side; however I want that to happen conditionally when something is written in an input element.
I was thinking of disabling dir="rtl" until something is entered into the input element and only then enable rtl. However, the problem with that is the "refresh page" requirement that the change implies.
Here is the simple drop down box with the text.
<Select class="textToRight" dir="rtl">
<div class = "toRight">
<option class="this1"> TEXT1</option>
<option class="this2"> TEXT2</option>
<option class="this3"> TEXT3</option>
</div>
</select>
<input class ="dontChange" placeholder="dontChange"></input>
<input class ="change" placeholder="change"></input>
To answer your question, yes, you can modify an attribute of one element while an event is triggered in other by attaching an event handler.
In your case you can attach it to the focusin and focusout events.
var selectBox = document.querySelector(".textToRight");
var changeInput = document.querySelector(".change");
changeInput.addEventListener("focusin", function() {
selectBox.dir = "rtl";
});
changeInput.addEventListener("focusout", function() {
selectBox.dir = "ltr";
});
<select class="textToRight">
<div class="toRight">
<option class="this1"> TEXT1</option>
<option class="this2"> TEXT2</option>
<option class="this3"> TEXT3</option>
</div>
</select>
<input class="dontChange" placeholder="dontChange"></input>
<input class="change" placeholder="change"></input>
But as David Thomas has said you, to have a div inside a select is not valid HTML.
Also, I think you are misusing the dir attribute, which is meant to indicates the directionality of the element's text (like in English vs Arabic languages).
This is what i figured out once I found out about the onkeyup(). But I am still having one trouble.
JS
function check(){
document.getElementById("textToRight").dir = "rtl";
<select class="textToRight">
<option class="this1"> TEXT1</option>
<option class="this2"> TEXT2</option>
<option class="this3"> TEXT3</option>
</select>
<input class="dontChange" placeholder="dontChange"></input>
<input class="change" placeholder="change" onkeyup='check()'></input>
I dont know how to do the snippet, but by testing it, it works. However, the problem I am having now is that I cant revert it back. So can I put a condtion on the length of the text ? if == 0 do ltr .. else dir = rtl.

On checkbox click change select box into a textbox with the same ID

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..">

How can i make sure the user selects something from a Select list without using onSubmit - javascript

Basically i have a simple form in HTML. I want to validate user inputs but dont want to use onSubmit as its not 'live' feedback.
*Title:
<select name="title">
<option value="Select..">Select</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
</select><br />
*First Name: <input type="text" name="first"/>
I want to use javascript so when a user clicks the 'First Name' input box and if they haven't selected the 'Title', the browser forces them to select the title before continuing. onChange doesnt work for obvious reasons.
This would trigger when a user deselects an input in the form or the dropdown list.
$('input, select').onblur(function(){
/*Run your checks here*/
});
To check whether they have actually selected an option, I would use something like this...
$('input, select').onblur(function(){
var text = $('select').find(":selected").text();
if(text == 'Select'){
//Show error
}
});

Cannot Fill Textbox with Javascript After Editing

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='';">

Categories

Resources