Form no action -> post using autopilot - html

I am using an external program, "Autopilot" to essentially capture my form (For my marketers). However, I have made a form that does not require any "action" on post, eg, I don't want the page to go anywhere, instead I want #answer-button to act as a button which goes to the next question. (I have buttons before the form which go to the next question).
So my question is, how do I go about creating a form that doesn't reload the page, but still posts data using " action='something' "?
my code
<form id="email-gate-form" action="">
<input type="text" placeholder="FIRST NAME" name="first-name" required>
<input type="text" placeholder="LAST NAME" name="last-name" required>
<input type="text" placeholder="EMAIL" name="email" required>
<input type="text" placeholder="COMPANY" name="company" required>
<input type="submit" value="GET MY RESULTS" name="submit" id="answer-button" class="question-form-gate">
</form>
A small peak into my javascript
$("#answer-button").click(function(e) {
e.preventDefault();
});
var emailGateButton = $("#email-gate .question-form-gate");
emailGateButton.on('click', function () {
questionsOverlay.show();
TweenMax.staggerTo("#email-gate .animated", 0.25, {opacity: 0}, 0.25, "-=0.5")
setTimeout(function(){
emailGate.hide();
},1000)
setTimeout(function(){
questionFinal.show();
TweenMax.staggerFrom("#section-final .animated", 0.25, {opacity: 0}, 0.25, "-=0.5")
},1000)
setTimeout(function(){
questionsOverlay.hide();
},3000);
});
any help greatly appreciated.

<form id="email-gate-form" method="post">
<input type="text" placeholder="FIRST NAME" name="first-name" required>
<input type="text" placeholder="LAST NAME" name="last-name" required>
<input type="text" placeholder="EMAIL" name="email" required>
<input type="text" placeholder="COMPANY" name="company" required>
<input type="submit" value="GET MY RESULTS" name="submit" id="answer-button" class="question-form-gate">
</form>
$("#email-gate-form").submit(function(e) {
e.preventDefault();
process_form();
});
function process_form() {
var name = $("input[name=first-name]").val();
console.log(name);
// do whatever you need to do with your varables
}

Related

How to make react-valid code (add inner script)

I need to change this code to make it valid for React
<script src="https://securepay.tinkoff.ru/html/payForm/js/tinkoff_v2.js"></script>
<form name="TinkoffPayForm" onsubmit="pay(this); return false;">
<input class="tinkoffPayRow" type="hidden" name="terminalkey" value="TinkoffBankTest">
<input class="tinkoffPayRow" type="hidden" name="frame" value="true">
<input class="tinkoffPayRow" type="hidden" name="language" value="ru">
<input class="tinkoffPayRow" type="text" placeholder="Сумма заказа" name="amount" required>
<input class="tinkoffPayRow" type="text" placeholder="Номер заказа" name="order">
<input class="tinkoffPayRow" type="text" placeholder="Описание заказа" name="description">
<input class="tinkoffPayRow" type="text" placeholder="ФИО плательщика" name="name">
<input class="tinkoffPayRow" type="text" placeholder="E-mail" name="email">
<input class="tinkoffPayRow" type="text" placeholder="Контактный телефон" name="phone">
<input class="tinkoffPayRow" type="submit" value="Оплатить">
</form>
I added <script> to index.html, created <form> in React Component and add ref to form
I created const w = window as any and added
const onSubmit = () => {
w.pay(form.current);
}
But it didn't work
What I need to pass as argument to w.pay function?
I solved the problem by adding dangerouslySetInnerHTML

Validating required input before onlick submit redirect

I am writing the following HTML code which requires certain input values and has a submit button which redirects to a different site when clicked. Currently the Submit button redirects even if no value is entered into the input boxes. I want the submit button to only work if all the input values are filled.
<!DOCTYPE html>
<html>
<body>
<h3>Please enter the following information</h3>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="" required><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="" required><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email" value="" required><br>
<label for="UserID">UserID:</label><br>
<input type="text" id="UserID" name="UserID" value="" required><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" value="" required><br><br>
<input onclick="window.location.href = 'https://example.site';" type="submit" value="Submit" />
</form>
</body>
</html>
The reason is because your submit isn't properly structured.
You see, if you replace your input submit with a button, it works perfectly:
<!DOCTYPE html>
<html>
<body>
<h3>Please enter the following information</h3>
<form action="https://example.site">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="" required><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="" required><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email" value="" required><br>
<label for="UserID">UserID:</label><br>
<input type="text" id="UserID" name="UserID" value="" required><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" value="" required><br><br>
<button>Submit</button>
</form>
</body>
</html>
All you would have to change is add the link which you want it to redirect to in the action defined in the form.
This is the recommended method.
Keep in mind that you should always perform server-side checks regardless of whether there is a required attribute in the input field, as it can easily be removed.

