When I click on submit1 and then on submit2 everything is going well, but, when I press Enter Key on 1st input text I go to the second part
When I press Enter Key on the 2nd input text -> 1st JavaScript function executes which causes me trouble.
I don't want to disable Enter Key press, but that he executes the good submit input.
Is there a way to deactivate submit1 after he has been executed?
Or know from which input text Enter Key has been pressed?
HTML:
<div id="1">
<input type="text" placeholder="name"/>
</div>
<div id="2">
<input type="submit" value="submit" id="submit1"/>
</div>
<div id="3">
<input type="text" placeholder="firstname"/>
</div>
<div id="4">
<input type="submit" value="submit" id="submit2"/>
</div>
CSS:
#3, #4
{
display: none;
}
JavaScript:
$(document).ready(function() {
$("#submit1").click(function () {
/* Verify data with javascript and send it with Ajax */
/* if everything is ok display: */
document.querySelector("#2").style.display = "none";
document.querySelector("#3").style.display = "block";
document.querySelector("#4").style.display = "block";
});
$("#submit2").click(function () {
/* Verify data with javascript and send it with Ajax */
});
});
Unless I misunderstood the question - you are simply trying to make sure that the correct event handler gets called based on which button is selected by the user. This will work fine as long as the buttons have unique IDs which they do - and you can associate them with the correct event handler (which it seems like you are doing in the shared code).
Also, you can disable any button using the disabled attribute (set it to true).
to disable
document.getElementById("submit1").disabled = true;
to enable:
document.getElementById("submit1").disabled = false;
From what I can tell your biggest problem here is that you seem to have two submit buttons in a single form tag. I would seriously recommend against this as it can cause issues like the one you are experiencing. Instead I would change both to buttons and add the submit functionality to JavaScript methods as you are kind of doing now.
Obviously though you would want to link the text boxes to a button then and for that I would take a look at this SO question How to trigger HTML button when you press Enter in textbox?
<input type="submit"> is a special control. It will cause the form to submit if the form has focus and the enter button is pressed. When using this you should make use of event.preventDefault() to cancel that behavior when binding to the click event. I suggest using <button type="button"><button> instead.
If you press ENTER on submit1, submit2 will not be selected unless you hit TAB. Are you doing this?
Anyway, you can do this:
$("#submit1").click(function () {
/* Verify data with javascript and send it with Ajax */
/* if everything is ok display: */
$("#submit2").focus(); // This will automatically focus the user on the second submit button //
});
This will force the user, the next time he hits ENTER, to submit the submit2 button.
But don't use .submit()... you should use the .submit() function instead of .click(), because I believe .click() only checks for mouse clicks?
$("#submit1").submit(function(){
/* Blah blah blah... */
$("#submit2").focus(); // This will automatically focus the user on the second submit button //
});
$("#submit2").submit(function(){
/* ... */
});
As other users have said, are submit1 and submit2 in the same <form> tag:
Yes, they were. But you shouldn't have 2 fields in the same <form> tag if you want to submit the data separately.
Do this:
HTML
<form>
<div id="1">
<input type="text" placeholder="name"/>
</div>
<div id="2">
<input type="submit" value="submit" id="submit1"/>
</div>
</form>
<form>
<div id="3">
<input type="text" placeholder="firstname"/>
</div>
<div id="4">
<input type="submit" value="submit" id="submit2"/>
</div>
</form>
JQuery
$("#submit1").submit(function(e){
/* Blah blah blah... */
e.preventDefault(); // Keeps the user on the same page //
});
$("#submit2").submit(function(e){
/* ... */
e.preventDefault(); // Keeps the user on the same page //
});
I let it work like that:
Why should I have troubles with one form? IE < 6?
HTML:
<form>
<div id="1">
<input type="text" id="text1"/>
</div>
<div id="2">
<input type="submit" value="submit" id="submit1"/>
</div>
<div id="3">
<input type="text" id="text2"/>
</div>
<div id="4">
<input type="submit" value="submit" id="submit2"/>
</div>
</form>
CSS:
#3, #4
{
display: none;
}
JAVASCRIPT:
$(document).ready(function() {
$('#text2').keypress(function(e){
if(e.keyCode==13)
$('#submit2').click();
});
$("#submit1").click(function () {
/* Verify data with javascript and send it with Ajax */
/* if everything is ok display: */
document.querySelector("#2").style.display = "none";
document.querySelector("#3").style.display = "block";
document.querySelector("#4").style.display = "block";
document.querySelector("#submit1").disabled = true;
});
$("#submit2").click(function () {
/* Verify data with javascript and send it with Ajax */
});
});
Related
I have a form with checkboxes, along with a hidden select all button inside the form. I use jQuery to listen for a button click outside the form, and then "click" the hidden button element to select all. Sometimes the page loads up and I click the button and it works perfectly. You can click it multiple times and they all check and uncheck as intended. The form submits perfectly.
Other times, however, the page will load up and I click the button and nothing happens. They don't check no matter how many times I click. I've found this happens a lot if the page sits for more than maybe 10 seconds without me doing anything. But it also can happen on page load. I can't understand why. Is there an error in my code somewhere that I'm just not seeing?
$(document).ready(function(){
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
$('label.choice').toggleClass("choice-text-color");
});
} else {
$(':checkbox').each(function() {
this.checked = false;
$('label.choice').toggleClass("choice-text-color");
});
}
});
$("#selectAll").click(function() {
$('#select-all').click()
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="selectAll" class="btn btn-secondary my-2 my-sm-0"
type="button" name="selectAll">Select All</button>
<form>
<input type="checkbox" id="1"><label for="1" class="choice">ABC</label>
<input type="checkbox" id="2"><label for="2" class="choice">DEF</label>
(....etc.....)
<input type="checkbox" id="select-all" style="display: none;">
<input type="submit" style="display: none;">
</form>
It seems to me that your issue is due to the extraneous markup you've added to facilitate the select all functionality and the JavaScript/JQuery tied to it.
All you need is a single button (it doesn't matter whether it's part of the form or not) to trigger the select/deselect operations. Also, since the button will not be transmitting any data as part of the form the name attribute should not be used.
Also, if you don't want users to see the form's submit button, then simply don't add one to the form. You can then programmatically submit the form with $(form).submit().
// Passing a function into JQuery is the same as document.ready
$(function(){
// JQuery recommends the use of "on" to bind events
$('#selectAll').on("click", function(event) {
$(':checkbox').each(function() {
this.checked = true;
});
$('label.choice').addClass("choice-text-color"); // Update the class use
});
});
.choice-text-color {
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="selectAll" class="btn btn-secondary my-2 my-sm-0" type="button">Select All</button>
<form>
<input type="checkbox" id="1"><label for="1" class="choice">ABC</label>
<input type="checkbox" id="2"><label for="2" class="choice">DEF</label>
</form>
I have a button submit inside a form and just a normal button outside of it. I want to validate a form:
function myButtonHandler(evt) {
if (myForm.checkValidity()) {
alert("yes");
} else {
alert("no");
}
}
This doesn't show the standard error tips inside of input elements when they're invalid when I click on a button -- ones shown by a browser when I click the submit button. How can I get these validation message to pop up when I click on my normal button when the form is invalid?
<form id="my_form">
<input type="text" placeholder="Name" required="true"/>
<input type="submit" id="submit" value="go" />
</form>
No jquery.
You'll need to add the code you've shown to a function that is set up as the click event callback for the normal button:
var myForm = document.querySelector("form"); // reference to form
var btn = document.querySelector("[type='button']"); // reference to normal button
// Set up click event handling function for normal button
btn.addEventListener("click", function(){
if (myForm.checkValidity()) {
alert("yes");
} else {
alert("no");
}
});
<form>
<input type="text" required>
<button type="submit">submit</button>
</form>
<button type="button">Check Validity</button>
If you just want to show the normal browser's validation errors, you can make the second button also a submit button. It's OK for the button to be outside of the form as long as you tie it back to the form with the form attribute.
<form id="theForm">
<input type="text" required>
<button type="submit">submit</button>
</form>
<button type="submit" form="theForm">Check Validity</button>
Trying to create a simple function where a user clicks a button, it shows a form and changes the text on the button. When they click it again, the form hides and button text changes back to what it was.
Here is what I have so far:
$('a.subscribe').click(function() {
var link = $(this);
$('.intro_cta form').toggle(function(){
if ($(this).is(':visible')) {
$('a.enter').css('display','none');
link.text('CLOSE');
} else {
link.text('SUBSCRIBE');
$('a.enter').css('display','block');
}
});
});
And the HTML markup:
SUBSCRIBE
<form class="subscribe_form">
<input type="text" placeholder="EMAIL"/>
<input type="submit" value="JOIN" />
</form>
ENTER
When the user clicks the SUBSCRIBE button, it should show the form and hide the ENTER BUTTON and change the text on the subscribe button to "CLOSE". The opposite should happen when the button is pressed again.
This does kind of work, however the toggle makes the form slide in - I just want it to show or hide.
you could use
.fadeToggle()
for show/hide without that slide effect.
See here for documentation
Check this simple code without toggle.
var check=false;
$("form").hide();
$("a.enter").hide();
$('a.subscribe').click(function() {
if(check==false){
check=true;
$(this).text('CLOSE');
$("form").show();
$("a.enter").show();
}else{
check=false;
$(this).text('SUBSCRIBE');
$("form").hide();
$("a.enter").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
SUBSCRIBE
<form class="subscribe_form">
<input type="text" placeholder="EMAIL"/>
<input type="submit" value="JOIN" />
</form>
ENTER
I've looked around at a few different questions with regards to this topic and no breakthroughts. What I'm trying to do is when the user clicks on the submit button I show 3 buttons on the screen and if the user clicks the third button the form submits. Otherwise I prevent the form from submitting.
However I'm having trouble implementing this. Currently I'm doing it this way and from my research i saw the very obvious mistake I was making with calling e.preventDefault() as soon as the form is submitted which prevents it from being able to be submit.
Hopefully in my code you will see what I'm trying to do. Show the three options before the form is submit and only submit if the third option is selected.
HTML:
<form action="some_url" method="post">
<input type="text" value="" id="fname" />
<input type="submit" value="Submit" />
</form>
<br/>
<div id="option-box">
<span id="option-a">Option A</span>
<span id="option-b">Option B</span>
<span id="option-c">Option C</span>
</div>
JQuery:
$('form').submit(function (e) {
e.preventDefault();
$('#option-box').show();
$('#option-a').click(function () {
alert('option a');
//Do something else
});
$('#option-b').click(function () {
alert('option b');
//Do something else
});
$('#option-c').click(function () {
alert('option c - SUBMIT');
$('form').submit();
});
});
#option-box {
display: none;
}
#option-box span {
background:green;
color: white;
display: block;
cursor: pointer;
padding:5px;
margin: 10px 0;
text-align:center;
max-width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action="some_url" method="post">
<input type="text" value="" id="fname" />
<input type="submit" value="Submit" />
</form>
<br/>
<div id="option-box">
<span id="option-a">Option A</span>
<span id="option-b">Option B</span>
<span id="option-c">Option C</span>
</div>
Here is a fiddle of my current code:
https://jsfiddle.net/javacadabra/rb553ttw/1/
You need to prevent submitting the form to start
$('form').submit(function (e) {
e.preventDefault(); //<-- Need this
//... other code
});
Adding event handlers inside another action can also lead to issues. Submit more than once, you will have more event handlers attached. So you need to remove previous events. You can remove them with off
$('#option-a').off("click").on("click", function () { /* other code */ });
Lastly you should not need to cancel the default action of the buttons since they should not do anything.
And if you want to submit the form, you probably want to unbind the submit method or call it from DOM directly.
$('form').off("submit").submit();
or
$('form')[0].submit();
Take note of what the last selection was, and preventDefault based on that selection:
var selectedOption = "";
$('form').submit(function (e) {
$('#option-box').show();
if (selectedOption != "option-c") {
e.preventDefault();
}
});
$('#option-box').on('click', 'span', function () {
selectedOption = $(this).attr("id");
});
JSFiddle: https://jsfiddle.net/TrueBlueAussie/rb553ttw/4/
There are a few ways I can think of for the solution.
1. Remove type="submit"
Here instead of making <button type="submit"> you can make it <button type="button"> which does not submit the form unless you specify it in your script on click event listener $('form').submit()
2. Activate button on choosing option
Here your submit button is initially disabled. You can call the function using onClick event on the option or in the script and remove the disabled property of the button
3. Apply form action url on choosing option
Similar to 2nd option, here you will set the action url when the user selects a particular option using the script. In case user selects any other option and clicks on submit, no action will be performed
I'm a web development student and I need some help. I have the code below; How do I make it work only when the form is submitted and not the text field is clicked. I also would like it to get and insert the textField's value in the .thanks Div. Please help me learn.
<script type="text/javascript">
$(document).ready(function(){
$(".quote").click(function(){
$(this).fadeOut(5000);
$(".thanks").fadeIn(6000);
var name = $("#name").val();
$("input").val(text);
});
});
</script>
<style type="text/css">
<!--
.thanks {
display: none;
}
-->
</style>
</head>
<body>
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>
<div class="thanks"> $("#name").val(); Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
This is a bit rough and ready but should get you going
$(document).ready(function(){
$("#submitbutton").click(function(){
//fade out the form - provide callback function so fadein occurs once fadeout has finished
$("#theForm").fadeOut(500, function () {
//set the text of the thanks div
$("#thanks").text("Thanks for contacting us " + $("#name").val());
//fade in the new div
$("#thanks").fadeIn(600);
});
});
});
and I changed the html a bit:
<div id="theForm">
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="button" name="submitbutton" id="submitbutton" value="Submit" />
</label>
</p>
</form>
</div>
<div id="thanks">Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
There are several things at issue here:
By using $('.quote').click(), you're setting a handler on any click event on any element contained within the <form>. If you want to catch only submit events, you should either set a click handler on the submit button:
// BTW, don't use an id like "button" - it'll cause confusion sooner or later
$('#button').click(function() {
// do stuff
return false; // this will keep the form from actually submitting to the server,
// which would cause a page reload and kill the rest of your JS
});
or, preferably, a submit handler on the form:
// reference by id - it's faster and won't accidentally find multiple elements
$('#quote').submit(function() {
// do stuff
return false; // as above
});
Submit handlers are better because they catch other ways of submitting a form, e.g. hitting Enter in a text input.
Also, in your hidden <div>, you're putting in Javascript in plain text, not in a <script> tag, so that's just going to be visible on the screen. You probably want a placeholder element you can reference:
<div class="thanks">Thanks for contacting us <span id="nameholder"></span>, we'll get back to you as soon as possible</div>
Then you can stick the name into the placeholder:
var name = $("#name").val();
$('#nameholder').html(name);
I don't know what you're trying to do with the line $("input").val(text); - text isn't defined here, so this doesn't really make any sense.