Develop Reference

How to load data in text fields dynamically when selecting an option from drop down which is populated from database? Laravel Ajax

Simply speaking I have Added a drop down in my form which has loaded values from the database.The Form consists of input fields. Some fields already have values in database which I want to load using drop down so that user may not enter them again.
Here is the HTML view for drop down:
<select sku="" id="sku_drop" class="selectpicker" data-size="7" data-style="btn btn-success btn-round" name="sku_drop" title="Select SKU">
<option value="0" disabled>Select SKU</option>
#foreach ($sku as $item)
<option value="{{$item->sku}}">{{$item->sku}}</option>
#endforeach
</select>
This drop down has some values, when user selects a certain value, the form must be auto filled from the database.
I have not made any function in my controller or any route for this procedure.

To load some other fields based on selection of select box you will need javascript for that (or jQuery).
something like this:
const selectBox = document.getElementById('select-box');
const textField = document.getElementById('text_field');
selectBox.addEventListener('change', updateValue);
function updateValue(e) {
textField.value = e.target.value;
}
<select id="select-box">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Volvo">Volvo</option>
</select>
<label for="text_field">Text Field:</label>
<input id="text_field" type="text" name="text_field">

How to add multiple dropdown form with submit button combine value and make another html page name to go to it

I want the submit button to act on the combined values in the two didferent dropwdown menu's in the form.Which will be a html page name.
For example... west and winter is a different option which will creat "westwinter.html" then west and summer is a different option which will make "westsummer.html" . and clicking submit button the created page will load.I have already created such types of html page named (ex. westwinter.html).
I'm struggeling for days to make this work. I feel some how this must be possible. Please help!
This is the code I use. When I replace the value to a page name (ex. westsummer.html) . The page will be loaded on submit (go). I want the values of the first dropdown and second dropdown to be counted and the result should be a page name on submit. Finaly there should be 16 different html page name.
Iwant this solution with jQuery or javascript.
<div class="selCont">
<h2>pick an option</h2>
<select id="selection" name="selection">
<option value="1">West</option>
<option value="2">East</option>
<option value="3">North</option>
<option value="4">South</option>
</select>
<select id="selection" name="selection">
<option value="1">Winter</option>
<option value="2">Spring</option>
<option value="3">Summer</option>
<option value="4">Fall</option>
</select>
<button class="go-btn" type="submit">Go</button>
</div>

Firstly, let's set unique IDs for the select tags, and lets set the values to the actual strings (we could keep them numeric and perform a switch on them later to determine their value, but it's easier this way):
<select id="direction" name="selection">
<option value="west">West</option>
<option value="east">East</option>
<option value="north">North</option>
<option value="south">South</option>
</select>
<select id="season" name="selection">
<option value="winter">Winter</option>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
</select>
Next, let's write a function to compose a link using the values from those select tags. I've used document.querySelector here, but you can easily change it out for jQuery if you'd like:
function getLink() {
var direction = document.querySelector("#direction").value;
var season = document.querySelector("#season").value;
//Assuming that the html files are in the same folder as the current page
return "./" + direction + season + ".html";
}
Finally, let's update our button to change the page location to the new link when clicked:
<button class="go-btn" type="submit" onClick="window.location.href = getLink()">Go</button>
Here's everything altogether:
<!DOCTYPE html>
<html lang="en">
<body>
<div class="selCont">
<h2>pick an option</h2>
<select id="direction" name="selection">
<option value="west">West</option>
<option value="east">East</option>
<option value="north">North</option>
<option value="south">South</option>
</select>
<select id="season" name="selection">
<option value="winter">Winter</option>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
</select>
<button class="go-btn" type="submit" onClick="window.location.href = getLink()" >Go</button>
</div>
</body>
<script>
function getLink() {
var direction = document.querySelector("#direction").value;
var season = document.querySelector("#season").value;
return "./" + direction + season + ".html";
}
</script>
</html>

How to capture html form input with flask using jquery chosen multiple select