Focus onto next input on Enter key using jQuery script

I'm using this jQuery script to focus onto next input when enter pressed:
$(function() {
$(".form >input").on('keyup', function(e) {
if (e.which === 13) {
$(this).next('input').focus();
}
});
});
It does work with this basic skinny HTML form
<div class="form">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
But not with this one
<div class="form">
<input name="cislo1" type="text" class=cislo1 placeholder="" id="cislo1" autofocus /><br>
<input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" /><br>
<input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" /><br>
<input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" /><br>
<input name="cislo5" type="text" class=cislo5 placeholder="" id="cislo5" /><br>
<input name="cislo6" type="text" class=cislo6 placeholder="" id="cislo6" /><br>
<input name="cislo7" type="text" class=cislo7 placeholder="" id="cislo7" /><br>
<input name="cislo8" type="text" class=cislo8 placeholder="" id="cislo8" /><br>
<input name="cislo9" type="text" class=cislo9 placeholder="" id="cislo9" /><br>
<input name="cislo10" type="text" class=cislo10 placeholder="" id="cislo10" /><br>
<input name="cislo11" type="text" class=cislo11 placeholder="" id="cislo11" /><br>
</div>
What seems to be the problem here? Help me please, I'm stuck
The issue here is you are using direct child selector like:
$(".form > input")
This only matches any direct input element inside form class, but in your next example input is not the direct child. So, you need to descent sector instead like:
$(".form input")
This will match any input inside the form class where it is a direct child or not.
Also, you need to replace
$(this).next('input').focus();
with this:
$(this).nextAll('input:first').focus();
This is needed because .next() will get the immediately following sibling of each element, but here input is not the immediate sibling. We also have some <br> in between which are causing the issue. This can be resolved using .nextAll('input:first') instead.
Demo:
$(function() {
$(".form input").on('keyup', function(e) {
if (e.which === 13) {
$(this).nextAll('input:first').focus();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
<p class="cislo">
<input name="cislo1" type="text" class=cislo1 placeholder="" id="cislo1" autofocus onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo1.value=cislo1.value.slice(0,2)" /><br>
<input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo2.value=cislo2.value.slice(0,2)" /><br>
<input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo3.value=cislo3.value.slice(0,2)" /><br>
<input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo4.value=cislo4.value.slice(0,2)" /><br>
</p>
</div>

Form is not submitting via Firefox

I've a form that works perfectly fine on Chrome, Safari, but not Firefox.
Try#1
<form id="subscribe-form" class="footer-sign-up" action="/subscribe" method="POST">
<input type="text" placeholder="First Name" name="first_name" id="fname" required>
<input type="text" placeholder="Last Name" name="last_name" id="lname" required>
<input id="footer-email" type="text" placeholder="Your Email Address" name="email" required>
<input type="submit" id="subscribe" class="signupbtn" value="sign up">
</form>
Try#2
<form id="subscribe-form" class="footer-sign-up" action="/subscribe" method="POST">
<input type="text" placeholder="First Name" name="first_name" id="fname" required>
<input type="text" placeholder="Last Name" name="last_name" id="lname" required>
<input id="footer-email" type="text" placeholder="Your Email Address" name="email" required>
<button type="submit" id="subscribe" class="signupbtn">sign up</button>
</form>
result
Network Tab
Header
Params
How would one go about debugging this further?
I think I may have found something; if you're submitting via AJAX, but not preventing the page submit, you'll have an issue.
Change part of your code to:
$('#subscribe').click(function(e){
e.preventDefault();
...
This should only do the AJAX submit, and not refresh the page.
I was also able to submit via FireFox by changing button type="submit" to button type="button", so that it won't natively submit the page on press.
You need to add a CSRF token to your form. Assuming this is a blade file:
<form id="subscribe-form" class="footer-sign-up" action="/subscribe" method="POST">
{{ csrf_field() }}
<input type="text" placeholder="First Name" name="first_name" id="fname" required>
<input type="text" placeholder="Last Name" name="last_name" id="lname" required>
<input id="footer-email" type="text" placeholder="Your Email Address" name="email" required>
<input type="submit" id="subscribe" class="signupbtn" value="sign up">
When a page in Laravel loads, you can print a CSRF or Cross Site Request Forgery token which is good for a certain amount of time. Any POST request needs to have a current one of these, otherwise Laravel will give you a page expired error.

How can I prevent blank HTML form submissions to go through?

I am using Formspree (which is awesome) except: I have set all my fields to required, when I try manually I can't submit a form without filling everything properly, and however I still get a bunch of blank forms coming through. Has anybody experienced / fixed this before?
Thanks!
<form action="https://formspree.io/XXXXXXXX" method="post">
<input name="_gotcha" style="display: none" type="text">
<input class="form-control input-lg" name="firstname" placeholder="First Name" required type="text">
<input class="form-control input-lg" name="lastname" placeholder="Last name" required type="text">
<input class="form-control input-lg" name="phone" placeholder="Phone number" required type="text">
<select required name="country" class="form-control input-lg" style="border-radius:none; -webkit-appearance: none; padding-top:0px;">
<option value="" disabled selected>Please select your country </option>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="other">Not in the List</option>
<!-- etc -->
</select>
<input type="hidden" name="referrer" id="referrer_field" />
<input type="hidden" name="url" id="url_field" />
<button id="demo" type="submit">GO</button>
And this is another Solution for your code, as this will work even if somebody put "spaces or leave it with blank" in the field of Name or Phone.
Check the Fiddle..
// Bind the event handler to the "submit" JavaScript event
$('form').submit(function () {
// Get the Login Name value and trim it
var fname = $.trim($('#fname').val());
var lname = $.trim($('#lname').val());
var phon =$.trim($('#phon').val());
// Check if empty of not
if (fname === '') {
alert('First name is empty.');
return false;
}
else if (lname === '') {
alert('Last Name is empty.');
return false;
}
else if (phon === '') {
alert('Phone is empty.');
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form action="https://formspree.io/XXXXXXXX" method="post">
<input name="_gotcha" style="display: none" type="text">
<input class="form-control input-lg" name="firstname" placeholder="First Name" id="fname" required type="text">
<input class="form-control input-lg" name="lastname" placeholder="Last name" id="lname" required type="text">
<input class="form-control input-lg" name="phone" placeholder="Phone number" id="phon" required type="text">
<select name="country" class="form-control input-lg" style="border-radius:none; -webkit-appearance: none; padding-top:0px;">
<option value="" disabled selected>Please select your country </option>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="other">Not in the List</option>
<!-- etc -->
</select>
<input type="hidden" name="referrer" id="referrer_field" />
<input type="hidden" name="url" id="url_field" />
<button id="demo" type="submit">GO</button>
If somebody type space to the input box then this Jquery code will work and ask him to fill proper text in fields.
Try W3Schools example of
http://www.w3schools.com/tags/att_input_required.asp
<input class="form-control input-lg" name="firstname" placeholder="First Name" required >
with no equals or anything
I thought the required tag was
required="True/false"
A simple solution would be something like this.
You can do this by using JQuery
// Bind the event handler to the "submit" JavaScript event
$('form').submit(function () {
// Get the Login Name value and trim it
var name = $.trim($('#log').val());
// Check if empty of not
if (name === '') {
alert('Text-field is empty. You cannot leave is blank!');
return false;
}
});
.text-label {
color: #cdcdcd;
font-weight: bold;
}
#pwd{
margin:10px 18px;
}
#logBtn{
margin:10px 90px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form action="login.php" method="post">
<label>Login Name:</label>
<input type="text" name="email" id="log" />
<br/>
<label>Password:</label>
<input type="password" name="password" id="pwd" />
<br/>
<input type="submit" id="logBtn" name="submit" value="Login" />
</form>