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>
Related
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
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.
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
}
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>
<form id="contact_form" action="/contact-verzenden" method="POST" enctype="multipart/form-data" >
<input class="textbox" type="text" name="name" id="name" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Naam':this.value;" value="Jouw naam" required/>
<input class="textbox" type="text" name="name" id="tel" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Telefoon':this.value;" value="Telefoon" required/>
<input class="textbox" type="text" name="email" id="email" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'E-mail':this.value;" value="E-mail" required/>
<textarea rows="6" cols="30" type="text" name="message" id="message" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Vraag/opmerking':this.value;" required >Vraag/opmerking</textarea>
<input id="submit_button" type="submit" value="Verzenden" />
</form>
When I click submit, the data sends regardless of whether something has been entered or not.
Even though it's exactly the same as the W3 schools example:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_required
What am I doing wrong?
Because you still have value in every input elements.
Try using placeholder to make it look like your design.
<input class="textbox" type="text" name="name" id="name" placeholder="test" required/>
check this code:
<!DOCTYPE html>
<form id="contact_form" method="POST" enctype="multipart/form-data" >
<input class="textbox" type="text" name="name" id="name" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Naam':this.value;" placeholder="Jouw naam" required/>
<input class="textbox" type="text" name="name" id="tel" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Telefoon':this.value;" placeholder="Telefoon" required/>
<input class="textbox" type="text" name="email" id="email" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'E-mail':this.value;" placeholder="E-mail" required/>
<textarea rows="6" cols="30" type="text" name="message" id="message" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Vraag/opmerking':this.value;" required ></textarea>
<input id="submit_button" type="submit" value="Verzenden" />
</form>
</html>
Because you are already giving him value (value="Jouw naam") and also onblur you are giving it a value ("Naam"). So the value is never empty. That`s why it is submitting the form.
Add placeholder="Jouw naam" instead of value = "Jouw naam"
Hope it helps !!