I have a landing page with two forms, only one form visible at a tme. The first form is an age-verification form and if the conditions are met I use jQuery .toggle() to switch to the next form. On page load, for good UX I am using .focus() to put the cursor in the first form field with this line of code: $("input[name='month']").focus();
// Focus cursor on first input field
$("input[name='month']").focus();
var age = 19;
// After calculating age based on user input, toggle the elements
if (age >= 18) {
$('#age-verification').toggle();
$('#subscribe').toggle();
} else {
$('#age-verification').html('<h2>Sorry, you must be at least 18 years old.</h2>');
}
<div id="age-verification">
<h2>Must be 18, please verify age</h2>
<input type="number" name="month" />
<input type="number" name="day" />
<input type="number" name="year" />
<button id="age-gate-submit">Submit</button>
</div>
<form id="subscribe" action="#" method="post">
<input type="text" name="email" />
<input type="text" name="zip" />
<button id ="subscribe" type="submit">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
How can I use either .select(), focus() or other method to place the cursor in the first field of the second form <input type="text" name="email" /> after the .toggle() event? I've tried placing a .focus() event direct after the .toggle() which seemed logical but not successful.
You need to first hide the subscribe form:
$('#subscribe').hide();
Working demo: http://jsbin.com/kihepujewi/edit?html,js,output
Related
I was wondering if it is possible to submit a form after a certain period of time (e.g. 2 minutes) even if not all the required fields are filled out, as I would like all the data entered by that fixed period of time to be submitted. Currently, although I'm using a timeout function that is javascript-based, it does not allow for the form to be submitted upon timeout as the required fields are not completed. I set all the fields to required as the autofocus function does not seem to work if it is not a required field (i.e. does not go into the next input field automatically upon pressing enter in the current field. Is there a way around this? Thanks so much for any help!
window.setTimeout(() => this.submit(), 120000)
<html>
<main>
<form>
<br><label for="response1"><b>Animals</b></label><br>
<input type="text" id="response1" name="response1" autocomplete="off" autofocus required></br>
<br><input type="text" id="response2" name="response2" autocomplete="off" autofocus required></br>
<br><input type="text" id="response3" name="response3" autocomplete="off" autofocus required></br>
<br><input type="text" id="response4" name="response4" autocomplete="off" autofocus required></br>
<button type="submit">Submit</button>
</form>
</main>
</html>
Sure, just put this logic in your function. You just remove required attribute from fields.
let form = document.querySelector('form');
let inputs = form.getElementsByTagName('input');
let i;
for (i = 0; i < inputs.length; i++) {
inputs[i].required = false;
}
there are a couple problems with your code:
you should not open and close br tags, you just put a <br> where you want the line break
the autofocus attribute should only be placed on one input, and that input will have the focus when the page loads.
depending on how you are calling your code, you might run in to problems with the this keyword, you might be better calling the form directly.
I changed those things in your code and succeeded with the following code (no need to remove the required attributes, but if they are not really needed just remove them):
window.setTimeout(() => document.forms[0].submit(), 1000)
<html>
<main>
<form>
<br>
<label for="response1">
<b>Animals</b>
</label>
<br>
<input type="text" id="response1" name="response1" autocomplete="off" autofocus required>
<br>
<input type="text" id="response2" name="response2" autocomplete="off" required>
<br>
<input type="text" id="response3" name="response3" autocomplete="off" required>
<br>
<input type="text" id="response4" name="response4" autocomplete="off" required>
<button type="submit">Submit</button>
</form>
</main>
</html>
I changed the timeout to one second just to be able to see the effect.
I have a page with multiple text boxes, all of which are not required fields (i.e. the user can fill out as many as they wish to). However, I am not able to get autofocus to work from the second text box onwards and the form submits instead when I press enter to move into the next text box (probably because the inputs are not required). Is there a way such that I will be able to autofocus into the next text box after keying in the response for the previous textbox even if the field is not required/stop the form from submitting? Thanks for any help!
<html>
<main>
<form>
<br><label for="response1"><b>Animals</b></label><br>
<input type="text" id="response1" name="response1" autocomplete="off" autofocus ></br>
<br><input type="text" id="response2" name="response2" autocomplete="off" ></br>
<br><input type="text" id="response3" name="response3" autocomplete="off" ></br>
<br><input type="text" id="response4" name="response4" autocomplete="off" > </br>
<button type="submit">Submit</button>
</form>
</main>
</html>
try doing this, its supposed to make the enter to submit only on the last input, and the other times it just moves to the next input.
Dont forget to add the onkeydown to all the inputs except the last one.
<form>
<br><label for="response1"><b>Animals</b></label><br>
<input type="text" id="response1" name="response1" autocomplete="off" autofocus onkeydown="next(this, event)"></br>
<br><input type="text" id="response2" name="response2" autocomplete="off" onkeydown="next(this, event)"></br>
<br><input type="text" id="response3" name="response3" autocomplete="off" onkeydown="next(this, event)"></br>
<br><input type="text" id="response4" name="response4" autocomplete="off"> </br>
<button type="submit">Submit</button>
</form>
<script>
function next(currElement, e) {
if (e.keyCode === 13) {
e.preventDefault();
let nextNum = parseInt(currElement.id.substr(8)) + 1;
document.getElementById('response' + nextNum).focus();
return false;
}
}
</script>
I would like to set the form's display to none when the submit button is pressed.
But this code is not working.
function myFunction() {
var x = document.getElementsByClassName("submit");
x.style.display = "none";
}
<form class="submit" method="post">
<input id="ceg" type="text" name="ceg" placeholder="Cég neve"><br>
<input id="ceg" type="text" name="kontakt" placeholder="Kapcsolattartó neve"><br>
<input id="ceg" type="email" name="" placeholder="Kapcsolattartó email címe"><br>
<input id="ceg" type="text" name="" placeholder="Munkakör leírása (20 szó)"><br>
<h1>Témakör</h1>
<input type="radio" name="menu" value="1">1</input><br>
<input type="radio" name="menu" value="2">2</input><br>
<input type="radio" name="menu" value="3">3</input><br>
<input type="submit" name="submit" value="submit" onload="myFunction">
</form>
You don't really need javascript to solve your problem. Just put the submit class style with display: none; (I recommend change the name of that class, is not intuitive) and put in the form's class attribute the follow checking:
class="<?= (!empty($_POST)) ? 'submit' : ''; ?>"
The javascript's solution is only needed when you have actions that must rely without page submitions. When you submit, you lost the actual condition of the page and your scripting changes is lost.
PS: Not relative to your question, but review your html, ids must be unique and you have other stuff that can improve a bit.
I'm having some trouble here with the logic. I'm using Ajax to POST my form and I'm trying to send some values the correct way.
This is my form.
<form method="post" action="~/AJAXcalls/callajaxagain.cshtml" name="form">
<div class="reportDateDiv">
<input type="text" name="inputDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst"
onchange="mySubmit(this.form)" value="#inputDate" autocomplete="off" placeholder="#placeholderStartDate.ToString("MMM d, yyyy")" readonly="readonly" />
<input type="text" name="endDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst"
onchange="mySubmit(this.form)" value="#endDate" autocomplete="off" placeholder="#noEndDate.ToString("MMM d, yyyy")" readonly="readonly" />
<select name="NormOrAvg" class="dwmViewSelect" onchange="mySubmit(this.form)">
<option selected=#(Request.Form["NormOrAvg"] == "1") value="1">Rep Per Set</option>
<option selected=#(Request.Form["NormOrAvg"] == "2") value="2">Average Rep Per Set</option>
</select>
<input onclick="mySubmit(this.form)" class="testthis" type="text" spellcheck="false" autocomplete="off" name="lift" value="Squat" readonly="readonly" />
<input onclick="mySubmit(this.form)" class="testthis" type="text" spellcheck="false" autocomplete="off" name="lift" value="Benchpress" readonly="readonly" />
<input onclick="mySubmit(this.form)" class="testthis" type="text" spellcheck="false" autocomplete="off" name="lift" value="Deadlift" readonly="readonly" />
</div>
</form>
So what I am trying to achieve is that, the last three inputs in my form is designed as "buttons", this might be weird but as I said, im having trouble figuring this out in a good way, anyhow, the value of these three are Squat, Benchpress and Deadlift, I really only want to send the value of the one being clicked, because on the page that is called by the ajax will show some charts, and depending on what I click I want it to show the matching chart.
What happens right now is that if I var type = request.form["lift"]; on the ajax page, the result will be "squat,benchpress,deadlift", so it sends all values, I only want to send the one I click, I know it gives me all because they all have the same name="", but I dont know how to solve this?
Using razor(cshtml) and its not a MVC project.
The way, I would do this:
Change these to buttons like so:
<button id="squats"></button> [...]
If you already've done that, do the following: (add some id to your form)
document.getElementById('my-form').addEventListener('click', function (event) {
var target = event.target;
var optionChoosen
if (target.tagName == 'BUTTON') {
optionChoosen = target.id;
}
In page 1 I have this html
<input value="creditCard" name="creditCard" maxlength="16">
<input value="name" name="name" maxlength="4">
<input type="button" name="submit">
DISPLAY:
1234567891234568
Name
button
If I click the button, I will go to page 2 and in page 2 I have an edit button. If I click edit, I will be directed to page 1 again with the credit card in masked form
DISPLAY:
XXXX-XXXX-XXXX-4568
Name
button
If for example, I click the creditCard input and then the name input, the display will look like:
DISPLAY:
XXXX-XXXX-XXXX-4
Name
button
Since I added "-" it counts as a character and the maxlength is 16 so the value of the input is trimmed to 16 characters only.
Is there a way I can make to not consider "-" as a character to be counted? I can't adjust the maxlength attribute of the input. It's a business rule. Thank you very much!
Why don't you use JQuery Mask Plugin for this purpose:
https://igorescobar.github.io/jQuery-Mask-Plugin/
It gives you lot of patterns to handle.
I hope you can solve it within this code.
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
<input type="text" size="4" tabindex="1" maxlength="4" onkeyup="myFunction(this,this.value)"> -
<input type="text" size="4" tabindex="2" maxlength="4" onkeyup="myFunction(this,this.value)"> -
<input type="text" size="4" tabindex="3" maxlength="4" onkeyup="myFunction(this,this.value)">
</form>
<script>
function myFunction(x, y) {
if (y.length == x.maxLength) {
var next = x.tabIndex;
if (next < document.getElementById("myForm").length) {
document.getElementById("myForm").elements[next].focus();
}
}
}
</script>
</body>
</html>