How to PASS a html input field TO axios javascript code? - javascript

I need plain/regular html form with a dropdown input field, called TYPES.
Then I need the axios code I got from a codepen, to "receive" the TYPES value, that the user selected. I don't understand how the html form input field is sent to the axios code?
The next steps are working, but I can't pass in the TYPES value. THanks
I know how to make a form.
I know php code. (( fyi. example.com/getimages.php?cat=TYPES, this is working, but I need 'types' to be the passed in value))
I'm not good at axios or javascript.
***** HTML code *****
input: <input type="text" name="TYPES" id="TYPES">
<button onclick=“findimages()">Search</button>
***** AXIOS code from a codepen *****
(function($) {
.... <other code>
const fetchImages = (count = 10) => {
axios.
get(`https://example.com/getimages.php?cat=TYPES`).
then(res => {
setImages([...images, ...res.data]);
setIsLoaded(true);
console.log(images);
});
};
.... <other code>
};
ReactDOM.render(React.createElement(Collage, null),
document.getElementById("root"));
} )( jQuery );
If the search button on the html form can "call/send/pass" the axios code AND pass in the TYPES value... all will be great!

Looks like you have some formatting/character coding issues with your example. <button onclick=“findimages()"> is using incorrect quotes ("), and is also not calling fetchImages(). Also you mentioned "dropdown input", so I'm not sure if you meant a select dropdown, or are just referring to a normal input text box. I added both for example purposes.
You can change out the exampleURL variable to pass in type_select instead of type_input if you want. This axios request will just hit an example JSON API and return {"response" : 200}, but you should see the cat variable passed in the request URL with TEST as the value.
const fetchImages = (count = 10) => {
let type_input = document.getElementById('types_input').value;
let type_select = document.getElementById('types_select').value;
// URL: 'https://example.com/getimages.php?cat=' + type_input;
let exampleURL = 'https://api.myjson.com/bins/7yftn?cat=' + type_input;
axios.
get(exampleURL).
then(res => {
console.log(res);
// setImages([...images, ...res.data]);
// setIsLoaded(true);
// console.log(images);
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<select name="types_select" id="types_select">
<option value="">-Select Type-</option>
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
</select>
<br/>
<input type="text" name="types_input" id="types_input" value="TEST" />
<br/>
<button onclick="fetchImages()">Search</button>

Related

Vue JS Make drop-down select run query when option selected

I am very new to Vue and stuck on a problem. I have several drop-down select menus which return info from an Axios request The select t only works when I hit the submit button though. I would like it to run when the user makes the drop-down selection. I can't work out what I am missing. Can anyone help?
I have included some of the code below. Thanks
The html:
<div class="form-group col-md-6">
<label for="subject" class="control-label">Subject</label>
<select
v-model="subject"
class="form-control"
:disabled="selectDisabledSubject"
>
<option disabled value="">Select subject</option>
<option
v-for="subject in uniqueSubjects"
:key="subject"
:value="subject"
>
{{ subject }}
</option>
</select>
</div>
The vue
uniqueSubjects() {
const metaVFees = this.results
.filter((result) => result.metaData && result.metaData.V)
.map((item) => item.metaData.V)
.filter((subject, i, arr) => arr.indexOf(subject) === i);
// Split multiple subjects in strings and store in an array
let subjects = [];
metaVFees.forEach((item) => {
const splitArr = item.split(", ");
subjects = subjects.concat(splitArr);
});
return subjects
.sort()
.filter((subjects, i, arr) => arr.indexOf(subjects) === i);
},
You can use vue Watchers
watch:{
subject(newVal){
// call the function you normally call with submit click
}
}

Multiple :value in vue

I have this that takes the value and send it to my backend along with others in a form
<select
v-model="formData.account_bank"
id="branch"
#change="getbranch"
>
<option v-for="bank in selectBank" :key="bank.id" :value="bank.code">{{
bank.name
}}</option>
</select>
but before it is sent I need to get some data to populate a second selectbox using bank.id which I should have as :value = "bank.id" in the code above.
To get the value to make the api call that populates the second selectbox I just do
var branch = document.getElementById('branch').value;
and use it in the API call.
But here I need to get the bank.id to make the first api call that populates the selectbox and still have the bank.code there as form data to submit.
I have thought about getting the key using javascript which has the bank.id. But can not figure how or a different way it should work.
One solution to this problem is to bind the entire bank object to your <select> model.
Then you can use its id to populate your other select options and its code to construct your form data payload.
For example
<select
v-model="selectedBank"
id="branch"
#change="getbranch"
>
<option v-for="bank in selectBank" :key="bank.id" :value="bank">{{
bank.name
}}</option>
</select>
data: () => ({
formData: {
// whatever you originally had here
},
selectedBank: {} // empty object or perhaps a default bank
}),
methods: {
getBranch () {
const bankId = this.selectedBank.id
// make API call, etc
},
submitForm () {
// build form data
const formData = {
...this.formData,
account_bank: this.selectedBank.code
}
// submit form, etc
}
}
See https://v2.vuejs.org/v2/guide/forms.html#Value-Bindings

Getting undefined when trying to send select value to other page

I have a small JavaScript issue.
I have the following form:
<form method="get" name="basic" id="basicId" action="/page2">
<select id="activity" name="activity" class="form-control inputbox">
<option value="default" class="activities">Select value from dropdown:</option>
<option value="a" class="tests">A</option>
<option value="b" class="tests">B</option>
<option value="c" class="tests">C</option>
</select>
<button type="submit" id="searchBtn" placeholder="Search">Search</button>
</form>
What I'm trying to do is to get the value from the select tag and use it in page2.
For example, is option is A, the value should be ="a".
I want to use the value="a" in page2.
document.getElementById("output"): here i want to print the result in page2.
What I've tried to do in the second page:
<script>
var select = document.getElementById("activity");
var e = select.options[select.SelectedIndex].value;
document.getElementById("output").innerHTML = e;
<!-- This doesn't show anything. -->
var test = document.getElementsbyName("activity").values;
document.getElementById("output").innerHTML = test;
<!-- The output is: function values() { [native code] } -->
var test = document.getElementsByName("activity").value;
document.getElementById("opinion").innerHTML = test;
<!-- The output is: undefined -->
</script>
So basically, getting the select element by ID or by Name doesn't work.
Getting the select element ID.value doesn't work.
Getting the select element by the index doesn't work.
Any ideas? I've literally tried anything.
Am I writing the code in the wrong place?
Do I have to send this information through the server-side?
P.S.: I am writing the app in Node.js and Express and I'm using handlebars.
Kind regards,
G.
Update:
If you want to get the value to other page, you need to fetch it from url as whole new page get rendered and your old values will not exist exist.
If you are having your values in url just fetch it by this
let url = window.location
I assume, you are trying to get the value of dropdown
select has always the value attribute to it which actually is the value you select from dropdown
You just need to look for the value of select whenever you want the selected option.
Here in your case just attach a onchange listener to select, which triggers whenever the value of select get changed
var select = document.getElementById("activity");
var mySelectValue = select.value // set the default value
select.onchange = function() {
console.log(select.value)
mySelectValue = select.value // update whenever value get changed or new value chosen
}
// Do whatever you want to do with selectvalue
<form method="get" name="basic" id="basicId" action="/page2">
<select id="activity" name="activity" class="form-control inputbox">
<option value="default" class="activities">Select value from dropdown:</option>
<option value="a" class="tests">A</option>
<option value="b" class="tests">B</option>
<option value="c" class="tests">C</option>
</select>
<button type="submit" id="searchBtn" placeholder="Search">Search</button>
</form>
So basically, I have fetched the link and I tried to check if the activity = something.
example down below:
if(url.href.indexOf("activity=a") > -1){
activity = "a"
}
document.getElementById("opinion").innerHTML = activity;
Of course, in the page2, I can see "a" as a result which is great! :)

Javascript - Changing tag-it source with select option

I have a select with two options. When changing the select ... I want to filter/autocomplete a different database. Without http://aehlke.github.io/tag-it/ it's working fine and the autocomplete is changing the source ... but not with it. It stays at source_01.php although I see in the console the change of Test Source 01 to Test Source 02. What might causes this?
HTML:
<select id="search_database" class="form-control">
<option value="1" selected="">Source 01</option>
<option value="2">Source 02</option>
</select>
Javascript:
$('#search_database').on('change', function () {
if ( $('#search_database').val() == 1 ) {
console.log('Test Source 01');
$("#input-newsearch").tagit({
...
autocomplete: ({
source: function( request, response ) {
...
$.ajax({
url: "/source_01.php",
...
});
},
...
})
});
} else if ( $('#search_database').val() == 2 ) {
console.log('Test Source 02');
$("#input-newsearch").tagit({
...
autocomplete: ({
source: function( request, response ) {
...
$.ajax({
url: "/source_02.php",
..
});
},
...
})
});
}
});
Your problem is the value not getting picked up by the script when you change the options if you want to pick the value of the changed option you've to do something similar to the below code.
HTML:
<label for="clientSelect" style="margin-left:14px;">Client:</label>
<select name="clientSelect" id="clientSelect" onChange="clientId(this.id)" style="width:180px;"></select>
<input type="text" id="clintId" size="1" hidden>
JavaScript:
function getClient(cId){
//Get the selected ID using this.is in client side HTML then breaks it up using this to get the ID only
var select = document.getElementById("catSelect"),
optionId = select.options[select.selectedIndex],
catId = optionId.id;
I use the hidden text filed to send the selected ID to my PHP then to the database.

Unable to change make a dynamic search with Soundcloud API

I'm having problems getting this code to work. I can do a static search using the 'q', 'bpm' or 'genres' parameters in SC.get(). However when I try to make it dynamic with a variable ('category')...the values are passed off correctly but the performed search doesn't match.:
function getTracks(){
query = document.getElementById('search').value;
category = document.getElementById('category').value;
SC.get('/tracks', { category : query}, function(tracks) {
console.log(query);
console.log(category);
... rest of search code
}
Inside HTML:
<form>
Search by Title: <input type="text" name = "search" id = "search">
<select id = "category">
<option value = "genres">Genre</option>
<option value = "q">Title</option>
<option value = "bpm">BPM</option>
</select>
<input type="button" onclick = "getTracks()" value="Submit"/>
</form>
Is there something I'm missing? Console.log catches the correct values for both 'search' and 'category' values but the API is returning as if they are null.
In your example the { category: query } is assigning category as a key name, not taking the variable category and assigning that as the key name. This is a bit of an inconsistency in Javascript.
You want to do this:
parameters = {};
parameters[category] = query
SC.get('/tracks', parameters, function(tracks…

Categories

Resources