jQuery toggle text change and hide elements - javascript

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

Related

How to validate an html5 form and show error tips on a button click?

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>

Submit form only when submit button clicked and prevent "Enter" submitting form

I want to stop a user submitting a form upon clicking enter.
This works for that
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
However I have other buttons on the page that when I tab to and click enter to avail of their functionality, this is blocked via this function.
The button sits as so:
<input type='button' tabindex="29" value='Add Additional Drug' id='addButton'>
And I only want to submit the form when enter pressed while my submit button is selected.
<input type="submit" name="submit" value="Submit" tabindex="40" class="submit"/>
How would I do this?
EDIT
I see the answer in the attached Stackoverflow but he allow people to press Enter if they have completed all the fields:
I don't want a user to press Enter unless they have a button selected(i.e. Can't press Enter, tab to button, can press enter, which will trigger the button to do its functionality and not submit the form.
The form works on a Tabbing basis, so a user will tab over all the fields.
Binding the keydown event to the whole document will affect all inputs and forms on the page, you may have several ones in your page so it will mess up the whole page logic.
You can bind it to a specific form instead:
$("#myForm input").not("#addButton").keydown(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
Demo:
$("#myForm input").not("#addButton").keydown(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
form input {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="myForm">
<input type="text" name="input1" />
<input type="text" name="input2" />
<input type="text" name="input3" />
<input type="submit" name="submit" value="Submit" tabindex="3" class="submit" />
</form>
Note:
I used #myForm as test id here to target a specific form in the
page, you just need to use your form id.
Using jQuery .not() method in .not("#addButton") won't affect the button with id="addButton".
First, keep in mind that what you are attempting breaks UI accessibility standards.
Bearing this in mind, you'll need to stop using a true "submit" button and use a regular button that impersonates the submit button.
Next, you'll need to manually trigger the click events for all non-submit button buttons via code.
Here's a working example. See the comments for details:
$(document).ready(function() {
$(window).on("keydown", function(event){
// Check to see if ENTER was pressed and the submit button was active or not
if(event.keyCode === 13 && event.target === document.getElementById("btnSubmit")) {
// It was, so submit the form
document.querySelector("form").submit();
} else if(event.keyCode === 13 && event.target !== document.getElementById("btnSubmit") ){
// ENTER was pressed, but not while the submit button was active
alert("Enter pressed on something other than submit button.");
// Cancel form's submit event
event.preventDefault();
// Invoke click event of target so that non-form submit behaviors will work
event.target.click();
// Tell JQuery to cancel the event
return false;
}
});
// Non-submit button event handling
$("#btnOther").on("click", function(){
alert("Other button clicked!");
});
// Set up your "regular" button to act as a "submit" button when it is clicked
$("#btnSubmit").on("click", function(){
// Submit the form
document.querySelector("form").submit();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action=# method=post>
<input name=test>
<input type=button id="btnOther" value="Other Button">
<input type=button id="btnSubmit" value=Submit>
</form>

Multiple JavasScript submits in the same form

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 */
});
});

jQuery: trigger click or focus input field

I have a page with multiple divs that all look like the example below.
Each div contains a field, a hidden field and a button.
How can I achieve that by click on the button the (visible) input field gets triggered ?
I need to trigger either a click or focus as both fire the same function.
Each button in question has the class="triggerBtn" and the corresponding input field has the class="inputField".
Example div:
<div>
<input type="text" class="inputField" id="field1" name="field1" />
<input type="hidden" name="field1" />
<button type="button" class="btn btn-primary triggerBtn">Find</button>
</div>
I guess you want:
$(".triggerBtn").click(function () {
$(this).closest('div').find('.inputField').focus();
});
add
Onclick="function()" see here
if you need to trigger it manually using jquery you can to this by
$("#field1").trigger("click");
see also here
$(".triggerBtn").on("click",function(e){
$(this).closest("div").find(".inputField").click();
//or $(this).closest("div").find(".inputField").focus();
});
$(".triggerBtn").parent().children("input[type:text]").first().focus()
Updated Jsfiddle: http://jsfiddle.net/ZmL4y/3/
$(document).on("click",".triggerBtn", function() {
var inputField = $(this).closest('div').find('.inputField');
if($(inputField).is(":visible"))
{
$(inputField ).focus();
}
});

Javascript Logic Problem

I know only what I need but I do not know how to get that done.
This is the logic of the code, I really hope some of you has the solution.
How can I create in javascript or jQuery a function that will do the following?
If that checkbox is selected, when the button is clicked redirect the user to another page by passing the value of the textarea in the URL.
So that is the logic.
We have three elements.
1)The checkbox
2)The input type button
3) The textarea.
The checkbox is selected, the user clicks on the button and the user goes to another page , and the URL will include the value found in the textarea.
i.e.
http://mydomainname/page.php?ValueThatWasinTextArea=Hello World
Can you help me.
I think it is something simple for a javascript coder.
Thank you so much
$(function(){
$(':button').click(function(){
if($('input[type="checkbox"]').is(":checked")){
window.location.href = "http://mydomainname/page.php?ValueThatWasinTextArea="+ $('textarea').val();
}
});
});
**Of course if there's more than these three elements on the page, you're going to want some more specific selectors
You could subscribe to the submit event of the form and inside test if the checkbox was checked and if yes use window.location.href to redirect to the desired url:
$('#id_of_the_form').submit(function() {
var value = encodeURIComponent($('#id_of_textarea').val());
if ($('#id_of_checkbox').is(':checked')) {
window.location.href = '/page.php?ValueThatWasinTextArea=' + value;
return false;
}
});
If the button is not a submit button you can subscribe for the click event of this button and perform the same logic.
Might be some syntax problem because I code this on top of my head
<input id="myCheckbox" type="checkbox" />
<button id="myButton" onClick="buttonClick" />
<input id="myTextArea" type="textarea" />
<script>
function buttonClick()
{
var checkBox = document.getElementById('myCheckbox');
var textArea = document.getElementById('myTextArea');
if(checkBox.checked)
{
window.location = 'http://mydomainname/page.php?ValueThatWasinTextArea=' + textArea.value;
}
}
</script>
$(document).ready(function() {
$('#btnSubmit').click(function() {
if($('#chkBox').is(':checked')) {
window.location = '/page.php?passedValue=' + $('#txtField').val();
}
});
};
...
<form>
<p>
<input type="checkbox" id="chkBox"> Checkbox</input>
</p>
<p>
<input type="text" id="txtField" value="" />
</p>
<p>
<input type="submit" id="btnSubmit" value="Submit" />
</p>
</form>

Categories

Resources