I was exploring the search box on the Apple website and noticed it doesn't have a input type="submit" to post the form, even when Javascript is disabled.
<form action="/search/" method="post" class="search" id="g-search">
<div class="sp-label">
<label for="sp-searchtext">Search</label>
<input type="text" name="q" id="sp-searchtext" accesskey="s">
</div>
</form>
Having never really explored it, I take it from this it means you can post a form without needing a submit button, it just relies on the user pressing the return key.
Two questions: 1) Is this compatible across all browsers? So in IE 7 will pressing return still work?; 2) Is there a way to do this in ASP.NET without using an asp:button? I will probably have it inside a placeholder (where I would conventionally use defaultButton to allow for multiple forms on the page) but if I can get rid of the button altogether then that's a plus.
yes of course it is possible to do it in anyway you want.
The simpler thing is to have an onclick event that calls a function that does the submit like this:
JQuery:
$('#id_of_form').submit()
javascript:
document.name_of_my_form.submit();
or
document.getElementById('id_of_my_form').submit();
so simple :)
Related
this seems super simple, yet I'm having trouble figuring it out.
I have a asp.net core mvc application, and I need to use a form to send some input to a specific action.
I have this form:
<div class="panel-body">
<form action="#Url.Action("updateStatus", "Home")">
<textarea class="greyback" id="w3review" name="w3review" rows="4" cols="50"> Update your status...
</textarea>
<br><br>
<input class="input" type="submit" value="Submit">
</form>
</div>
The form invokes the action that I want it to, so far so good, but I of course also need the text that is put into the textfield to be sent along, and that I'm having a bit of trouble with.
I have tried looking at the special razor page stuff for making forms that look like so:
#using (Html.BeginForm(“action”, “controller”))
But I don't quite understand how that works, how I can hold onto my css tags, or how I could actually create a textarea tag with this syntax.
What would be the best way to send along this data to the action that I want?
how I could actually create a textarea tag with this syntax.
You can use the following code:
#Html.TextArea("w3review", "Update your status...", new { #class = "greyback" })
result:
What would be the best way to send along this data to the action that I want?
There is no difference to use html tags or htmlhelper.Htmlhelper will be rendered to html code which is the same with using html tags directly.
I have an HTML form I'm custom coding that integrates with a drip (email platform) form. And I'm trying to get it to show a "success" message (e.g. "thank you for signing up to our newsletter".
What would be the best/cleanest way be to adapt the HTML to allow that message after a submit action?
Here's my code so far:
<form class="subscribe-form" form action="https://www.getdrip.com/forms/0123456789/submissions" method="post" data-drip-embedded-form="0123456789">
<div style="width:25vw">
<input class="subscribe-form__input" type="email" id="drip-email" name="fields[email]" placeholder="Email" value="" >
</div>
<button class="subscribe-form__submit" type="submit" data-drip-attribute="sign-up-button">Sign Up</button>
</form>
Thanks!
Start off by creating the message and styling it properly. Maybe something like this...
<form class="subscribe-form" form action="https://www.getdrip.com/forms/0123456789/submissions" method="post" data-drip-embedded-form="0123456789">
<div style="width:25vw">
<input class="subscribe-form__input" type="email" id="drip-email" name="fields[email]" placeholder="Email" value="" >
</div>
<button class="subscribe-form__submit" type="submit" data-drip-attribute="sign-up-button">Sign Up</button>
</form>
<p class="subscribe-form__thanks">Thanks for subscribing!</p>
You could even wrap the thank you in a div if you would like and add a "thumbs up" icon to fill the space.
Once you're happy with your design, add this to you CSS (if you're using SASS/SCSS, you can add it nested within the element):
hide {
display: none;
}
and add that class to your "Thank You" message, like this:
<p class="subscribe-form__thanks hide">Thanks for subscribing!</p>
Now that that's all set up, you simply need to use JavaScript to remove the hide class from the "Thank You" message, and add it to the form, which will reveal the message and hide the form.
I'll use JQuery for brevity, but Vanilla JS will work great too!
$(".subscribe-form__submit").onClick(()=>{
$(".subscribe-form").addClass("hide");
$(".subscribe-form__thanks").removeClass("show");
});
That should all be working as desired - the form should disappear and the message should appear! The animation could be a little jarring, so have a play around with fading then hiding, and matching the height of the two divs to avoid the page having to change size.
This will hide the form, even if the fields are incorrect/incomplete, so you could look into validate.js to improve your usability if you're interested.
NOTE: This method of using the onClick() JQuery selector doesn't guarantee that the user is actually subscribed to the mailing list - your Drip API request could be incorrect, or their API could fail/be offline.
You can look into the Drip API's callback function (https://developer.drip.com/) if you're interested in making sure the user is properly subscribed, however there's no guarantee they will reply in a timely fashion, and so you'd most likely be over complicating things.
Hope this helped!!
I have one image submit button like this
<input id="enter" name="enter" type="image"
value="Login"
src="images/btn_login.jpg"/>
once i click on this image i got following values
enter.x=39&enter.y=11
but i want to get enter=Login on submit
how to get enter value as login on submit?
Thanks
Some Quick browser tests
Chrome: Working
Safari: Working
Firefox: Working
IE: Not Working
Opera: Not working
Working means enter=login is passed. All browsers are at latest version at the time of writing
IE6 and IE7 definitely don't pass through the value of an image submit, so you can't use this method if you want your page to work in those browsers. However I'm surprised that you say the latest version of IE doesn't work, I thought it did
The only reliable fallback I've found is to overload the name attribute:
<input id="enter" name="enter.login" type="image"
value="Login"
src="images/btn_login.jpg"/>
Then, you have to iterate through all the form params and look for one whose name starts with 'enter'. Note that your input still needs to have a value attribute of some kind, otherwise browsers won't pass it through at all.
Alternatively you can use a normal submit button with a background image - tricky to get consistently styled, or a <button> - although that has even more issues in IE than an image submit :(
You can use a small javascript for this that passes the right value to a hidden input field on clicking the image and submit the form.
Example:
<script>
function submitimg(myvalue)
{
document.getElementById('enter').value = myvalue;
document.getElementById('myform').submit();
}
</script>
<form id="myform">
<input type="hidden" name="enter" value="">
<img src="images/btn_login.jpg" style="cursor:pointer;" onclick="submitimg('Login');">
</form>
I am building a german payment provider into my site.
But when I click on "Submit", nothing happens. Can someone please help me? I think I've looked at it too much and I can't see the forest for the trees anymore...
<form method="post" action="https://www.sofortueberweisung.de/payment/start">
<input name="currency_id" type="hidden" value="EUR" />
<input name="reason_1" type="hidden" value="Zambuu" />
<input name="user_id" type="hidden" value="29593" />
<input name="project_id" type="hidden" value="80145" />
<input type="submit" value="Absenden" />
</form>
Okay, so it's a little bit unclear what I want, it seems:
I have a lot of asp-sites allready, and now I must send, however, the information that is given by the hidden inputs by post-method to the site "sofortüberweisung.de/payment/start".
However I can solve it, it's not nessecary, there is no need for a form-tag, if there is another solution (e.g. with the code behind).
So: How can I send a lot of post information (these here is only an exmaple, in the real site there are a lot more) with code and redirect it to the right site?
If the code you have provided is within a standard ASP.NET form, so that you have nested form tags, try the solutions provided to this Stack Overflow question.
If it is possible to have this page be a simple html form, that is another possible solution.
Your button needs to have the runat="server" attribute set and it might be worth doing the same on your form atttribute.
Also remember in asp.net webforms you can only have one form tag.
I've had this issue a couple of times before where when creating an HTML form inside an ASP.NET form tag, the inner form just wouldn't post out.
One solution for me was to adjust the ASP.NET form tag wrapper for that page (moving the close above the HTML tag).
Another (where I needed ASP.NET controls obove and below the HTML form) was to add an iframe, passing the parameters for the form post to the iframe URL. Using JavaScript, the iframe then used those parameters to post the form to a new window/the parent window. Probably better ways, but it worked for me.
I am working on a ASP.NET MVC web site that has multiple submit buttons. i.e.
<input type="submit" name="SubmitButton" value="Reset" />
<input type="submit" name="SubmitButton" value="OK" />
<input type="submit" name="SubmitButton" value="Back" />
I need to allow users to quickly submitting the form by pressing the 'Enter' key. HTML standard seems to specify that the first submit button will be assumed if a user press the 'Enter' key. However, I need to make the 2nd button (i.e. the "OK") button the default button and for reasons I don't even want to talk about, changing the button order is not an option.
I googled around and I found this post about using Page.Form.DefaultButton in ASP.NET but this doesn't work with ASP.NET MVC.
I also tried the following javascript solution, while it works in Chrome but doesn't work in IE6
$('body').keypress(function(e) {
if (e.which === 13) {
$("input[value='OK']").trigger('click');
}
});
I can think of some really extreme solutions such as going through every single controls in the form an attach the above function to them. However, I don't think that's a very neat solution so I am wondering has anyone got a better solution?
First off, this is wrong:
<input type="submit" name="SubmitButton" value="Reset" />
<input type="submit" name="SubmitButton" value="OK" />
<input type="submit" name="SubmitButton" value="Back" />
All three of them are submit buttons. A reset is an input of type="reset". Get that sorted. Second of all, I've successfully implemented something like that, and it works on IE6. Try this:
function keypressHandler(e)
{
if(e.which == 13) {
e.preventDefault(); //stops default action: submitting form
$(this).blur();
$('#SubmitButton').focus().click();//give your submit an ID
}
}
$('#myForm').keypress(keypressHandler);
The focus() part makes the button appear to be pressed when the user presses enter. Quite nifty.
Use this.
$(function(){
$('input').keydown(function(e){
if (e.keyCode == 13) {
$("input[value='OK']").focus().click();
return false;
}
});
});
You should only have one submit button. The reset button should be type="reset" and the back button should probably be type="button" like this:
<input type="reset" name="ResetButton" value="Reset" />
<input type="submit" name="SubmitButton" value="OK" />
<input type="button" name="BackButton" value="Back" />
Then, Reset and OK will just work the way they are supposed to and you'll only need to handle the Back button click with Javascript.
Edit: The other option would be to place the Reset and Back submit buttons each in their own forms inside iframes. Then they would be ignored by the main form and wouldn't be default buttons. Also, this would allow you to point them to different server actions if needed and there wouldn't be any reliance on Javascript for the button actions.
HTML standard seems to specify that
the first submit button will be
assumed if a user press the 'Enter'
key.
No, the usage of the enter key isn't defined, it's a propritary extension that's been added under various interpretations. You will get different behavoir in different browsers (and it can become very dangerous when you start mixing in different cultural or UI conventions about left to right/right to left ordering of options).
If there is only 1 button on the form then all the mainstream browsers happen to follow the same behavior - they submit the form as if that button was pressed (a buttonName=buttonValue is included with the form data). Of course this doesn't mean the buttons onclick handler is going to fire - that behavoir is browser specific.
When there are several buttons it's a complete crap shoot. Some browsers decide that the first button (and the definition of first can vary - most use the first one mentioned in the Html tree, while others attempt to use screen position) was clicked and use it in the submission, while other browsers (notably some versions of IE) make the equally correct assumption that no specific button was pressed, and so don't include a buttonName=buttonValue (the rest of the form is submitted fine).
Since you use jquery, if you use hotkeys plugin, you can make a such approach:
$(document).bind('keydown', 'return', function (evt){
$.next("input[value='OK']").trigger("click");
return false;
});
Change button order in source but not visually (ie, use CSS to swap the buttons)?