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>
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/
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">
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.
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 + "')")