How to Pass a value to input field through javascript - javascript

My Question : A value which is passed by an id is showing in the input box. but i can not see that value in the html source code section.
This is my input field In which i am passing a value through a cookie.
<input type="text" id="city" class="i-p-c" value="" autocomplete="off" placeholder="Select City">
What i am doing is: I have a drop down of cities. when i click on the city. i am setting a cookie with the name of scity.
$("#cuto li").click(function () {
autoValuenew = this.id; // console.log(autoValuenew);
document.cookie = "scity=" + this.id + ";path=/;domain=" + cookieondomain;
document.getElementById('city').value = this.id;
//Here is am pass a value to city
return false;
});
After that ..
I can access the value of city but i can not see that value in the html source code.
When i change my field type text to hidden type i can see the value in the htmlsource code.
I do not understand what is going here with these two types. or if i am doing something please tell where i am doing wrong. or if there is another way to do this.

Kindly look this code I hope it helps
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<input type="text" id="city" class="i-p-c" value="" autocomplete="off" placeholder="Select City"/>
<ul id="cuto">
<li type="button" id="cuto">test</li>
</ul>
here is your JQuery
$("#cuto li").click(function () {
debugger;
autoValuenew = this.id; // console.log(autoValuenew);
$.cookie("scity", "test value"); // Setting cookie value
//document.cookie = "scity=" + this.id + ";path=/;domain=" + cookieondomain;
document.getElementById('city').value = this.id;
//Here is am pass a value to city
return false;
});

element.setAttribute('value', myValue);
I think you should not just change the value change it in by changing attribute value.

Related

User input to build URL

I have a bit of experience with HTML but am very new to JavaScript. In essence, I would like for a user input to be part of a URL. For example, we could have something simple such as:
<script>
function get_cityname() {
var cityname = document.getElementById("cn").value;
alert(cityname);
}
</script>
<form>
Enter city name:
<input type = "text" size = "12" id = "cn">
<input type = "submit" onclick = "get_cityname();">
</form>
This will create a textbox where a user inputs their text (city name) and then click the 'submit' button next to it, and an alert should pop up based on the information they provided, just to make sure this works. However, this code only would seem to work (because of the 'onclick' command) to work for one user input. Therefore, I have 2 questions:
How could the above variable be included in a URL string? If it were something simple as:
URLstring = "https://sampleurl" + cityname + "moretext.html"
How could this be expanded if I want to include two or possibly even n number of inputs? For example, if I create more user prompt boxes and want to have the user also be able to input their zipcode, or state abbreviation, for example:
URLstring = "https://sampleurl" + cityname + "moretext" + zipcode + "moretext" + "stateabbreviation.html"
You could do something along these lines (it would be the same for one or more fields):
// Ensures the DOM (html) is loaded before trying to use the elements
window.addEventListener('DOMContentLoaded', function() {
var cnInput = document.getElementById("cn"),
zipInput = document.getElementById("zip"),
form = document.getElementById("myForm");
form.addEventListener('submit', getUrl); // On submit btn click, or pressing Enter
function getUrl(e) {
var cityname = cnInput.value,
zipcode = zipInput.value,
url = "https://sample.com/" + cityname + "/" + zipcode + ".html";
alert(url);
e.preventDefault(); // Prevent the form from redirecting?
}
});
<form id="myForm">
<label>Enter city name: <input type="text" size="12" id="cn"></label>
<label>Enter zip code: <input type="text" size="12" id="zip"></label>
<input type="submit">
</form>
First specify an action attribute for your form. This is where your form will be submitted. Then set your form's method attribute to GET. Finally, add as many fields as you like (I am assuming you are after a GET query such as https:url.com?key1=val1&key2=val2...):
<form method="GET" action="https://sampleurl">
Enter city name:
<input type="text" size="12" id="cn">
Enter zip code:
<input type="text" pattern="[0-9]{5}"
<input type="submit" ">
</form>

Javascript Multiple Inputs Value Output

