NO JQUERY! When the user selects Have a Baby or Military leave radio buttons pop up. I am having trouble getting the values of the selected buttons and changing the innerHTML with id="choice" to the value. Can someone please help??
http://jsfiddle.net/73Vq9/
<html>
<head>
<script>
//this function deals with changing the event
function changeMessage(oElement) {
//have a baby
if (oElement.value == "100") {
document.getElementById("btn").style.display = "none";
document.getElementById("radio").style.display = "inline-block";
document.getElementById("rd1").innerHTML = "C-Section";
document.getElementById("rd2").innerHTML = "Regular Birth";
document.getElementById("rd1").value = "C-Section";
document.getElementById("rd2").value = "Regular Birth";
//military leave
} else if (oElement.value == "15") {
document.getElementById("btn").style.display = "none";
document.getElementById("radio").style.display = "inline-block";
document.getElementById("rd1").innerHTML = "Training";
document.getElementById("rd2").innerHTML = "Active Duty";
document.getElementById("rd1").value = "Training";
document.getElementById("rd2").value = "Active Duty";
//no value, the first, blanck value
} else if (oElement.value == "0") {
document.getElementById("btn").style.display = "none";
document.getElementById("radio").style.display = "none";
} else {
document.getElementById("btn").style.display = "inline-block";
document.getElementById("radio").style.display = "none";
}
return;
}
</script>
</head>
<body>
<div style="margin-left:250px;">
<select id="leave" onchange="changeMessage(this);">
<option value="0"></option>
<option value="5">Get Married</option>
<option value="100">Have a Baby</option>
<option value="90">Adopt a Child</option>
<option value="35">Retire</option>
<option value="15">Military Leave</option>
<option value="25">Medical Leave</option>
</select>
<button id="btn" style="display:none" onclick="getInfo()"type="button">Process</button>
</div>
<div id="radio" style="display:none">
<div id="rd1"></div><input type="radio" name="sex" value="" />
<div id="rd2"></div><input type="radio" name="sex" value=""/>
</div>
<div id="choice">Radio Choice</div>
Your input values are never set so will always be null.
When you changed your code in your previous question https://stackoverflow.com/questions/12091968/javascript-function-not-changing-input-types you moved the id from the input to a <div> so your JavaScript is no longer setting the input's value.
You need to change the JavaScript to set the input correctly and then something like:
HTML
<input type="radio" name="sex" value="" onclick="showChoice(this)"/>
JavaScript
function showChoice(input) {
document.getElementById('choice').innerHTML = "Radio Choice=" + input.value;
}
should append the selected input's value in the <div id="choice">
Related
Using Laravel 8 + Livewire:
I was following this tutorial of creating a dynamic dropdown: https://www.itsolutionstuff.com/post/laravel-livewire-dependant-dropdown-exampleexample.html
I have this dropdown component:
public $suppliers;
public $beans;
public $selectedSupplier = NULL;
public function mount()
{
$this->suppliers = Supplier::whereHas('greenBeans')->get();
$this->beans = collect();
}
public function render()
{
return view('livewire.admin.supplier-beans-dropdown')->layout('layouts.admin.livewire');
}
public function updatedSelectedSupplier($supplier)
{
if (!is_null($supplier)) {
$this->selectedSupplier = Supplier::find($supplier);
$this->beans = $this->selectedSupplier->greenBeans;
}
}
The component's blade:
<div>
<div class="form-group">
<label for="supplier" class="col-md-4 form-label">Supplier</label>
<select wire:model.lazy="selectedSupplier" class="form-control">
<option value="" selected>Select Supplier</option>
#foreach($suppliers as $supplier)
<option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
#endforeach
</select>
</div>
#if (!is_null($selectedSupplier))
<div class="form-group">
<label for="bean" class="form-label">Green Bean</label>
<select class="form-control" name="bean" wire:model.lazy="selectedBean">
<option value="" selected>Select Green Bean...</option>
#foreach($beans as $bean)
<option value="{{ $bean->id }}">{{ $bean->name }}</option>
#endforeach
</select>
</div>
#endif
I have an other component that needs to call this dropdown. So in this parent component I have this var: $selectedSupplier and in the view I call the dropdown component:
#livewire('admin.supplier-beans-dropdown')
When I select a supplier and submit the form, the selectedSupplier is null.
So how do I use this dropdown in different components?
How do I send the selected value to the parent component?
check this first I think you have some errors here. you have:
public function updatedSelectedSupplier($supplier)
{
if (!is_null($supplier)) {
$this->supplier = Supplier::find(supplier); --> typo error here???
$this->beans = $supplier->greenBeans; --> $supplier parameter is an ID???
}
}
and I think it should be:
if (!is_null($supplier)) {
$this->supplier = Supplier::find($supplier);
$this->beans = $this->supplier->greenBeans;
}
I added some custom fields to the User Model and it stores them perfectly during registration (country_id, city_id, and state_id), but I am having problems with the profile management/update:
The fields seem to update only when using the jetstream components as input but NOT when I use my dropdown select option input
<x-jet-input id="cap" type="text" class="mt-1 block w-full" wire:model.defer="state.cap" />
So for instance this would update the $input['cap'] key but the "country_id" field from my livewire script does not update the $input['country_id'] ...
<select wire:model="selectedCountry" id="country_id" name="country_id">
<option value="{{$user->country_id}}"> {{$user->country->name}} </option>
#foreach($countries as $country)
<option value="{{$country->id}}"> {{$country->name}} </option>
#endforeach
</select>
<x-jet-input-error for="country_id" class="mt-2" />
To display or hide fields for instance I update the variables such as $SelectedCountry
The Country/City/State fields are displayed using a livewire script that hides or shows a given select dropdown and runs queries only when needed (if a Country has states/regions, it shows them otherwise it shows only the cities from the selected country etc).
If I submit though, the $input['country_id'] key is not changing though and it just keeps the previous value with which I registered.
I assume the jetstream component would do using wire:model.defer="state.country_id" for instance but again I can not use it because is just a text input... any ideas? 😬
Update-Profile-information-Form
...
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="cap" value="{{ __('Postal Code') }}" />
<x-jet-input id="cap" type="text" class="mt-1 block w-full" wire:model.defer="state.cap" />
<x-jet-input-error for="cap" class="mt-2" />
</div>
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="address" value="{{ __('Address') }}" />
<x-jet-input id="address" type="text" class="mt-1 block w-full" wire:model.defer="state.address" />
<x-jet-input-error for="address" class="mt-2" />
</div>
<div class="col-span-6 sm:col-span-4">
#livewire('edit-address', ['user' => Auth::user()])
</div>
...
edit-address.blade.php (view)
<div>
...
<x-jet-label for="country_id" value="{{ __('Country') }}" />
<select wire:model="selectedCountry" id="country_id" name="country_id">
<option value="{{$user->country_id}}"> {{$user->country->name}} </option>
#foreach($countries as $country)
<option value="{{$country->id}}"> {{$country->name}} </option>
#endforeach
</select>
<x-jet-input-error for="country_id" class="mt-2" />
</div>
...
EditAdress.php (livewire script)
class EditAddress extends Component
{
public $countries;
public $states;
public $cities;
public $selectedCountry = null;
public $selectedState = null;
public $selectedCity = null;
public $test = null;
public $user = null;
public function mount(User $user, $selectedCity = null){
$this->countries = Country::all();
$this->states = collect();
$this->cities = collect();
$this->selectedCity = $selectedCity;
if (!is_null($selectedCity)) {
$city = City::with('state.country')->find($selectedCity);
if ($city) {
/*if ($this->states->isEmpty()===1){
$this->cities = City::where('country_id', $this->selectedCountry);
}*/
$this->cities = City::where('state_id', $city->state_id)->get();
$this->states = State::where('country_id', $city->state->country_id)->get();
$this->selectedCountry = $city->state->country_id;
$this->selectedState = $city->state_id;
}
}
}
public function render()
{
return view('livewire.edit-address');
}
public function updatedSelectedCountry($country)
{
;
$this->states = State::where('country_id', $country)->get();
$this->selectedState = NULL;
if(!$this->states->count()){
$this->cities = City::where('country_id', $country)->get();
}
}
public function updatedSelectedState($state)
{
if (!is_null($state)) {
$this->cities = City::where('state_id', $state)->get();
}
else{
$this->cities = City::where('country_id', $this->selectedCountry);
}
}
}
I have two Dropdowns first dropdown 1 to 23 hours and the second dropdown also 1 to 23 hours.
If I select the first Dropdown is 4.the second drop-down is higher than the first dropdown selected value. how to do that
This is the solution for your concern. I have used the form if you are not used form then remove it and take the normal angular control.
HTML
<form [formGroup]="form" (ngSubmit)="submit()">
<div class="form-group">
<select formControlName="firstDropdown" class="form-control" (change)="firstDropDownChange($event)">
<option *ngFor="let value of values" [value]="value">
<span>{{ value }}</span>
</option>
</select>
<select formControlName="secondDropdown" class="form-control" (change)="secondDropDownChange($event)">
<option *ngFor="let value of values1" [value]="value">
<span>{{ value }}</span>
</option>
</select>
</div>
<button class="btn btn-primary" type="submit" [disabled]="!form.valid">
Submit
</button>
</form>
TS
values: any = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23];
values1: any = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23];
firstDropdown: any = 1;
secondDropdown: any = 1;
form: FormGroup;
constructor() {
this.form = new FormGroup({
firstDropdown: new FormControl(1),
secondDropdown: new FormControl(1),
});
}
firstDropDownChange(event) {
this.values1 = this.values.filter(
(data) => parseInt(event.target.value) <= data
);
console.log(this.values1);
this.form.controls['secondDropdown'].setValue(parseInt(this.values1[0]));
}
secondDropDownChange(event) {}
submit() {}
I'm very new to Ajax.
What I'm trying to achieve, I would imagine, is fairly common. I have 2 dropdown boxes, referencing my database, these are called "area" and "resort". The idea is that when i choose and area from the first boxes, it ONLY shows resorts within that area in the second box.
Here is my form:
<div id ="homepage-form-div" class="row">
<form id ="homepage-form"action=" /Search1.cshtml">
<div class="span3">
<label>Area:</label>
<select name="area">
<option value="">Any</option>
#foreach(var row in qlistarea){
<option value="">#row.AreaName</option>
}
</select>
</div>
<div class="span3">
<label>Resort:</label>
<select name="resort">
<option value="">Any</option>
#foreach(var row in qlistresort){
<option value="">#row.ResortName</option>
}
</select>
</div>
<button type="submit" class="btn btn-default" value="Submit" style="p">Go!</button>
</form>
</div>
I thought it might be useful to see my current SQL code:
var listarea = "SELECT DISTINCT AreaName FROM ResortInfo";
var qlistarea = db.Query(listarea);
var listresort = "SELECT DISTINCT ResortName FROM ResortInfo";
var qlistresort = db.Query(listresort);
I'm guessing I'll need to somehow add a "+ WHERE AreaName = something" to the second query, dependant on the result of the AJAX call right?
Ok, you are using Razor syntax? Lets the show begin. And hey, arent you the same guy?
First I will tell you the basics of what I use.
I use the click keyup or change events.
I update the content of the body on ajax calls.
You need some basic tutorials buddy! Learn ASP.NET, then Learn jQuery Ajax! That will be simple.
My humble request to you:
Buddy please atleast once search for the code, before pasting it here. You will get alot of downvotes and might get blocked for posting more questions here. Please search for questions first. However this is the code.
Ok, to create the code:
I am going to post the code that works for me. Ok?
Here is the main page content:
#{
Layout = "~/_SiteLayout.cshtml";
}
<script>
$(document).ready(function () {
$('#area').change(function () {
$.ajax({
url: "testtworesult",
data: "type=resortupdate&resval=" + $('#area').val(),
success: function (data) {
$('#resort').html(data);
}
});
});
$('.btn').click(function () {
$.ajax({
url: "testtworesult",
data: "type=submit&area=" + $('#area').val() + "&res=" +
$('#resort').val(),
success: function (data) {
$('#result').html(data);
}
});
});
});
</script>
<div id ="homepage-form-div" class="row">
<div class="span3">
<label>Area:</label>
<select id="area">
<option value="">Any</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div class="span3">
<label>Resort:</label>
<select id="resort">
<option value="">Any</option>
<option value="Love">Love</option>
<option value="Hate">Hate</option>
</select>
</div>
<button type="submit" class="btn btn-default" value="Submit" style="p">Go!</button>
<div style="font-weight: bold; margin-top: 20px;" id="result"></div>
</div>
Then the ajax page:
#{
var db = Database.Open("StayInFlorida");
var getresortval = Request.QueryString["resval"];
var type = Request.QueryString["type"];
var res = Request.QueryString["res"];
var area = Request.QueryString["area"];
var listresort = "SELECT DISTINCT ResortName FROM ResortInfo WHERE AreaName = '#0'";
var qlistresort = db.Query(listresort, getresortval);
if(type == "resortupdate") {
if(getresortval == "Kissimmee") {
Response.Write ("<option value='kissimmee'>Kissimmee</option");
}
if(getresortval == "Davenport") {
Response.Write("<option value='davenport'>Davenport</option");
}
} else if(type == "submit") {
Response.Write(#"You selected the Resort!<br>
Your area was: " + area + #".<br>
And your resort was: " + res + #". Hope you have a great trip!");
}
}
This won't save the content in Database, you will need to use INSERT INTO for that. Then you will require SELECT * FROM to select the data. I have simply used Response.Write().
Good luck.
For the AJAX call, you need a function AJAX can call which houses the Resort query after the user selects an Area. I'm not familiar with Razor or Webmatrix, so here's a pseudo-function (based on PHP) that you might be able to translate to your environment:
if (isset($_POST['area'])) set_resort(); /*AJAX will set $_POST['area'], then do function that returns output to AJAX*/
. . .
function set_resort() {
var listresort = "SELECT DISTINCT ResortName FROM ResortInfo WHERE AreaName = " $_POST['area']; /*make sure you escape that variable, however you do that in your syntax*/
var qlistresort = db.Query(listresort);
var resortArray = array(); /*or however you make arrays in your syntax*/
#foreach(var row in qlistresort){
resortArray[] = #row.ResortName; /*append each resort name to array*/
}
echo json_encode(#resortArray); /*JSON is preferred way to echo array back to AJAX*/
}
Your HTML would look like...
<div id ="homepage-form-div" class="row">
<form id ="homepage-form"action=" /Search1.cshtml">
<div class="span3">
<label>Area:</label>
<select id="areaSelect" name="area"> <!-- add an ID for easier jQuery selection -->
<option value="">Any</option>
#foreach(var row in qlistarea){
<option value="">#row.AreaName</option>
}
</select>
</div>
<div class="span3">
<label>Resort:</label>
<select id="resortSelect" name="resort"> <!-- add an ID for easier jQuery selection -->
<option value="">Any</option>
</select>
</div>
<button type="submit" class="btn btn-default" value="Submit" style="p">Go!</button>
</form>
</div>
Finally, your jQuery AJAX call would be like:
$('#areaSelect').on('change', function() {
var str = $(this).serialize();
$.ajax({
type: 'POST',
url: /*URL of your page*/
dataType: 'json',
data: str,
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown + '\n' + textStatus);
},
success: function(msg) {
$.each(msg, function(index, value) {
$('#resortSelect').append('<option value=' + index + '>' + value + '</option>'; /*add each resort from the set_resort() query to the resort select input*/
});
});
});
Hi I have 3 Controls on my Razor Form. 1) combobox, 2) DropdownSelect 3) Text Input.
First I select value from Combobox and as a result i add options to DropdownSelect. After i select a value from DropdownSelect, i want to enable or disable the 3rd input box.
I am able to populate 2nd Dropdown select when i select a value in 1st Combobox. But I am not able to enable or disable the 3nd input box based on 2nd Dropdown value change.
Here is sample Code.
<input type="text" dojoType="dijit.form.ComboBox" style="margin-top: 5px;" class="left" store="regionStore" queryExpr="${0}" hasDownArrow="true"
searchAttr="text" labelAttr="name" title="Region" id="Plan_RegionName" jsId="Plan_RegionName" name="Plan.RegionName" required="true" placeholder="None" ignoreCase="true" />
<select name="Plan.PlanType" id="Plan_PlanType" title="Plan Type" dojoType="dojox.form.DropDownSelect" required="true" maxHeight="125" labelwidth="185px" style="width: 180px">
<option value="" selected="selected">-- Select One --</option>
<option value="Trial">Trial</option>
<option value="PerUser">Per User</option>
<option value="PerUnit">Per Unit</option>
<option value="Reseller">Reseller</option>
<option value="Other">Other</option>
</select>
<div dojoType="dijit.form.ValidationTextBox" style="width: 180px; margin-top: 5px;" id="Plan_Name" title="Plan Name" name="Plan.Name" required="true"
missingMessage="This value is required" promptMessage="Enter a value" value="">
<script text/type="javascript">
dojo.addOnLoad(function () {
dojo.connect(Plan_RegionName, "onChange", Plan_RegionName, function (evt) {
alert("Combo box Changed!");
});
dojo.connect(Plan_PlanType, "onChange", Plan_PlanType, function (evt) {
alert("Dropdown Changed!");
});
});
</script>
I get the alert message for Combox box change but not for Dropdown change.
Any ideas. Please advice.
thanks,
Vivek
Since "Plan_PlanType is a dojox.form you should be able to check if it is 'valid' as a way to enable the last textbox. So, something like:
if(dojo.byId("Plan_PlanType").validate()){
dojo.byId("Plan_Name").set("enabled", true);
}
However, you may need to wrap this in a dojo.connect function.
I used the onChange event of Selectbox.
Here is the example.
<select name="#name" id="#id" title="#ViewData.ModelMetadata.GetDisplayName()" onChange="enablePlanname(this.getValue())" dojoType="dijit.form.ComboBox" required="true" maxHeight="125" style="width: 180px; margin-top: 5px;">
#if (String.IsNullOrEmpty(Model))
{
<option value="" selected="selected">-- Select One --</option>
}
#foreach (CurrencyType bt in Enum.GetValues(typeof(CurrencyType)))
{
bool selected = false;
if (bt.ToString() == Model)
{
selected = true;
}
<option value="#bt.ToString()"#(selected ? " selected=\"selected\"" : "")>#bt.GetDisplayName()</option>
}
</select>
<script type="text/javascript">
function enablePlanname(value) {
var CurrentTextBox = dijit.byId('Region_Currency');
if (value == "other") {
CurrentTextBox.set("disabled", false);
}
else {
CurrentTextBox.set("disabled", true);
}
}
</script>
Thanks for all your help.