I tried writing this code. But when i change the location and modify the code it is showing file not found.
I tried changing the code, changing the location of the file.
The button should act as link and redirect the webpage to the link provided.
If you want to use button as a link , which redirect to next page ,you can do in below 3 ways.
HTML
You can use plain HTML ,and use <form> tag where you specify the desired target URL in the action attribute.Also set CSS display: inline;
<form action="https://microsoft.com">
<input type="submit" value="Go to Google" />
</form>
CSS
You can use <a> tag in CSS
Go to microsoft
JavaScript
If JavaScript is allowed, set the location.href.
<input type="button" onclick="location.href='https://microsoft.com';" value="Go to Google" />
Hope this helps
Thanks
Related
I want to style my Image Field Button (Choose File) with CSS. Currently, its displaying in the default theme. I am using Bootstrap V5.0.1, Django V3.2.12, Python 3.7.6.
First, I tried to identify or add a class or id which I can add and style the button regularly but was unable to add as the button was added by Django Image Field. The Code in my forms.py is given below:
from django import forms
class ImageUploadForm(forms.Form):
image = forms.ImageField(label='')
Then I used the Hover functionality of the Chrome Developer Tools to identify any leads and found that the button and its area had 2 id's #file-upload-button and #id_image.
I tried to add CSS to the above-mentioned id's but did not get the result i desired. I want to style the Choose File Button Below also if possible can i add any bootstrap to the button, any help would be appreciated! Thanks.
HTML-Django Code
<div class="form-group text-center">
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form }}
<br>
<button type="submit" id="btnUpload" class="btn btn-primary" style="margin-top:20px;">Upload</button>
</form>
</div>
i was having the same problem and came upon this article https://www.quirksmode.org/dom/inputfile.html
The ideia is to create a useless button and add style to it, then overlap both with the image field button on top, and then set the opacity of the image button to 0.
The image field button will still work, but you will only see the button with the style you add.
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 a simple form on my main page. It needs to be toggle-able (is that a word?) between the simple version and the detailed version using a button. Where do I put the code for the button, inside or outside the form element? I read online that the submit button should be within the form, so I'm guessing a toggle button should also be there? But I'd rather ask more experienced people. Also, how would I make the forms retain the same content that the user typed when toggleing?
This is for a form I'm making on Wordpress.
I would recommend placing the toggle button outside of the <form> element and then use jQuery (or plain javascript) to handle the switching between the simple and detailed versions of the form. I'm not exactly clear what you had in mind for the simple and detailed versions of the form, but this approach should be easy to adapt to your purposes.
You can give the advanced form fields the same class (e.g. "detailed"), have them hidden by default in your CSS, and then have them appear when the toggle button is clicked using jQuery.
The values inputted into the detailed form fields won't get lost when the button is toggled; the values are still there, but just hidden. They'd still get submitted when the form submit button was clicked.
This is the toggle and <form> code.
<button id="form-toggle">Toggle Detailed Form Fields</button>
<form id="test-form" action="action_page.php">
<p>First name: <input type="text" name="firstname" value=""></p>
<p>Last name: <input type="text" name="lastname" value=""></p>
<p class="detailed">Email: <input type="email" name="email" value=""></p>
<p class="detailed">Phone: <input type="tel" name="phone" value=""></p>
<p><input type="submit" value="Submit"></p>
</form>
This is the CSS you should place in your stylesheet, it makes the detailed form fields hidden by default:
.detailed {
display: none;
}
This is the jQuery code that you could enqueue as an external .js file in your functions.php file or before the </body> of your footer.php file:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#form-toggle').click(function() {
$('.detailed').toggle('fast');
});
});
</script>
I have built a form in Grails. I have used the g:submitToRemote button which dynamically creates a Html <input> tag. I want to apply a dojo style to it like to all other elements in my form like this <g:submitToRemote dojoType="dijit.form.Button" /> but the style doen't get applied. Can you help me out to figure the problem?
<input onclick="createLoader(); dojoType="dijit.form.Button" try{//some Ajax calls};return false" type="button" value="Search">
There are several things you need to check:
Are you sure the button is being parsed? Look at the HTML source and validate whether or not the HTML code of the button is still the same as the code you provided. When Dojo parses the HTML code it will usually change the HTML code to something more complex. If you don't have that complex code, your widget is not picked up by Dojo.
Did you import the correct CSS file? You need to make sure you imported the correct CSS file, for example claro.css.
Does any of the parent elements have the theme class name? If you use the claro theme (for example), you need to make sure you have the classname claro somewhere, usually in your body-tag.
EDIT:
More things to check:
Do you have dijit/form/Button in your require()? Assuming you're using Dojo 1.6 (because you're using the old dojoType) the code you need is:
dojo.require("dijit.form.Button");
Is your button loaded asynchronous or not? If it is loaded async, your node will not be parsed when your page loads. This means you have to async it manually by wrapping your button in a <div> and manually parse that div, for example:
<div id="toParse">
<input onclick="createLoader(); dojoType="dijit.form.Button" try{//some Ajax calls};return false" type="button" value="Search">
</div>
And in JavaScript:
dojo.parser.parse("toParse");
I want to upload a file using asp.net so I do not want to post back the page while uploading . How can I do that and is there any way to do it using Ajax .
Make the file upload form target a hidden iframe.
<iframe name="UploadTarget" style="display:none"></iframe>
<form target="UploadTarget" action="postfile" method="post" enctype="multipart/form-data">
<input type="file" name="MyFile">
<input type="submit" name="submit" value="Send me a file">
</form>
The final trick is to add to your response page:
<script type="text/javascript">parent.somecallbackfunction("Here is some data")</script>
To let your parent page ( the one containing the hidden iframe) know that the the file upload has completed.
An iframe can be placed on your page and can contain an input element, type=file. You can manipulate and submit the iframe form via javascript. You can hide the iframe by setting its CSS style to display:none. This is generally known as the hidden iframe method.
Use something proven like SWFUpload and save yourself the time of writing your own client code.