Custom Form Button - javascript

Ok Guys, i have this code:
<a class="button" href="#"><span>SEND</span></a>
how i can transtorm this in a submit form button?
i have tried this, but dont worlks...
<div class="contato_form" id="contato_form">
<form id="form1" name="form1" method="post" action="javascript:envia_contato();">
<p><label for="nome">Name:</label><input class="campo_contato" type="text" name="nome" id="nome" /></p>
<p><label for="email">Email:</label><input class="campo_contato" type="text" name="email" id="email" /></p>
</form>
<div class="clear">
<p><a class="botao" href="#" onclick="javascript:envia_contato();"><span>SUBMIT</span></a></p>
</div>
</br>
</div>

You have a couple of problems.
Your form action should not be the same as the onclick of the submit buton. The form action should be the page which will receive the data you send. So there you have to put a page which is not only HTML but a page server side handled (i.e. PHP, ASP, ASP.NET, JSP, etc.).
Your javascript function envia_contato is not defined in the code you shared, so you have to define it somewhere in the HTML (using a script tag) before using it (like Bhanu suggested):
<script>
function envia_contato()
{
form1.submit();
}
</script>
<div class="contato_form" id="contato_form">
<form id="form1" name="form1" method="post" action="/echo/json/">
<p>
<label for="nome">Name:</label>
<input class="campo_contato" type="text" name="nome" id="nome" />
</p>
<p>
<label for="email">Email:</label>
<input class="campo_contato" type="text" name="email" id="email" />
</p>
</form>
<div class="clear">
<p><a class="botao" href="#" onclick="envia_contato(); return false;"><span>SUBMIT</span></a></p>
</div>
<br/>
</div>
Or you may discard the envia_contato function and call the submit directly (like JK did):
<p><a class="botao" href="#" onclick="form1.submit(); return false;"><span>SUBMIT</span></a></p>
The return false; at the end of the onclick will avoid further events to be raised after that javascript is called, so if you return false the redirección to # will not be done (such redirection is not really important most times, but this way it will do exactly what you need, and you don't need that redirection).
And the following things are not real problems because in most HTML parsers will work anyway (but you may be interested in knowing this anyway):
But you don't need the javascript: when you attach javascript events (like onclick), you need it when something else is expected (like in the href which expects a just a link and not javascript, so you use the prefix to define javascript in there).
Your br tag had the / before the br and it should be just <br> or <br/>.

Try using:
<a class="botao" href="#" onclick="form1.submit()">

you have to do submit form on anchor tag onclick event
function envia_contato()
{
document.form1.submit();
}

Related

Formspree (HTML) and JavaScript not working simultaneously. (Toastr library)

