Ok peep's so the file input tag is very cumbersome and static, but I don't know any other way to do what it does.
Thing is.. I want to be able to split it like siamese twins, right down the middle, if you'll excuse the pun...
<input id="upload_input" type="text" placeholder="Upload A File">
<button id="upload_button">Upload..</button>
<input id="hidden_input" type="file" style="display:none">
$('#upload_button').click(function(){
// initiate hidden_input
})
$('#hidden_input').change(function(){
$('#upload_input').text(
$('#hidden_input').text()
)
// or upload_input.innerText = hidden_input.innerText
// if the jQuery isn't right, I don't know much jQuery...
})
I think that explains what I'm trying to do, if not just ask away... thanks in advance!
dude never mind I found what i was lookin for, it was the $().click() event I'd been usin all along
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!!
So I'm trying to implement a very simple search functionality in my Meteor app. It's a very simple medical dictionary app, so I have only one collection which contains all the terms along with their respective definitions, pronunciations, etc. My goal is for a user to input their search query using a form input, and display the relevant search results (after hitting submit, after keyup or keydown events, doesn't really matter for now; this is just a prototype). Here's what I have so far.
Search Bar (part of a template called header.html)
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" id="search" name="search" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Event Handler (called header.js)
Template.header.events({
'submit form': function(e) {
e.preventDefault();
var query = $(e.target).find('[name=search]').val();
// Log the query for testing
console.log(query);
//Log the object that is returned for testing
console.log(Dictionary.find({english: query}).fetch());
var result = Dictionary.find({english: query}).fetch();
}
});
List of Results (This is the part that doesn't work, in a template called itemsList.html)
<template name="itemsList">
<div class="items">
{{#each dictionary}}
<ul>
<!-- itemPage just refers to the page individual items -->
<li>{{english}}</li>
</ul>
{{/each}}
</div>
</template>
In this case {{english}} refers to the piece of data in the collection I would like to search for (the english word in the collection Dictionary).
So, now that I've got all that out of the way, my question is: what do I do from here? In header.js, the result from console.log(Dictionary.find({english: query}).fetch()); is/are the object(s) I'm looking for, so basically, what must I do to send that object/those objects to my itemsList.html template so I can iterate over it with a cursor?
I think I've been working at this too long, because I'm sure the solution is something really simple. Any help is appreciated, and if my approach is all wrong (I've seen a lot of people using sessions when searching for things), please let me know what I should do better. Also, I'm using iron-router and have autopublish turned off, so if changes need to made to either of those things please let me know that as well. Thanks!
Just save your search string in a session and subscribe using the session as an argument if it exists, that way you can dynamically subscribe to the data that you need to populate your template
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 :)
i had an image which i want to be displayed instead of submit button. But i don want document.form.submit();
i.e
<input type="submit" value="" style="background:url("../images/submit.jpg");">
somewhat like this ... but m not getting it :(
so wat m i missing ?? plz help
There is an input type="image" for that.
Otherwise though, try to use single quotes inside the style argument.