I have an HTML form with jquery-chosen multiple selection of countries. I want to send this input to Flask through the POST request. The problem is that Flask does not capture the selections.
When I do not use js chosen, it works:
<div class = "webform">
<form method="POST" action = "/monthly_active" name = "countries">
<p>Select countries</p>
<select multiple id="Country" name="Country">
<option>Select...</option>
<option value="DE">DE</option>
<option value="AT">AT</option>
<option value="RU">RU</option>
<option name="PL">PL</option>
<option name="IT">IT</option>
<option name="GB">GB</option>
<option name="BR">BR</option>
</select>
<input type="submit" value="Submit">
</form>
But with js chosen it does not work:
<form method="POST" action = "/monthly_active" name = "chart_options" >
<p>Select countries</p>
<select name = "countries[]" data-placeholder="Countries" multiple class="chosen-select" tabindex="8">
<option value="AT">AT</option>
<option value="GB">GB</option>
<option value="RU">RU</option>
<option selected>DE</option>
<option disabled>Sun Bear</option>
<option selected>ES</option>
<option disabled>Spectacled Bear</option>
</select>
<script> $(".chosen-select").chosen(); </script>
<input type="submit" value="Submit">
</form>
In Flask I use request.form.getlist() to get the input list.
The thing is I very very basic with HTML and javascript, thus, I am stuck how to manage this problem.

Solved:
My mistake was in request.form.getlist('chart_options'):
I passed the name of the form there whereas I had to pass the name of the <select>
This worked:
target_countries = request.form.getlist('countries[]')

Post the value from js to php

EDİTED("I think that i should use Ajax how can i do it")I created comboboxes dynamically. When I want to get the value from the textbox, I can't post to PHP. Here is my code:
HTML code:
<form method="post" name="sigortayap" action="sigorta-process.php" onsubmit="return a()" >
<select id="yetiskinid" class="selectTravelInputFieldsCar" name="yetiskin" onChange="yetiskintext()" >
<option value="-1">Seçiniz</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="yetiskindiv"></div>
</form>
JS Code:
function yetiskintext() {
var secenek=document.getElementById("yetiskinid").value;
while (secenek>0){
var textBoxname = document.createElement('input');
textBoxname.name = 'textyetiskinname'+secenek;
textBoxname.id='textyetiskinname'+secenek;
textBoxname.type = 'text';
textBoxname.className='selectTravelInputFieldsCarJS';
document.getElementById("yetiskindiv").appendChild(textBoxname);
}
}
PHP Code:
<?php
$kece=htmlspecialchars($_POST["textyetiskinname1"]);
echo $kece;
?>
When I put echo $kece; in the PHP, I can't see any output. Why?

The name of the combobox is 'textyetiskinname'+secenek not 'textyetiskinname'. You miss the number at the end of the name.
Maybe you should try this:
textBoxname.setAttribute("name", 'textyetiskinname['+secenek+']');
instead of .name

PHP Using Select Value To Set Variable

I'm working in Wordpress here.
In the posts page I have a dropdown list of values:
<select name='imagesize'>
<option value='200x200'>200 x 200</option>
<option value='300x300'>300 x 300</option>
<option value='400x400'>400 x 400</option>
<option value='500x500'>500 x 500</option>
</select>
I have a button:
<a class="button" href="http://www.example.com/???">Click</a>
I want to replace the "???" with the value that is currently selected in the list when the user hits the button.
Any ideas how I can do this? Ajax?

You should be using a form submit button to submit the form. If you use a link you will need to run some javascript first to modify the link on the fly to append your information.
<form action="yourPHP.php" method="post">
<select name='imagesize'>
<option value='200x200'>200 x 200
<option value='300x300'>300 x 300
<option value='400x400'>400 x 400
<option value='500x500'>500 x 500
</select>
<input type="submit">
</form>
Then in your PHP code, access it via:
<?php
$yourImageSize="";
if(isset($_POST["imagesize"]))
{
$yourImageSize=$_POST["imagesize"];
}
echo "Your image size is: ".$yourImageSize."<br>";
?>

<select name='imagesize' id='imagesize'>
<option value='200x200'>200 x 200</option>
<option value='300x300'>300 x 300</option>
<option value='400x400'>400 x 400</option>
<option value='500x500'>500 x 500</option>
</select>
<a class="button" id="click_btn" href="http://www.example.com/???">Click</a>
you should add some javascript before the element :
<script type="text/javascript">
$("#imagesize").change(function(){
$("#click_btn").attr("href","http://www.example.com/"+$("#imagesize").val())；
});
</script>