I'm using Formspree - https://formspree.io/ to redirect my forms to my email as I'm hosting my website on a static page.
I'm also using an external library Toastr (http://codeseven.github.io/toastr/) to make a small notification appear once the user clicks the 'Submit' button for the form.
The problem is that I cannot get Formspree and Toastr to run at the same time. When I implement both of them, none of the features work.
Code: (Please say if I need to add more for the problem to be clearer).
<form action="http://formspree.io/emailhere" method="POST">
<div>
<div class="row">
<div class="6u 12u(mobile)">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="6u 12u(mobile)">
<input type="email" name="_replyto" id="email" placeholder="Your Email" />
</div>
</div>
<div class="row">
<div class="12u">
<input type="text" name="subject" id="subject" placeholder="Subject" />
</div>
</div>
<div class="row">
<div class="12u">
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row 200%">
<div class="12u">
<ul class="actions"> //Pressing submit redirects to a 'thank you' page
<li> <input name="submit" type="submit" value="Send" id="submit"/> </li>
<li> <input type="reset" value="Clear Form" class="alt" /> </li>
</ul>
</div>
</div>
</div>
</form>
Now when you press the submit button it redirects you to a Formspring thank you page. When I add the Javascript for the toast notification it does not even do this meaning the JavaScript 'disrupts' the submit button functionality somehow.
$(document).on('click', '#submit', function(evt){
evt.preventDefault();
toastr.success('Thanks for the email, will be in touch promptly.');
});
Thanks for looking.
Edit: So I want it so both of them work together. This is the code for HTML were you can choose the redirect page after you press the submit button:
<input type="hidden" name="_next" value="//site.io/thanks.html" />
I want it so it does not redirect anywhere but does do my JS function notification.
You're preventing the default behavior (to redirect to the form URL) in your click handler. Simply remove
evt.preventDefault();
And it should work (although obviously, since your page is being redirected, the Toastr popup won't be visible).
If you want it to open in a new tab, you should prevent the default behavior (as you do currently) and then open the URL manually.
The best way to get around this is to use a button element instead of the submit input element. This would require you to submit the information to an endpoint of some sort using ajax and then notifying the browser of the submission using your javascript function. All of this is to avoid the redirect that happens when you use the default browser behavior to submit the form. If you don't use ajax, you have to redirect due to default browser behavior.

Redirecting after form submission in Javascript

I hope someone can assist with this. I dont have access to the website backend, so I cant change the js script uploaded there. What I am trying to achieve is make a simple form to submit an issue report and then display a "Thank you" popup and redirect back to main page of the account on our page.
So I can make a form no problem. I copied one of the functioning forms by going to Edit link and clicking on Show Source in Page Body. But I can't stop the default behavior of it going to another page after Submit button is pressed. I suspect it is in js script on the back end. I'll copy code below.
<center>
<b>App Issues Report Form</b>
<br>
</center>
<form action="/Modules/SendForm" method="post" class="form" id="NewForm">
<input name="formFields" value="CONTACTID,AgentName,Notes" type="hidden">
<input name="formLabels" value="Contact ID:,Agent Name:,Notes:" type="hidden">
<input name="fromAddress" value="no-reply#callcenter.com" type="hidden">
<input name="toAddress" value="name#CallCenter.com" type="hidden">
<input name="subject" value="A new message about app" type="hidden">
<input name="emailMsg" value="The following data has been collected:" type="hidden">
<input name="CONTACTID" value="##CONTACTID##" type="hidden">
<input name="companyId" value="##COMPANY_ID##" type="hidden">
<div class="clearfix">
<label>Agent Name:</label>
<div class="input"><input id="AgentName" name="AgentName"
class="validate[required] xlarge" value="##LOGGEDIN_AGENT_FIRST_NAME##
##LOGGEDIN_AGENT_LAST_NAME##" type="text">
</div>
</div>
<div class="clearfix">
<label>Notes:</label>
<div class="input"><textarea id="Notes" name="Notes"
class="validate[required] xxlarge"></textarea>
</div>
</div>
<div class="clearfix grey-highlight">
<div class="input no-label">
<input class="button blue" value="Submit" type="submit">
<input class="button grey" value="Reset" type="reset">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("NewForm").click(function( event ) {
alert( "Thank you for your feedback" );
event.preventDefault();
});
});
</script>
It used to have only this at the end when I copied the code:
<script type="text/javascript">
$(document).ready(function () {
new setupAjaxForm('NewForm'); });
</script>
I tried searching and suggestions here didnt seem to work:
How to redirect user to another page after Ajax form submission
How to redirect user to another page after Ajax form submission?
http://learn.jquery.com/about-jquery/how-jquery-works/
The first thing you have to look at is action="/Modules/SendForm" - this is what does the redirection. If you don't want to redirect, set this to the name of the page you have the form. Obviously there is a whole lot more to forms and redirection (and some other js code might influence this too, nonetheless we don't see what the function setupAjaxForm is supposed to do here), but this is really the first thing to check / get right.
EDIT: I think I understand it more now: basically if you don't have access to the /Modules/SendForm page (where most probably, among others, like form validation, the redirection also happens, then you can't do much to change the redirection.

Trying to submit a parent form using onclick event, not working

