Stop form dropdown list from refreshing and losing index - xhtml

I have a form, that includes a drop down list, and a submit button.
The drop down list has 5 values.
Let's say the user chooses value #3, then clicks submit. How would I prevent the drop down list from setting itself back to value #1?
Thanks!

use your serverside script to set selected="selected" for the selected <option>.

After your Submit your side should know what was submitted.
You can tell your DropDownList what was seleced befor by setting the seleced Value as selected.
Example:
<select name='myselect'>
<option value='1' <?php if($myselect == '1') { echo 'selected'; } ?>>#1</option>
<option value='2' <?php if($myselect == '2') { echo 'selected'; } ?>>#2</option>
<option value='3' <?php if($myselect == '3') { echo 'selected'; } ?>>#3</option>
</select>

Related

Livewire form content dissapears

I have this code in a livewire view which contains a form. This is a simple select field in which you are supposed to select a document type from a list.
<div>
<label for="documenttype" class="form-label"><strong>Document type</strong></label>
<select wire:model="documenttype_id" class="form-control" id="documenttype" aria-describedby="documenttypeHelp">
<option selected>{{ __( 'Choose' ) }}</option>
#foreach( $documenttypes as $documenttype )
<option value="{{ $documenttype->id }}" #if( isset( $documenttype_id ) && ( $documenttype_id == $documenttype->id ) ) selected #endif>
{{ $documenttype->name }}
</option>
#endforeach
</select>
</div>
The thing is that I want it to have preselected the correct value when editing a client. But for some reason when I add this code: #if( isset( $documenttype_id ) && ( $documenttype_id == $documenttype->id ) ) selected #endif in the options loop, the form starts behaving strangely.
Everytime the person filling the form selects an option the content becomes blank.
This is situation 1 (before selecting an option):
And this is situation 2 (after selecting the option):
I have no idea why this happens, can someone guide me on how to solve this issue?
add wire:ignore.self to root select's div. Using this modifier, you instruct Livewire donĀ“t update the element itself but allows modification to its children.
The quick way to fix this would be to assign the selected value from your component mount method.
public function mount() {
$this->documenttype_id = $client->documenttype_id
//$client->documenttype_id being the previously selected value from your db
}
this will automatically select your option, you don't need the if statement on your option tag.

Get value from a select option and echo content in the header in WordPress

In my Theme Options I am allowing users to set page for the 404 template. (which means they can create any normal page and choose that page as the 404 Template). For this I added the page dropdown using wp_dropdown_pages().
Now I want echo noindex,nofollow meta values to the page that the user will choose for the obvious SEO reasons. I tried with this but it does not work.
function noindex_404(){
global $post;
$option = $_POST['404_id'];
// $post_val = '2';
if ($post->ID == $option){
//if ($post->ID == $post_val)
// if I try with the direct post value, it's working
echo '<meta name="robots" content="noindex,nofollow">';
}
}
add_action('wp_head', 'noindex_404', 1);
The following is the HTML created by wp_dropdown_pages() and Page 2 is selected under the option name of 404_id with the option value of 2
<select name="404_id" id="404">
<option value="1">Page 1</option>
<option value="2" selected="selected">Page 2</option>
<option value="3">Page 3</option>
<option value="4">Page 4</option>
<option value="5">Page 5</option>
</select>
you can check your 404 page using this condition.
if ( is_404() ) {
echo '<meta name="robots" content="noindex,nofollow">';
}
In this case you are not bound to any specific page. what ever the page is used for 404 this function will check if it is 404 page then your code will be echo out otherwise not.
cheers!

check wordpress select box value

How to check if a select box has a value or not in wordpress by php?
I want to check if a select box has a value and if it has then check the value against $post array generated by for-each loop.
Is there any built in wordpress function?
Thanks.
We can use php function in wordpress actions for example:
<select name="select_value">
<option value="">Default value (key thing is leaving value="")</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
//check in the action or filter for the drop-down value:
if($_POST['select_value'] != '') {
//do something
echo $_POST['select_value'];
} else {
//if not post any value
}
This function may be helpful for you:
selected( $selected, $current, $echo);
$selected (required) = One of the values to compare.
Default: None
$current (optional) = The other value to compare if not just true.
Default: true
$echo(boolean) (optional) = Whether to echo or just return the string.
Default: true
Ref.link: https://codex.wordpress.org/Function_Reference/selected may be helpful for you.

Angularjs 1.2 adds empty option in select

I have a dropdown that gets its items from database. The default value to be selected in this dropdown is retrieved from a cookie.
The problem is,
1. there is an empty option tag as the first option and also,
2. the default value is not selected.
There is no issue at all when I use v1.3.16. This happens when using v1.2.0. (I have to use only v1.2.0)
How to fix this.
ASPX:
<select id="ddlItems" data-ng-model="ItemId">
<option value="-1">-- All Circles --</option>
<option data-ng-repeat="item in Items" value="{{item.AreaCode}}"
data-ng-selected="item.AreaCode==ItemId">{{item.AreaName}}</option>
</select>
Ctrl.js:
var promise = MyFactory.GetItems();
promise.then(function (success) {
if (success.data != null && success.data != '') {
var data = success.data;
$scope.Items = data.lstItems; //bind items to dropdown
$scope.ItemId = itemIdFromCookie; //select default value
alert(itemIdFromCookie); //it pops -1
}
else {
console.log(success.data);
}
}
Rendered HTML:
<select id="ddlItems" data-ng-model="ItemId">
<option value="? string:"-1" ?"></option>
<option value="-1">-- All Circles --</option>
//...other options
</select>
Try to use ngOptions instead
Like this
<select id="ddlItems"
data-ng-model="ItemId"
ng-options="item.AreaCode as item.AreaName for item in Items">
<option value="-1">-- All Circles --</option>
</select>
This happens becausedata-ng-model="ItemId" is empty when your model is App is Loaded.
To Have some initial value. you can put default value in ng-init
For Ex : data-ng-init='data-ng-model="--SELECT--";'
Or per your Array list Item which you are getting from database set one of the values.
Remember init will get triggered b/f you complete the Ajax Call.

Show selected NUMBERS in bootstrap multi-select dropdown instead of checkbox value

I have Bootstrap Multi-select dropdown and the code is:
<select class="multiselect" multiple="multiple">
<option value="one">test value for one</option>
<option value="two">test value for two</option>
<option value="three">test value for three</option>
<option value="four">test value for four</option>
</select>
whenever i select from 1 to 3 its showing the selected value. After selecting the fourth checkbox in dropdown it start displaying "4 Selected". the problem is i need to fix the width of the dropdown, so that if i select one, i need to display 1 Selected instead of the first checkbox value. How can i achieve that.
Tried this also but i didnt find what exactly i need. http://davidstutz.github.io/bootstrap-multiselect/
Thanks in advance.
If you are using http://davidstutz.github.io/bootstrap-multiselect/ then try following code...
DEMO LINK
JS:
$('#example').multiselect({
buttonWidth: '500px',
buttonText: function (options) {
if (options.length == 0) {
return 'None selected <b class="caret"></b>';
} else {
var selected = 0;
options.each(function () {
selected += 1;
});
return selected + ' Selected <b class="caret"></b>';
}
}
});
HTML:
<select id="example" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>

Resources