I am using ant design in blazor. An issue I am currently having is that in nested <FormItem> layout I am not able to align items as a Form. They are currently not inline. Is there any work around? I guess it should be done in some HTML way?
Here is my current code:
<Panel Header="Basic information" Key="1">
<Form Layout="FormLayout.Horizontal" Model="this">
<FormItem Label="Record title">
<Input #bind-Value="#this.Title" />
</FormItem>
<FormItem Label="Description 1235465 ">
<Input #bind-Value="#this.Description" />
</FormItem>
<FormItem Label="Content">
<TextArea Rows="4" #bind-Value="#this.Content" />
</FormItem>
<FormItem Label="Date" NoStyle>
<DatePicker #bind-Value="#this.SelectedDate" ShowTime="#true" OnChange="this.OnDateSelected" />
</FormItem>
</Form>
</Panel>
Here how it currently looks like:
Here is an example of what I am trying to achieve:
You can use LabelColSpan prop on Form component, like this:
<Form
LabelColSpan="6" /* it can be a number between 1-24 */
...
>
Related
I have a subscriber form at the bottom of my website:
www.greenchain-engineering.com
The problem is that, although the css and html look alright, and the form looks good if loaded by itself from an html document, when loaded using the mailchimp shortcode, the submit button is not beneath the email input box as desired, instead it is all the way to the right.
Here is the form code, from within the plugin 'forms' tab:
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<div id="mc_embed_signup_scroll">
<p>
<label>Make sure of what you're in for!</label>
<input type="checkbox" name="Newsletter" value="News" checked="checked"> Receive Green News, SA Context!<br>
<input type="checkbox" name="Products" value="Products"> Receive information on our new products<br>
<input type="checkbox" name="Education" value="Edu" > Join our education community.
</p>
</div>
<div style="text-align:center;">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<p>
<input class="clear" style="text-align:center;" type="submit" value="Join the Green Community.">
</p>
</div>
</div>
<!--End mc_embed_signup-->
The problem definitely doesn't jump out at me, this should be working from the code?
Typically, you are not limited to using Mailchimp's preformatted subscribe lists.
All you need are four (4) requirements for the API to add your subscriber to the list and start any automations.
1) The FORM ACTION - Usually found on the <form> head, like so:
<form action="https://cannerycasino.us10.list-manage.com/subscribe/post" method="POST">
2) the USER ID - the default form passes the values through PHP strings &u= and ;id= But the easiest way is to use hidden form fields with that information:
<input type="hidden" name="u" value="YOUR USER ID">
<input type="hidden" name="id" value="YOUR LIST ID">
3) the VALUE SUBMIT and the SUBMIT BUTTON - the hidden value containing your user id and list id. The USER ID is long, and the list ID is about 10 characters.
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_USERID_LISTID" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="ENTER" name="subscribe" id="mc-embedded-subscribe" class="form-button"></div>
4) The Mailchimp SCRIPT Which is typically right below the form, but you can tie it in at the bottom of the page just before the end <body> tag if you like. NOT THE TOP
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email'}(jQuery));var $mcj = jQuery.noConflict(true);</script>
Now that you have those 4 things, you can create any for that you like and use ANY STYLES that you like. The ONLY other requirements are that your <input> field MATCH this layout:
<input type="text" value="" name="MERGE1" class="required" id="mce-MERGE1" placeholder="">
Note that this is just an example, and that for the fields to work you HAVE TO HAVE both the name and the mc-id on each field. If you would like help on creating a form please let me know.
I am trying to use an HTML button to link to a new website given a provided text field input.
I have choices like this:
Option: <br />
One <input type="radio" value="Short"
name="option" <br />:
Two <input type="radio" value="Long"
name="option" <br />:
Three <input type="radio" value="Zero"
name="option" <br />:
And I want to have a button go to .../one if One is selected, .../two if Two is selected, etc...
<form> <input class="MyButton" type="button" value="Google"
onclick=window.location.href='www.google.com' /> </form>
I know this is how I go to a specified link, but I want to go to a link based on my option choice, not a static choice. Thanks
Af first you have to fix your HTML Error. No input element has end tag.
Wrap one, two, three with span
Option: <br />
<span>One</span> <input type="radio" value="Short" name="option" /> <br />
<span>Two</span> <input type="radio" value="Long" name="option" /> <br />
<span>Three</span> <input type="radio" value="Zero" name="option" /> <br />
<form> <input class="MyButton" type="button" value="Google" /> </form>
Then you can get your select value and set button onclick value
$(document).ready(function(){
$("input[type='radio']").click(function(){
var text = $(this).prev('span').text();
$('form > input').attr('onclick',
"javascript:window.location.href='https://www.google.com/" + text + "'");
});
});
After that you click on Google button, you will redired to https://www.google.com/yourSelectValue
Use javascript for this.
Make a function call when the button is clicked. something like this...
<input type="button" onclick="myfunction()"/>
and inside the function get the values from text input and use appropriate methods to go to the link.
I personally wouldn't use javascript for this, you can just use a normal button with the URL in the formaction attribute.
<form>
<button formaction="http://stackexchange.com">Stackexchange</button>
</form>
The form tags are required.
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction
I tried to design a form, which is now to complicated for me to describe so I created a fiddle: http://jsfiddle.net/tLh72acj/
I think this shows my problem: I can't access the radio-input:
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<input type="radio" name="bestellart" value="vor" id="vor" checked />
<label for="vor">CAN'T</label>
<input type="radio" name="bestellart" value="eil" id="eil" />
<label for="eil">TOUCH</label>
<input type="radio" name="bestellart" value="ewg" id="ewg" />
<label for="ewg">THIS!</label>
</fieldset>
I want to control the radio buttons when I click on them, but if I click on any other place inside the collapsible I want it to open (but not if I use the radio buttons). How do I have to handle this?
Is that what you want ?
JsFiddle
if ($(this).closest(".ui-collapsible").hasClass('ui-collapsible-collapsed')){
$(this).closest(".ui-collapsible").collapsible({collapsed: false});
}
else{
$(this).closest(".ui-collapsible").collapsible({collapsed: true});
}
Here is an update with comments : JsFiddle
I want to get a radio button to display an alert when it is selcted, so the user can check that they have chosen the correct value. This is the code I have for the radio buttons:
<tr>
<td><input type="radio" name="level" id="GCSE" value="GCSE">GCSE<br>
<input type="radio" name="level" id="AS" value="AS">AS<br>
<input type="radio" name="level" id="A2" value="A2">A2</td>
</tr>
How would I get so when any of these radio buttons are selected an alert is displayed to the user saying: "Are you sure you have chosen the correct entry level?"
Please keep answers simple, as I have only been learning HTML for 3 weeks
You can do:
<input type="radio" name="level" id="GCSE" value="GCSE" onclick="alert('test');" />
Good luck!
let's assume you have a form called # Myform
Then your code will be like this:
<form id="myForm">
<input type="radio" name="level" id="GCSE" value="GCSE" /> GCSE <br />
<input type="radio" name="level" id="AS" value="AS" /> AS <br />
<input type="radio" name="level" id="A2" value="A2" /> A2 <br />
</form>
Then, put in a tag script something like this:
<script>
$('#myForm input').on('change', function() {
alert("Are you sure you have chosen the correct entry level? +"$('input[name=level]:checked', '#myForm').val());
});
</scritp>
Hope this works for you!
Thx
I am using IE8 browser. It creates an empty text node after <input /><span><textarea> like this tags.
I cant found how rectify this. Can anybody tell me to fix this issue..?
Code :-
<form id="addNewsForm" action="/addNews.php" method="post" enctype="multipart/form-data">
<label>Title : </label>
<input type="text" class="addNewsTitle" name="addNewsTitle" />
<label>Content : </label>
<textarea rows="10" cols="35" name="addNewsCnt" class="addNewsCnt"></textarea>
<label>Category : </label>
<select>
<option>world</option>
<option>important</option>
<option>common</option>
<option>tamilnadu</option>
<option>lifestyle</option>
</select>
<input type="button" name="noimage" class="newsImgAdd" value="ADD IMAGE" />
<input type="file" name="file" class="addNewsImg" />
<input type="submit" class="submit addNewsSubmit" value="SUBMIT" />
<iframe id="addNewsFrame" name="addNewsFrame"></iframe>
</form>
IE8 shows the empty text nodes because sometimes it considers the space between two elements as Empty Text Node.
You need to remove the space between the fields.
Fiddle - http://jsfiddle.net/uTDWD/1/