I have a problem with a form. It is not sending any action (page not even refreshing on click). If I copy the form in another document locally it has no problem, all working well, mail message being sent. Here is the code of the form:
<form method='post' name='ContactForm' id='contactForm' action='contact_main.php'>
<p>Your name:</p>
<input type="text" class="input-box" name="user-name" placeholder="Please enter your name.">
<p>Email address:</p>
<input type="text" class="input-box" name="user-email" placeholder="Please enter your email address.">
<p>Subject:</p>
<input type="text" class="input-box" name="user-subject" placeholder="Purpose of this message.">
<p class="right-message-box">Message:</p>
<textarea class="input-box right-message-box message-box" name="user-message" placeholder="Your message."></textarea>
<button type='submit' class='myinputbtn' name='submitf' id="submitf">Send your message</button>
<div id='message_post'></div>
<input type="hidden" name="contact">
</form>
Clicking the submit button results in... nothing!
Please let me know if I need to edit my question before downrating. Thanks!
Use
<input type="submit" ...
instead of a button (which is used with Javascript, not for form submitting)
Related
At first I thought it was some jerk move to make me type my username for added "security" on top of 2FA so I decided to fix it with tampermonkey and remove the autocomplete="off" attribute only to discover that there wasn't one.
Why does Chrome not offer to autofill the email input in this form? This is a link to the site.. But this is the form that is blocking autocomplete on the email address.
<form method="post" class="form-horizontal">
<h1 class="paste-page-header">Log in</h1>
<div class="form-group">
<div class="col-md-24">
<label class="paste-input-label">Email</label>
<div class="paste-input-wrapper">
<input type="text" id="email" name="email" placeholder="Email" tabindex="1" required="true" class="paste-input sl_whiteout" autofocus="autofocus" maxlength="255">
</div>
</div>
</div>
<div class="form-group col-md-24">
<button role="login-button" type="submit" tabindex="2" class="paste-primary-button" data-loading-text="<i class='icon icon-spinner icon-spin'></i>" value="Log in">Next
</button>
</div>
<span class="paste-text">Don’t have an account yet? Sign up for free.</span>
<input inert="" readonly="true" type="password" id="password" name="password" tabindex="50" style="opacity: 0.02;" aria-label="This is a hidden password field for compatibility with password managers. Please ignore this field.">
<input type="hidden" name="g" value="/console/sms/dashboard?" class="sl_whiteout">
<input type="hidden" name="t" value="182b71c36e3bb0a0a788ab671fbe875c7b46602de5f49fb3e441645b8848a76a" class="sl_whiteout">
<input type="hidden" name="CSRF" value="2869689c41323f2456ec6558c8ee7f3e4c409eda3bbed69bf10228f752a293e4" class="sl_whiteout">
</form>
After you type your email address, it will allow you to autocomplete the password, it's just this field that is a problem. And I tried this:
> x = document.getElementById('email')
<input type="text" id="email" name="email" placeholder="Email" tabindex="1" required="true" class="paste-input sl_whiteout" autofocus="autofocus" maxlength="255">
> x = document.getElementById('email')
x.autocomplete
''
So, they aren't disabling it with JS (at least not in any way that I can see.....
I'm asking so that I don't make this mistake on any of my sites and because I'm really curious how they pulled this off.
I wanted to try and verify input before being submitted therefore I used the required attribute at the end of input, but it's not working and I've already tried some of the recommended solution like wrapping the input in form tag or trying to close the tag of input () but when i submit my form with an empty input it stills submited normally and doesn't declare a required field .
I would appreciate any help, thank you!!
this is a part of my code
<form id="form" style="background-color:honeydew ;" class="container text-center">
<div><br><h2> Contact Us </h2></div>
<div id="contact">
<div>
<label> Name</label>
<input type="text" placeholder="Your name " name="name" required/>
</div>
<br>
<div>
<label> Email</label>
<input type="email" placeholder="name#gmail.com" name="email" name="email">
</div>
<br>
<div>
<label> Message</label>
<input type="text" style="height:50px;" name="message">
</div>
<br>
<div><input type="button" value="submit" name="submit"><br></div>
<br>
</div>
<br>
</form>
and this is the javascript file linked to it :
//we take informations subbmitted by user from the form and we replace the form with a reply
//containing these pieces of information on the click on the submit button
var form=document.getElementById('form'),
contactForm=document.getElementById('contact'),
submitButton=contactForm.children[6].children[0];
var processForm= function(){
name=document.getElementsByName('name')[0].value,
email=document.getElementsByName('email')[0].value,
sitereplyText=document.createTextNode('this is a initialiazing value'),
sitereplyEl=document.createElement('p');
mytext= 'Hey '+name+'! Thanks for your message :) We will email you back at '+email;
sitereplyText.nodeValue=mytext;
sitereplyEl.appendChild(sitereplyText);
form.replaceChild(sitereplyEl,contactForm);
}
submitButton.addEventListener('click',processForm);
So i firstly corrected the input type into submit
<input type="submit" value="submit" name="submit">
then in the javascript file i changed
submitButton.addEventListener('click',processForm);
to
submitButton.addEventListener('form.submit()',processForm);
and it seems to work :)
I'm unable to submit the form
I've checked my code thoroughly for hours and looked at posts on freecodecamp forums but it seems to me I still cannot submit the form and I can't pinpoint the problem.
<form action="https://www.freecodecamp.org/email-submit" id="form">
<div class="email-box">
<label for="email">Email: </label>
<input type="email" id="email" name="email" placeholder="Enter your email here.." required>
</div>
<div id="submit-box">
<input type="submit" id="submit" name="submit">
</div>
</form>
When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit) that confirms the email address was entered (and that it posted successfully)
The error states:
AssertionError: The #email input should have a name attribute : expected false to equal true
So, add name attribute:
<input type="email" placeholder="Enter email address"id="email" name="email" required><br>
For any help check here.
This is the code of my website
<form class="form">
<input class="name" type="text" placeholder="Name">
<input class="email" type="email" placeholder="Email">
<input class="phone" type="text" placeholder="Phone No:">
<textarea class="message" name="message" id="message" cols="30" rows="10" placeholder="Message"></textarea>
<input class="submit-btn" type="submit" value="SUBMIT">
</form>
<form class="form" action="emailSubmit.php" method="POST">
You can also add a function to return true or false for validating input data
<form class="form" action="emailSubmit.php method="POST" onsubmit="return validateData()">
When submit is pressed, validate data returns true if input valid and send data through POST to php file, false if invalid and does nothing
Ofcourse this goes along with javascript functions, php script and database to insert queries to
I'm making a contact form that a user can type in then when they click submit it opens Outlook with their input. The problem is that the output is really messy. It outputs like this:
name=John+Smith&email=I+am+contacting+you&comment=example+text+here
I want to output to be more like:
name=John Smith email=I am contacting you comment=example text here
Is that possible with this HTML5 code:
<form method="post" name="contact" action="mailto:myemail#gmail.com">
<p>
<label>Name</label>
<input name="name" value="Your Name" input type="text" size="50" />
<label>Email</label>
<input name="email" value="Your Email" input type="text" size="50" />
<label>Your Comments</label>
<textarea rows="5" cols="5" name="comment"></textarea>
<br />
<input class="button" input type="submit" />
</p>
</form>
Since you have not specified otherwise, your form is “send” using the default enctype application/x-www-form-urlencoded.
Add the attribute enctype="text/plain" to your form element.