I'm embedding a form in the admin orders list if an order has a certain status. Code:
function bkf_petals_actions( $column, $post_id ) {
$bkfoptions = get_option("bkf_petals_setting");
if ( $column == 'wc_actions' ) {
$order = wc_get_order( $post_id );
if ( $order->has_status( 'new' ) ) {
$nonce = wp_create_nonce("bkf_petals_decision_nonce");
$pid = get_post_meta($post_id,'_petals_on',1);
$url = admin_url('admin-ajax.php?action=petals_decision&orderid='.$post_id.'&petalsid='.$pid.'&outcome=accept&nonce='.$nonce);
$acceptlink = admin_url('admin-ajax.php?action=petals_decision&orderid='.$post_id.'&petalsid='.$pid.'&outcome=accept&nonce='.$nonce);
$rejectlink = admin_url('admin-ajax.php?action=petals_decision&orderid='.$post_id.'&petalsid='.$pid.'&outcome=reject&nonce='.$nonce.'&code=');
echo '<form action="'.$url.'" method="get" id="petals-decision-'.$post_id.'-form">
<input type="hidden" name="action" value="petals_decision" />
<input type="hidden" name="petalsid" value="'.$pid.'" />
<input type="hidden" name="nonce" value="'.$nonce.'" />
<input type="hidden" name="orderid" value="'.$post_id.'" />
<select name="decision" id="petals-decision-'.$post_id.'-select" class="petals-decision" style="width:150px;" required>
<option value="" disabled selected>Select an action...</option>
<optgroup label="Accept">
<option value="accept">Accept Order</option>
</optgroup>
<optgroup label="Reject">
<option value="293">Cannot deliver flowers</option>
<option value="294">Don\'t have the required flowers</option>
<option value="270">We cannot deliver to this location ever</option>
<option value="280">Cannot deliver to this location today</option>
<option value="281">Do not have these flowers but could do a florist choice</option>
<option value="282">Do not have any flowers to meet delivery date</option>
<option value="272">Need more information to deliver this order</option>
<option value="283">Do not have this container but could do with a substitution of container</option>
<option value="273">Do not do this product ever</option>
<option value="274">There is a problem with this address</option>
<option value="284">This area is restricted, can go on next run but not this delivery date</option>
<option value="285">This area is restricted and can\'t be delivered until next week</option>
</optgroup>
</select>
<input type="submit" />
</form>';
}
}
}
It's rendering as you would expect visually:
Image of rendered form
Here's my problem - as soon as you click on the select field to drop down its options, it triggers the underlying link of the whole row and navigates to the order edit page.
Any ideas? Am I missing something?
#martin-mirchev hit the nail on the head - need to set the z-index of the <select> element to at least 20ish
Related
how to get the name of select tag and use to if condition here is my code:
#{
var size="";
if(Request.Form["cboSize"] == "Extra Small (XS)"){
size = "Extra Small (XS)";
}
...
}
<select name="cboSize">
<option value="xs">Extra Small (XS)</option>
<option value="s">Small (S)</option>
<option value="m">Medium (M)</option>
<option value="l">Large (L)</option>
<option value="xl">Extra Large (XL)</option>
</select>
You need to wrap your select node in a form to get its value from Request.Form["cboSize"]:
<form method="POST">
<select name="cboSize">
<option value="xs">Extra Small (XS)</option>
<option value="s">Small (S)</option>
<option value="m">Medium (M)</option>
<option value="l">Large (L)</option>
<option value="xl">Extra Large (XL)</option>
</select>
<input type="submit" />
</form>
Then in your code:
public async Task<IActionResult> OnPostAsync()
{
var size = Request.Form["cboSize"];
//do something with it asyncronously
return RedirectToPage($"/Details/{size}");
}
I have Created Custom Post Type Named Tours and Different Taxonomies.
I have custom metabox for Tour Duration.
Now, I want to have search Form Filter option .
If I Insert Duration Value Like 14 Days In Metabox, How Can I Query Whether My Custom Metabox Value (Duration) Lies Within My Option Values In Form Like Below and filter Results.
It Should Lies Between 11-15days
<form action="/search-results/" method="post">
<div class="form-group select">
<select name="search_duration">
<option value="">Any Duration</option>
<option value="19">1-5 days</option>
<option value="20">6-10 days</option
><option value="21">11-15 days</option>
<option value="22">16-20 days</option>
<option value="36">21-25 days</option>
<option value="37">26-30 days</option>
<option value="39">31-35 days</option>
</select>
</div><div class="form-group">
<input type="text" name="search" placeholder="Keyword"/></div>
<div class="form-group">
<button class="button secondary" type="submit">Submit</button>
</div>
</form>
On your search results page you could write a custom loop that uses meta_query in it's $args
https://codex.wordpress.org/Class_Reference/WP_Meta_Query
I am using Meteoris for working on my application. I have this scenario in forms. This is an edit view and I am just showing two of the 17 fields I have here:
<label for="name" class="control-label">Name *</label>
<input type="text" id="name" value="{{profile.name}}" placeholder="Name" class="form-control">
<label for="acctType" class="control-label">Account Type</label>
<select id="acctType" placeholder="Name" class="form-control">
<option></option>
<option value="1" {{(profile.acctType == 1) ? 'selected="selected"' : ""}}>Free</option>
<option value="2" {{(profile.acctType == 2) ? 'selected="selected"' : ""}}>Paid</option>
</select>
I have a Name field and an Account Type field. For the Account Type, I have numeric values stored in the Mongo DB. When I try to check something like this, Okay, I am a PHP Developer, and in PHP I do this:
<label for="name" class="control-label">Name *</label>
<input type="text" id="name" value="<?php echo $profile_name; ?>" placeholder="Name" class="form-control">
<label for="acctType" class="control-label">Account Type</label>
<select id="acctType" placeholder="Name" class="form-control">
<option></option>
<option value="1"<?php echo ($profile_acctType == 1) ? ' selected="selected"' : ""; ?>>Free</option>
<option value="2"<?php echo ($profile_acctType == 2) ? ' selected="selected"' : ""; ?>>Paid</option>
</select>
I was getting the following errors. When I didn't give any spaces between " and {, I was getting:
While building the application:
client/views/users/profile.html:42: Expected space
... <option value="1"{{(profile.acctType ...
And when I tried giving a space, I got this error:
While building the application:
client/views/users/profile.html:42: Expected IDENTIFIER
... <option value="1" {{(profile.acctType ==...
What is your advice on fixing this issue?
With more info about your end goal I could make something more eloquent, but here's an option
Template.blah.helpers({
isAccountType: function (acctType) {
if (user.profile.acctType === acctType) return 'selected'
}
});
<option value="1" {{isAccountType 1}}>Free</option>
You cant use {{#if key==val}} in templates but you can do smth like this to get your problem done:
Set in session your profile data Session.set("profile_acctType", 2), you can specify this in your template helpers when you get user profile.
When "yourTemplate" is rendered select the value:
Template['yourTemplate'].rendered = function(){
$("#acctType").val(Session.get("profile_acctType"));
}
Okay, thanks for the answers. What I did was:
Template.blah.helpers({
getSelected: function (acctType, currentValue) {
if (currentValue == acctType) return 'selected'
}
});
And in the form, I did this way:
<option value="1" {{getSelected profile.acctType "1"}}>Free</option>
<option value="2" {{getSelected profile.acctType "2"}}>Paid</option>
Did a generic helper. Could help someone. :)
For this portion of code
<label for="gender">I am:</label>
<select class="select" name="sex" id="sex">
<option value="0">Gender:</option>
<option value="1">Female</option>
<option value="2">Male</option>
</select>
W3C Validator giving this error reference to non-existent ID "gender"
How to solve this?
Edit
Getting here also
reference to non-existent ID "birthday"
<label for="birthday" class="birthday">Birthday:</label>
<div class="field_container">
<select name="birthday_month" id="birthday_month" class="">
<option value="-1">Month:</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
<select id="birthday_day" name="birthday_day">
<option value="-1">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="birthday_year" name="birthday_year">
<option value="-1">Year:</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
</select>
</div>
Change the value of the for attribute in the label element:
<label for="sex">I am:</label>
Edit to add:
Your second example is more complicated, because you're using one label for three input fields.
I'd recommend something like the following:
Add the following CSS rule to your site:
.hidden_label {
font-size:1px;
height:0;
line-height:0;
margin:0 0 0 -1000px;
text-indent:-9999px;
}
Then update your form:
<div class="birthday">Birthday:</div>
<div class="field_container">
<label for="birthday_month" class="hidden_label">Birthday Month</label>
<select name="birthday_month" id="birthday_month" class="">
<option value="-1">Month:</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
<label for="birthday_day" class="hidden_label">Birthday Day</label>
<select id="birthday_day" name="birthday_day">
[...]
</select>
<label for="birthday_year" class="hidden_label">Birthday Year</label>
<select id="birthday_year" name="birthday_year">
[...]
</select>
You want to do two things:
Have a visually appealing form for your users, and then for those users that are using assistive technology, provide some additional helpers along the way. Using the CSS class I defined above, you are ensuring that screen readers will still see the elements and read their contents when the user moves into the form elements, while hiding all the additional labels from the visual site.
There is no id="gender" or name="gender". You are using sex. Either use sex or use gender. Keep it consistent.
In functions php, this works like a charm:
<textarea name="menu1anchor" id="menu1anchor" cols="40" rows="1"><?php echo get_option('menu1anchor'); ?></textarea>
How can i make this drop down list work? I want to be able to input my values and select a desired one later on.
Right now, it does not matter which value I select, after i press "save changes" it does not send my value thru the form to wordpress options.
<select name="menu1" id="menu1">
<option value="1">Microsoft</option>
<option value="2">Google</option>
<option value="3">Apple</option>
</select>
Thank u!
<select name="menu1" id="menu1">
<option value="1"<?php selected(get_option('menu1'),1); ?>>Microsoft</option>
<option value="2"<?php selected(get_option('menu1'),2); ?>>Google</option>
<option value="3"<?php selected(get_option('menu1'),3); ?>>Apple</option>
</select>
Try that instead.