Hi I want to create a stamp script and I want the user to enter his name and address in three fields,
then he should see the fields later in the stamp edition?
I have 3 input fields where the user can give in his data,
now i will give this data in a new class. This is what i have:
window.onload = function() {
$( "#Text1" )
.keyup(function() {
var value = $( this ).val();
$( ".ausgabe" ).text( value );
})
.keyup();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Text1">
<input type="text" id="Text2">
<input type="text" id="Text3">
<div class="ausgabe"></div>
It looks like you want to mimic what the user is typing in the text inputs and show it in ausgabe. If that's what you want, then you can tie the keyUp event to each of the inputs.
$(input [type='text']).keyUp(function() {
var value = $(this).val();
$('.ausgabe').text(value);
}
But this will overwrite .ausgabe every time text is entered into a different input.
You could get the value of .ausgabe every time keyUp fires and pre-pend that value:
So you may want to have a button that renders each input's value into .ausgabe:
<button>.click(function() {
$(input[type="text"]).each(function() {
var boxText = $(this).val(); //text box value
var aus = $('.ausgabe').text(); //ausgabe value
$('.ausgabe').text(boxText + ' ' + aus); //combine the current text box value with ausgabe
})
})
As you have not made it very clear what you are trying to accomplish, I am providing a simple example that might send you down the right path.
$(function() {
function updateDiv(source, target) {
var newVal = "";
source.each(function() {
newVal += "<span class='text " + $(this).attr('id').replace("Text", "item-") + "'>" + $(this).val() + "</span> ";
});
target.html(newVal);
}
$("[id^='Text']").keyup(function(e) {
updateDiv($("input[id^='Text']"), $(".ausgabe"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Text1">
<input type="text" id="Text2">
<input type="text" id="Text3">
<div class="ausgabe"></div>
Since you already seem to understand .html() and .text(), we can look at the Selector. The one used will select all elements with an ID Attribute of Text in the beginning of the string. See More: https://api.jquery.com/category/selectors/attribute-selectors/

How do I get the data stored in value in JQuery?

I have the following input box, and I want to get its value.
<input id="dontuse" name="post_tag"
value="sdafdsfds,adsfdsfdsfdsaf,sadfdsfdsfasd,asdfdsfsd,czxczXCzzx"
data-output="bootstrap" class="wpt-form-hidden form-hidden" data-wpt-
id="dontuse" data-wpt-name="post_tag" type="hidden">
The following returns the data in the textbox (by another element tmp_post_tag.
$(document).ready(function(){
$('input[name="tmp_post_tag"]').keyup(function(e){
var val = $(this).val();
$("#fieldID3").val(val);
});
});
but it only returns whats in the textbox (if user presses enter the data gets stored in "value" on post_tag and disappears from text box.
How do I get the data stored in "value" to input here:
<input type="text" id="fieldID3" name="test" value="n/a">
this is what i've tried, and haven't gotten it to give me the data.
$(document).ready(function(){
$('input[name="post_tag"]')
var val = $(this).val();
$("#fieldID3").val(val);
});
if I managed to understand your currectly.
$(document).ready(function(){
$('input[name="tmp_post_tag"]').keyup(function(e){
var val = $(this).val();
$("#fieldID3").val()+val;
});
});
The attribute value used for name in the code dose not match with the one in the element. It should be post_tag not tmp_post_tag. Also how do you keyup on a element which is not visible? Though you can trigger the event in the code.
$(document).ready(function(){
$('input[name="post_tag"]').keyup(function(e){
var val = $('input[name="post_tag"]').val();
$("#fieldID3").val(val);
});
$('input[name="post_tag"]').trigger('keyup');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dontuse" name="post_tag"
value="sdafdsfds,adsfdsfdsfdsaf,sadfdsfdsfasd,asdfdsfsd,czxczXCzzx"
data-output="bootstrap" class="wpt-form-hidden form-hidden" data-wpt-
id="dontuse" data-wpt-name="post_tag" type="hidden">
<input type="text" id="fieldID3" name="test" value="n/a">

How to get selected value in data-tagger attribute in Javascript?

I have a dropdown list field called "Bug category" which includes four options:
software, hardware, tools, documentation.
My HTML:
<div class="form-field string required request_custom_fields_25376063" >
<label for="request_custom_fields_25376063">Bug Category</label>
<input type="hidden" name="request[custom_fields][25376063]" id="request_custom_fields_25376063" autocomplete="off" data-tagger="[{"label":"-","value":""},{"label":"Software","value":"software"},{"label":"Hardware","value":"hardware"},{"label":"Tools","value":"bug_tools"},{"label":"Documentation","value":"bug_documentation"}]" />
<p>Which type of bugs do you want to report?</p>
</div>
The data-tagger attribute includes the selection values:
data-tagger="[{"label":"-","value":""},{"label":"Software","value":"software"},{"label":"Hardware","value":"hardware"},{"label":"Tools","value":"bug_tools"},{"label":"Documentation","value":"bug_documentation"}]"
I want to change the form based on different selection of the bug category field. How can I get the value of selected option in the data-tagger attribute?
My Javascript code:
alert("value is:"+ $(this).attr('data-tagger').val()); // doesn't work
alert("value is:"+ $(this).attr('data-tagger')); //shows "Undefined" when I select option
Edited:
var bug_category = $('input#request_custom_fields_25376063').parent();
bug_category.on('change',function(){
alert("value is:"+ $(this).find(':selected').data('tagger')); // return null
});
More script code:
25375983 - each kind of number represent a field in the form.
This code is generated from an app, which allows me show different fields based on different selection of "bug_category" field.
<script>var cfaRules = [
{"fieldType":"tagger","field":25376063,"value":"bug_documentation","select":[25375983,24342549,24399485,25376023,25454706,25454746,25454766,25454806,25454826,25375963],"formId":240243,"requireds":[25375963,25454706,25454766]},{"fieldType":"tagger","field":25376063,"value":"bug_tools","select":[25454746,25454766,25454806,25454826,25454706,25376023,25375983,25375963,24399485,24342549],"formId":240243,"requireds":[25375983,25454706,25454746,25454766]},{"fieldType":"tagger","field":25376063,"value":"hardware","select":[24342549,24399485,25375963,25375983,25376023,25454706,25454746,25454766,25454806,25454826],"formId":240243,"requireds":[24342549,24399485,25454706,25454766]},{"fieldType":"tagger","field":25376063,"value":"software","select":[25454706,24342549,24399485,25375963,25375983,25376023,25454746,25454806,25454766,25454826],"formId":240243,"requireds":[24399485,25376023,25454706,25454766,25454826]}]</script>
Use .data() to get the value of data tags
alert($(this).data('tagger'));
UPDATE
If I understand the real problem correctly, what you want should be something like this
// Get the categories on div's hidden input using .data()
var categories = $('div').find('input').data('tagger');
// Append each categories to the select tag
// e.g. <option value="value> label </option>
$.each(categories, function(key,value){
$('#select_bug').append('<option value="' + value.value + '">' + value.label + '</option>');
});
// declare select tag to bug_category variable
var bug_category = $('#select_bug');
// Alert the value when selected option is changed
bug_category.on('change',function(){
alert("value is : " + $(this).find(':selected').val());
});
<div class="form-field string required request_custom_fields_25376063" >
<label for="request_custom_fields_25376063">Bug Category</label>
<input
type="hidden"
name="request[custom_fields][25376063]"
id="request_custom_fields_25376063"
autocomplete="off"
data-tagger="[{"label":"-","value":""},{"label":"Software","value":"software"},{"label":"Hardware","value":"hardware"},{"label":"Tools","value":"bug_tools"},{"label":"Documentation","value":"bug_documentation"}]" />
<p>Which type of bugs do you want to report?</p>
<!-- Add select tags to insert dropdown options -->
<select id="select_bug">
</select>
<!-- or if you already have this select tag, use yours -->
<input type="submit" value="Submit">
</div>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
Use jquery's .data() method because it will also auto-magically parse the value to the correct type.
var value = $('input').data('tagger');
console.log(typeof value);
console.log(value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden"
name="request[custom_fields][25376063]"
id="request_custom_fields_25376063"
autocomplete="off"
data-tagger="[{"label":"-","value":""},{"label":"Software","value":"software"},{"label":"Hardware","value":"hardware"},{"label":"Tools","value":"bug_tools"},{"label":"Documentation","value":"bug_documentation"}]" />
Regarding your example code.
var bug_category = $('input#request_custom_fields_25376063').parent();
Makes literally no sense because the .parent() of your input field, the div cannot have a change event on it, so it cannot fire.
$(this).find(':selected').data('tagger')
If somehow this code was to fire, based on your example, find would return Zero elements because there are no elements that support :selected, thus .data() will always return undefined.

Can not insert a string in a http get request in Angular

In the input field specific id will be typed and saved inside searchText :
<form class="input-group" ng-submit="getMainData()">
<input type="text" class="form-control" ng-model="searchText" placeholder=" Type KvK-nummer and Press Enter" id="typehead">
</form>
and when press enter it will get this function from the controller
$scope.getMainData = function(){
$http.get("http://localhost:8091/odata/dll-poc-dv/Account(':searchText')")
.success(function(data){
$scope.allData = data;
$scope.getData = $scope.allData.d.results;
});
};
What I want to achieve is the searchText typed in the input to be passed as parameter inside the brackets (':searchText') of get the relevant data. A valid URL for getting the data looks like this: http://localhost:8091/odata/dll-poc-dv/Account('41-125061-0000')
Use + operator for concatenation of variables. Also, use $scope.searchText.
$http.get("http://localhost:8091/odata/dll-poc-dv/Account('" + $scope.searchText + "')")

Categories