I am creating search form, when user click search icon, i need to show textbox, once i entered content, and again clicked same search icon, it needs to display search results. Below is the code i used.
HTML & Javascript
<div class="search_right">
<div class="search-top-container">
<div class="search-top"></div>
<div class="search-form">
<div class="search-form-border"></div>
<div class="search-top-title"><span class="icon"></span>Search</div>
<form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get">
<div class="form-search">
<input id="search" type="text" name="q" value="" class="input-text" style="display:none;" autocomplete="off">
<button type="submit" title="Search" id="but" onclick="tog_input();" >
</button>
</div>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<script type="text/javascript">
function tog_input(){
if(jQuery("#search").is(':visible'))
{
if(jQuery("#search").val()!=''){ jQuery("#search_mini_form").submit();
}else{
jQuery("#search").animate({ width: 'hide' });
}
}
else
{
jQuery("#search").animate({ width: 'show' });
}
}
</script>
</form>
</div>
<div class="clear"></div>
</div>
Right now issue is, when i clicked search icon, it showing search page instead of textbox, any assistance would be appreciated.
Change the inline code from:
<button type="submit" title="Search" id="but" onclick="tog_input();">Submit</button>
To:
<button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit</button>
Avoid this line:
jQuery("#search_mini_form").submit();
Prevent the form submission only when needed.
So:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="search_right">
<div class="search-top-container">
<div class="search-top"></div>
<div class="search-form">
<div class="search-form-border"></div>
<div class="search-top-title"><span class="icon"></span>Search</div>
<form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get">
<div class="form-search">
<input id="search" type="text" name="q" value="" class="input-text" style="display:none;"
autocomplete="off">
<button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit
</button>
</div>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<script type="text/javascript">
function tog_input(obj, e) {
if (jQuery("#search").is(':visible')) {
if (jQuery("#search").val() == '') {
jQuery("#search").animate({width: 'hide'});
e.preventDefault();
}
}
else {
e.preventDefault();
jQuery("#search").animate({width: 'show'});
}
}
</script>
</form>
</div>
<div class="clear"></div>
</div>
</div>
I'd suggest that it is because your button type is submit. If you change it to button type = "button" then it should work, although you may need another button to submit your form.
You need to prevent default behaviour of submit button else it will end up in action page. To achieve it you need to do as -
function tog_input(e){
e.preventDefault();// prevents default action
... other code
}
Related
I'm doing a project and I don't understand the front end well.
I have this html page:
<form class="form-group" action="/create" method="post" enctype="multipart/form-data">
<div class="title">
<h1>Cadastre seu produto</h1>
</div>
<div class="single-input">
<input class="form-control" placeholder="nome do produto" type="text" id="nome_produto" name="nome_produto">
</div>
<div class="single-input">
<input class="form-control" placeholder="quantidade em estoque" type="number" id="quantidade" name="quantidade">
</div>
<div class="single-input">
<input class="form-control" placeholder="preco do produto" type="number" id="preco_produto" name="preco_produto">
</div>
<button onclick="loadPage()" id="button" type="submit" class="btn btn btn-danger">ENVIAR</button>
</form>
I want that when I click on the SUBMIT button, I am redirected to another page, I want to do this using Javascript.
I tried to do this:
<script type="text/javascript">
function loadPage(){
window.location("http://localhost:8080/list")
}
but it's not working, every time I click on the button I'm redirected to a blank page
Any solution ?
Window.location is a property not a function. So it should be
window.location = "http://localhost:8080/list";
More details here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location
first post here, i'm trying to write a code following a tutrial, its a to do list and i wrote a function that takes the content of a text type input and adds it to a list, im testing the code using an alert inside the function but it doenst work and no alerts are shown, here's the code. Thanks in advance
let elements = [];
function addElements(){
if (document.querySelector("#task").nodeValue.trim() != ""){
elements.push(document.querySelector("#task").nodeValue.trim())
alert(elements);
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
<!--<input type="submit" id="submit" value="Add To-Do">-->
</form>
</div>
<script src="../todo_list/apps.js"></script>
</body>
So your problem was you didn't call addElements() on your button.
and instead of using nodeValue just use value instead.
this is working code
let elements = [];
function addElements(){
console.log(document.querySelector("#task").value)
if (document.querySelector("#task").value.trim() != ""){
elements.push(document.querySelector("#task").value.trim())
alert(elements);
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn" onclick="addElements()">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
<!--<input type="submit" id="submit" value="Add To-Do">-->
</form>
</div>
</body>
First you need to stop the html form submit with
<form action="#" id="todoForm" onsubmit="return false;">
Then you need to bind click function to your button, so that when button clicked your addElements function will be triggered
<button class="addBtn" onclick="addElements()">
Finally you need to get the input value with
document.getElementById('task').value;
Complete Code Sample
let elements = [];
function addElements() {
var task = document.getElementById('task').value;
if (task.trim() != "") {
elements.push(task);
alert(elements)
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm" onsubmit="return false;">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn" onclick="addElements()">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
</form>
</div>
</body>
Creating an Online form and I'd like only the field that the user is focused on to be notfaded so i decided to add some jQuery to my form but the remove class function is not working. addClass works when I click into a field it shows brightly and not faded as it adds the Focused class but as soon as I click away or am no longer focused on that field the Focused class remains.
I've seen some similar posts but the solutions on the other posts don't seem to pertain to my issue.
Below is my form
<form name="contactform" method="post">
<div class="row">
<div class="col-md-12 inputFaded">
<span class="larger"><strong>Name</strong> <span class="textGreen">*</span></span><br><br>
<span>Please provide your full name</span>
<input type="text" maxlength="100" class="form-control discuss" name="projectname">
<br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" name="nameaction" value="SEND" class="btn btn-lg btn-success btn-block">
</div>
</div>
</form>
Below is my jQuery
$(document).ready(function(){
$('input[type="text"]').on('focus', function() {
$('.inputFaded').addClass('Focused');
});
$('input[type="text"]').off('focus', function() {
$('.inputFaded').removeClass('Focused');
});
});
Any help greatly appreciated!
Thanks,
You are misunderstanding .off()
Description: Remove an event handler.
So it seems that you need to listen focusin and focusout event.
$(document).ready(function(){
$('input[type="text"]').focusin(function() {
$('.inputFaded').addClass('Focused');
});
$('input[type="text"]').focusout(function() {
$('.inputFaded').removeClass('Focused');
});
});
.Focused{
background-color: #FFFFCC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="contactform" method="post">
<div class="row">
<div class="col-md-12 inputFaded">
<span class="larger"><strong>Name</strong> <span class="textGreen">*</span></span><br><br>
<span>Please provide your full name</span>
<input type="text" maxlength="100" class="form-control discuss" name="projectname">
<br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" name="nameaction" value="SEND" class="btn btn-lg btn-success btn-block">
</div>
</div>
</form>
Updated
$(document).ready(function(){
$('input[type="text"]').focusin(function() {
$(this).addClass('Focused');
});
$('input[type="text"]').focusout(function() {
$(this).removeClass('Focused');
});
});
.Focused{
border-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="contactform" method="post">
<div class="row">
<div class="col-md-12 inputFaded">
<span class="larger"><strong>Name</strong> <span class="textGreen">*</span></span><br><br>
<span>Please provide your full name</span>
<input type="text" maxlength="100" class="form-control discuss" name="projectname">
<br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" name="nameaction" value="SEND" class="btn btn-lg btn-success btn-block">
</div>
</div>
</form>
The .off function is not used for running a function but for removing a function from an Event tied to an element, as already pointed out by #Phong. Instead use the .focusout() function or .on("focusout", ..)
Please note that if this is also quite simple in Vanilla JS:
// Vanilla JS solution
(function(){
let input = document.querySelector("input[type='text']"),
inputFaded = document.querySelector(".inputFaded");
input.addEventListener('focus', function() {
console.log("focused now!");
inputFaded.classList.add('Focused');
});
input.addEventListener('focusout', function(){
console.log("I will also be run! :)");
inputFaded.classList.remove('Focused');
})
})()
$(document).ready(function(){
$('input[type="text"]').on('focus', function() {
console.log("focused now!");
$('.inputFaded').addClass('Focused');
});
// Removing function from focus event that does not exist as a function to an eventlistener
$('input[type="text"]').off('focus', function() {
console.log("I will never be run? :(");
$('.inputFaded').removeClass('Focused');
});
// adding focusout eventlistener
$('input[type="text"]').on('focusout', function() {
console.log("I will be run! :)");
$('.inputFaded').removeClass('Focused');
});
// alternative way of adding focusout eventlistener
$('input[type="text"]').focusout( function() {
console.log("I will also be run! :)");
$('.inputFaded').removeClass('Focused');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form name="contactform" method="post">
<div class="row">
<div class="col-md-12 inputFaded">
<span class="larger"><strong>Name</strong> <span class="textGreen">*</span></span><br><br>
<span>Please provide your full name</span>
<input type="text" maxlength="100" class="form-control discuss" name="projectname">
<br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" name="nameaction" value="SEND" class="btn btn-lg btn-success btn-block">
</div>
</div>
</form>
You can also try like this :
$(document).ready(function(){
$("input").focus(function(){
$('.inputFaded').addClass('Focused');
});
$("input").on('blur', function() {
$('div').removeClass('Focused');
});
});
I'm having problems simulating a click via javascript on a mailchimp pop-up subscribe form and i need your help.
<!-- Title & Description - Holds HTML from CK editor -->
<div class="content__titleDescription" data-dojo-attach-point="descriptionContainer"><strong>Unlock the content </strong>by subscribing to our page.</div>
<!-- Form Fields -->
<form action="//mc.us7.list-manage.com/subscribe/form-post?u=bcd9828fa83ea7a231ffbee26&id=1928481ac4" accept-charset="UTF-8" method="post" enctype="multipart/form-data" data-dojo-attach-point="formNode" novalidate="">
<div class="content__formFields" data-dojo-attach-point="formFieldsContainer">
<div class="field-wrapper" id="uniqName_3_0" widgetid="uniqName_3_0">
<label for="mc-EMAIL">Email Address</label>
<input type="text" name="EMAIL" value="" id="mc-EMAIL" class="invalid">
<div class="invalid-error" style="display: block;">This field is required.</div>
</div>
<div class="field-wrapper" id="uniqName_3_1" widgetid="uniqName_3_1">
<label for="mc-FNAME">First Name</label>
<input type="text" name="FNAME" value="" id="mc-FNAME" class="valid">
<div class="invalid-error" style="display: none;"></div>
</div>
<div style="position:absolute;left:-5000px;">
<input type="text" name="b_bcd9828fa83ea7a231ffbee26_1928481ac4" tabindex="-1" value="">
</div>
</div>
<div class="content__button">
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
</div>
</form>
<!-- Footer - Holds HTML from CK editor -->
<div class="content__footer" data-dojo-attach-point="footerContainer"></div>
</div>
<div class="modalContent__image" data-dojo-attach-point="formImageContainer"></div>
The code that i'm trying to target is:
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
It's the submit button "Subscribe" that you can also see in
http://www.aspeagro.com/EN_Program_Abricot.html
Thank you!
How about this? I think is should do what you're after?
HTML
<input id="submit-button" class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
JS
$('#submit-button').on('click', function(e){
e.preventDefault();
// Do what you want to do
});
set id="btn" attribute to your submitting button and using jQuery you can trigger click with $("#btn").click(); call
If your aim is to submit the form, then don't bother sending a click event, but use the form's submit method:
var form = document.getElementById('uniqName_3_0').parentNode.parentNode;
form.submit();
The code is of course easier if you give the form an id attribute:
<form id="myform" ...
and then:
document.getElementById('myform').submit();
That button is inside an iframe. To access it from the parent page you would trigger it like this:
$('iframe').contents().find('input:submit').click()
As the image below illustrates, I have two forms and two buttons. Currently all the forms are visible.
How can I only show the requested form "according to the option they have selected (from the blue buttons on the top)"?
So, if the user clicked on the "send an invite" button, the sent an invite form will appear and the blue buttons will disappear "you can go back by clicking the back button".
Is it possible to use dynamic ID dedication using JS to achieve this? as I will have more than 2 options on some pages etc... For example, give the <a class="button button-box"><p>Send an invite</p></a> an id "#send-and-invite-form", it will then find the form that has that ID and show it. Then hide the div that contains those boxes until clicked back.
Here is a simplified HTML structure:
<div>
<a class="button button-box"><p>Send an invite</p></a>
<a class="button button-box"><p>Add manually</p></a>
</div>
<form data-parsley-validate>
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
<form data-parsley-validate>
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
Keep both the forms hidden at first and give a ID to each <a> and also to the <form>
Then
$("#id-of-btn1").click(function(){
$("#form-1").toggle();
});
and
$("#id-of-btn2").click(function(){
$("#form-2").toggle();
});
EDIT:
This could be a solution to make it completely independent of ID/Classes.
If you give a class to div containing all the <a> then
$(".class-of-div a").click(function(){
var t=$(this).index();
$("body").find("form").hide();
$("body").find("form:eq("+t+")").toggle();
});
This will work for corresponding <a> and <form> only,so make sure that you have them in order.
.show{display:block;}
.hide{display:none;}
<a class="button button-box" id="lnkInvite" ><p>Send an invite</p></a>
<a class="button button-box" id="lnkManually"><p>Add manually</p></a>
<form data-parsley-validate class="hide">Send an Invite Form</form>
<form data-parsley-validate class="hide">Add manually form</form>
<script type="text\javascript">
$().ready(function(){
$("#lnkInvite").click(function(){
/*Toggle the show hide css class*/
});
$("#lnkManually").click(function(){
/*Toggle the show hide css class*/
});
});
</script>
You can achieve this with the help of :target pseudo selector. This is pure CSS solution:
form {
display: none;
}
form:target {
display: block;
}
<div> <a class="button button-box" href="#send-and-invite-form"><p>Send an invite</p></a>
<a class="button button-box" href="#add-manually"><p>Add manually</p></a>
</div>
<form id="send-and-invite-form" data-parsley-validate>
Invite
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required />
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button> <a>Back</a>
</div>
</form>
<form id="add-manually" data-parsley-validate>
Manually
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required />
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button> <a>Back</a>
</div>
</form>
It is also possible to have default tag preselected, however it requires changing order of forms and using tricky selector:
form, form:target ~ #send-and-invite-form {
display: none;
}
#send-and-invite-form, form:target {
display: block;
}
Demo: http://jsfiddle.net/dfsq/5633tu4c/
Simmple solution using js and style attributes.
<html>
<head>
<script>
function showhide1(){
document.getElementById("form1").style.display='block';
document.getElementById("form2").style.display='none';
}
function showhide2(){
document.getElementById("form2").style.display='block';
document.getElementById("form1").style.display='none';
}
</script>
</head>
<body>
<div>
<a class="button button-box" onclick="showhide1()"><p>Send an invite</p></a>
<a class="button button-box" onclick="showhide2()"><p>Add manually</p></a>
</div>
<form data-parsley-validate id="form1" >
<fieldset>
<div>
<input name="" type="email" placeholder="Email address1" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
<form data-parsley-validate id="form2">
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
<script>
document.getElementById("form2").style.display='none';
document.getElementById("form1").style.display='none';
</script>
</body>
</html>
Keep both forms hidden until the button for each is clicked. Clicking the respective button will show the required form AND hide the button. Click back hides the form and shows the button again.
I implemented for the invite section. You will have to implement for the manual as well, but hopefully this points you in the right direction. Also, I skipped the jQuery, but obviously this is your choice.
CSS
.hidden{
display: none;
}
HTML
<div> <a id="inviteButton" class="button button-box"><p>Send an invite</p></a></div>
<form id="inviteForm" class="hidden">
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button> <a id="backButtonInvite">Back</a></div>
</form>
Javascript
var inviteButton = document.querySelector("#inviteButton");
var inviteForm = document.querySelector("#inviteForm");
var backButtonInvite = document.querySelector("#backButtonInvite");
inviteButton.addEventListener("click", function () {
inviteForm.classList.toggle("hidden");
this.classList.toggle("hidden");
});
backButtonInvite.addEventListener("click", function () {
inviteForm.classList.toggle("hidden");
inviteButton.classList.toggle("hidden");
});
Here is the fiddle.