I am trying to submit the parent form, using an "onclick" event without specifying the form's id. There is a reason for this. I am using a webfont for a button hence the "span".
My code:
<form action="/Index" method="post"> <p>
<span class="fa fa-arrow-circle-right" onclick="document.form.submit();" style="font-size:50px;cursor:pointer;"></span>
<input type="hidden" name="id" value="10000"/>
</p>
I have also tried:
onclick="this.form.submit();"
This also failed to work.
What is the correct code please?
You can use document.forms[0].submit() if you have only one form in page.
In case if you have multiple forms on the same page then it would submit the first encountered form.
Is there any other forms?
if no, try: 'document.forms[0].submit'
otherwise, add a id to the form
<form id="testForm" action='..'>...</form>
document.getElementById('testForm').submit();
You didn't close your form element.
<form action="/Index" method="post">
<p>
<span class="fa fa-arrow-circle-right" onclick="document.form.submit();" style="font-size:50px;cursor:pointer;"></span>
<input type="hidden" name="id" value="10000"/>
</p>
</form> /*This*/
Should work once you close it.
The below strategy to submit the form would work even if have multiple forms on the same page given that you provide a unique id to each form. The <form> should be provided an id attribute so that specific can be targeted with the given id as below:
<form id="myFormId" action="/Index" method="post">
<p>
<span onclick="document.getElementById('myFormId').submit()" class="fa fa-arrow-circle-right" role="button" style="font-size:50px;cursor:pointer;"></span>
<input type="hidden" name="id" value="10000"/>
</p>
</form>

HTML Contact form not able to configure

I use a template to develop a website. There is a contact form in it which I am having trouble to use. I tried using sources finding from internet to set it to send email to address I want but to no avail.
Here is source for contact form page.
<form id="ContactForm">
<div>
<div class="wrapper"> <span>Your Name:</span>
<input type="text" class="input" />
</div>
<div class="wrapper"> <span>Your E-mail:</span>
<input type="text" class="input" />
</div>
<div class="textarea_box"> <span>Your Message:</span>
<textarea name="textarea" cols="1" rows="1"></textarea>
</div>
<a href="#" class="button1"
onClick="document.getElementById('ContactForm').submit()">Send</a>
<a href="#" class="button1"
onClick="document.getElementById('ContactForm').reset()">Clear</a>
</div>
</form>
php require names for each form element to pass variables correctly, so you need to put a name tag in each input like
<input type="text" name="name" id="id" />
second you need to define the form action, if you are sending parameters to another php file then you need to put the php file source like this:
<form id="ContactForm" method="post" action="path/to/php">
if your are sending the parameters to the same page you can replace pat/to/php with <?php $_SERVER["PHP_SELF"] ?> or simply type in the page's name.

Can I use something other than an input type="submit" to send a form?

This is my html code for my little form. The way my 'submit button is styled it can only be an <a>. Can I still submit this form to an email? How can I make this send to the email assigned to it? jQuery or Javascript?
For example can I use this:
<a class="btn send" href="#send">Send</a>
versus input type="submit"?
<form action="mailto:me#myemail.com">
<input name="name" type="text" value="" placeholder="Name" required/><br>
<input name="email" type="email" value="" placeholder="you#yourmail.com" required/><br>
<textarea class="message" maxlength="200" placeholder="We can answer your questions." required><?php echo $_POST[message]; ?></textarea><br>
<a class="btn send" href="#send"><img src="img/send.png" /></a>
</form>
You can use JavaScript to dynamically submit the form:
$(".btn.send").click(function() {
$(this).closest("form").submit();
return false;
});
Or since you use image, how about simple <input type="image">:
<input type="image" src="img/send.png">
You can use
<button type=submit>Submit Me!</button>
Also "image" buttons submit forms.
Now, that said, you cannot directly initiate an email transaction from an HTML form. The best you can do is cause the user's mailer to be shown, but you have precious little control over how/if that works.
Even better...
$('#AnyElement').click(function() {
$('#formID').submit();
});

Categories

Resources