I have an issue with my code, there is a Datalist in my html with 2 options, when the "Azienda" option is selected I want to show the div called "aziende", but when i select "Privato" I don't wanna show that div, but the problem is it show me the div when I select "Privato" too. Somebody can help me?
<form class="contact-form" action="#" method="POST">
<div>
<input class="lista_c" type="text" list="data_list" name="lista" placeholder="Scegli un opzione">
<datalist id="data_list">
<option value="Azienda">Azienda</option>
<option value="Privato">Privato</option>
</datalist>
</div> <br>
<input class="input1" type="text" name="nome" placeholder="Nome" />
<input class="input1" type="text" name="cognome" placeholder="Cognome" /> <br>
<input class="input2" type="text" name="email" placeholder="Email" /> <br>
<div id="aziende" style="display: none">
<input class="nome-azienda" type="text" name="nome-azienda" placeholder="Nome Azienda" />
<input class="iva" type="text" name="IVA" placeholder="P.IVA" />
</div>
</form>
<script>
let getvalue = document.getElementsByName('lista') [0];
getvalue.addEventListener('input', function() {
if(getvalue !== [0]){
document.getElementById('aziende').style="display: block";
}else{
document.getElementById('aziende').style="display: none";
}
})
</script>
As mentioned in the comments, your if test is incorrect. See comments below for details on the working solution.
.hidden {
display: none;
}
<form class="contact-form" action="#" method="POST">
<div>
<input class="lista_c" type="text" list="data_list" name="lista" placeholder="Scegli un opzione">
<datalist id="data_list">
<option value="Azienda">Azienda</option>
<option value="Privato">Privato</option>
</datalist>
</div> <br>
<input class="input1" type="text" name="nome" placeholder="Nome" />
<input class="input1" type="text" name="cognome" placeholder="Cognome" /> <br>
<input class="input2" type="text" name="email" placeholder="Email" /> <br>
<!-- Use CSS classes instead of inline styles when possible. -->
<div id="aziende" class="hidden">
<input class="nome-azienda" type="text" name="nome-azienda" placeholder="Nome Azienda" />
<input class="iva" type="text" name="IVA" placeholder="P.IVA" />
</div>
</form>
<script>
const div = document.querySelector("#aziende");
document.querySelector("[name='lista']").addEventListener('input', function() {
// Just check the value of the input
if(this.value === "Azienda"){
div.classList.remove("hidden"); // Show the div
} else {
div.classList.add("hidden"); // Hide the div
}
});
</script>
Your comparison (the if statement) is invalid. You're comparing the dom element 'getvalue' to an array with a single element of zero.
I believe you should compare the value of the the input element, not the element itself. you're also comparing it to an array? you should compare it to the value you're looking for:
if (getvalue.value !== 'Azienda') {
to help debug things like this, it's useful to use console.log or alert statements to display the value of the variable just before the test:
console.log('value of getvalue input element', getvalue.value);
if (getvalue.value
Related
I would like to do this: on click of a button, put placeholder in all input fields marked with a red asterisk, the following code finds all asterisks:
var asterisks = $("label > span:contains('*').red");
$("#submit").click(function () {
console.log(asterisks);
});
.red {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="Forename">
Forename
<span class="red">*</span>
</label>
<input type="text" id="Forename">
</div>
<div>
<label for="Middlename">
Middle Names
<span class="red">*</span>
</label>
<input type="text" id="Middlename">
</div>
<input type="button" value="Submit" id="submit">
However, I tried to find the inputs below these asterisks and put the same placeholder in them, the following code does not work:
var inputs = $("label > span:contains('*').red").next().find("input");
$("#submit").click(function () {
console.log(inputs);
inputs.attr("placeholder", "This is a placeholder");
});
.red {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="Forename">
Forename
<span class="red">*</span>
</label>
<input type="text" id="Forename">
</div>
<div>
<label for="Middlename">
Middle Names
</label>
<input type="text" id="Middlename">
</div>
<div>
<label for="Lastname">
Last Name
<span class="red">*</span>
</label>
<input type="text" id="Lastname">
</div>
<input type="button" value="submit" id="submit">
What am I doing wrong here?
var asterisks = $("label > span:contains('*').red");
$("#submit").click(function() {
asterisks.each(function() {
$(this).parent().next().attr("placeholder", "whut?");
});
});
.red {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="Forename">
Forename
<span class="red">*</span>
</label>
<input type="text" id="Forename">
</div>
<div>
<label for="Middlename">
Middle Names
<span class="red">*</span>
</label>
<input type="text" id="Middlename">
</div>
<input type="button" value="Submit" id="submit">
You were very close to the solution. You found asterisks inside the labels so you need parent elements next sibling by chaining parent().next()
$("label > span:contains('*').red").next().find("input");
The .find() method looks at a matched element's child element. So you are getting the .next() element, and then looking for a child within it.
The input element is a sibling of the "red" element's parent. So you will need to do this:
$("label > span:contains('*').red").parent().next();
I don't know how should I make a question to ask all of you , but I will try to explain. My question is that I would like to show element with which I have hidden in CSS , in my code there are same class container and result class
My expectation when I focus on the text 1 it should be shown only result of text 1 and text 2 will not make an action.
$('.examples').focus(function() {
$('div.example').show();
$(document).bind('focusin.example click.example',function(e) {
if ($(e.target).closest('.example, .examples').length) return;
$(document).unbind('.example');
$('div.example').fadeOut('medium');
});
});
$('div.example').hide();
.example{
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<p>
<label for="example">Text 1:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>reuslt</p>
</div>
</p>
<br />
<label for="example">Text2:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>result</p>
</div>
You html has a div in a p element which is not value, so use div instead of p as the container, then you need to show the next div.example of the focused input so
$('.examples').focus(function() {
$(this).next('div.example').show();
$(document).bind('focusin.example click.example',function(e) {
if ($(e.target).closest('.example, .examples').length) return;
$(document).unbind('.example');
$('div.example').fadeOut('medium');
});
});
$('div.example').hide();
.example{
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div>
<label for="example">Text 1:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>reuslt</p>
</div>
</div>
<br />
<label for="example">Text2:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>result</p>
</div>
I would like to choose between form_two and for_three in the main_form(fiddle at the bottom of the post). Under the main form should be one of the two forms(form_two/form_three). I can choose between the two forms, but they are not editable, because they are not in the source code, if I inspect the code with the browser.
I would like to have a datepicker from jquery in it, to submit the date. But I have got the problem, that I can see the two(form_two/form_three) different forms in the browser, but if I look in the source code, there is no form in the dom.
Here is my code:
Form to select one of these forms (main_form)
<!-- Content begin -->
<div id="content">
<form method="post" onsubmit="return false">
<fieldset name="inseration_option">
<legend>Inseratauswahl</legend>
<label for="choice">Auswahl:</label>
<select name="choice" id="choice" size="1">
<option value="joboffers" selected="selected">Jobangebot aufgeben</option>
<option value="workeroffers">Job finden</option>
</select>
<button value="ok" id="choice_btn" name="choice_btn" >Los</button>
</fieldset>
</form>
</div>
<div id="form"></div>
<!-- Content end -->
form_two
<!-- Content begin -->
<div id="content">
<form action="index.php?site=suche_inserat" method="post">
<fieldset name="search_option">
<legend>Suche Inserate</legend>
<fieldset>
<legend>Jobinformationen</legend>
<label for="j_select">Jobart:</label><br>
<select name="j_select" size="1">
<option>Gelegenheitsjob</option>
<option>Ausbildungsplatz</option>
<option>Praktika</option>
<option>Fachkräfte</option>
</select><br>
<label for="j_cat">Berufsfeld:</label><br>
<select name="j_cat" size="1">
<option>Bau, Architektur, Vermessung</option>
<option>Dienstleistung</option>
<option>Elektro</option>
<option>Gesellschaft-, Geisteswissenschaften</option>
<option>Gesundheit</option>
<option>IT, Computer</option>
<option>Kunst, Kultur, Gestaltung</option>
<option>Landwirtschaft, Natur, Umwelt</option>
<option>Medien</option>
<option>Metall, Maschinenbau</option>
<option>Naturwissenschaften</option>
<option>Produktion, Fertigung</option>
<option>Soziales, Pädagogik</option>
<option>Technik, Technologiefelder</option>
<option>Verkehr, Logistik</option>
<option>Wirtschaft, Verwaltung</option>
</select><br>
<label for="j_destrict">Stadtteil:</label><br>
<select name="j_destrict" size="1">
<option>Charlottenburg</option>
<option>Friedrichshain</option>
<option>Hellersdorf</option>
<option>Köpenick</option>
<option>Kreuzberg</option>
<option>Lichtenberg</option>
<option>Marzahn</option>
<option>Mitte</option>
<option>Neuköln</option>
<option>Pankow</option>
<option>Reinickendorf</option>
<option>Schöneberg</option>
<option>Spandau</option>
<option>Steglitz</option>
<option>Tempelhof</option>
<option>Treptow</option>
<option>Zehlendorf</option>
</select><br>
<label for="j_date">Gesucht ab Datum:</label><br>
<input type="date" name="j_date"><br>
<label for="j_cash">Vergütung:</label><br>
<input type="text" name="j_cash"><br>
<label for="j_title">Titel:</label><br>
<input type="text" name="j_title"><br>
<label for="j_desc">Beschreibung:</label><br>
<textarea name="j_desc"></textarea>
</fieldset>
<fieldset>
<legend>Auftraggeberinformationen</legend>
<label for="j_company">Unternehmen/Firma:</label><br>
<input type="text" name="j_company"><br>
<label for="j_street">Straße/Nr.:</label><br>
<input type="text" name="j_street"><br>
<label for="j_plz">PLZ:</label><br>
<input type="text" name="j_plz"><br>
<label for="j_town">Ort:</label><br>
<input type="text" name="j_town"><br>
<label for="j_pic">Foto/Logo:</label><br>
<input type="file" name="j_pic">
</fieldset>
<fieldset>
<legend>Kontaktinformationen</legend>
<label for="j_email">E-Mail-Adresse:</label><br>
<input type="text" name="j_email"><br>
<label for="j_phone">Telefonnummer:</label><br>
<input type="text" name="j_phone"><br>
<label for="j_fax">Fax:</label><br>
<input type="text" name="j_fax">
</fieldset>
<button name="search_btn">Inserieren</button>
</fieldset>
</form>
</div>
<!-- Content end -->
form_three
<!-- Content begin -->
<div id="content">
<form action="index.php?site=finde_inserat" method="post">
</fieldset>
<fieldset name="find_option">
<legend>Finde Inserat</legend>
<fieldset>
<legend>Jobinformationen</legend>
<label for="w_select">Jobart:</label><br>
<select name="w_select" size="1">
<option>Gelegenheitsjob</option >
<option>Ausbildungsplatz</option>
<option>Praktika</option>
<option>Fachkräfte</option>
</select><br>
<label for="w_cat">Berufsfeld:</label><br>
<select name="w_cat" size="1">
<option>Bau, Architektur, Vermessung</option>
<option>Dienstleistung</option>
<option>Elektro</option>
<option>Gesellschaft-, Geisteswissenschaften</option>
<option>Gesundheit</option>
<option>IT, Computer</option>
<option>Kunst, Kultur, Gestaltung</option>
<option>Landwirtschaft, Natur, Umwelt</option>
<option>Medien</option>
<option>Metall, Maschinenbau</option>
<option>Naturwissenschaften</option>
<option>Produktion, Fertigung</option>
<option>Soziales, Pädagogik</option>
<option>Technik, Technologiefelder</option>
<option>Verkehr, Logistik</option>
<option>Wirtschaft, Verwaltung</option>
</select><br>
<label for="w_destrict">Stadtteil:</label><br>
<select name="w_destrict" size="1">
<option>Charlottenburg</option>
<option>Friedrichshain</option>
<option>Hellersdorf</option>
<option>Köpenick</option>
<option>Kreuzberg</option>
<option>Lichtenberg</option>
<option>Marzahn</option>
<option>Mitte</option>
<option>Neuköln</option>
<option>Pankow</option>
<option>Reinickendorf</option>
<option>Schöneberg</option>
<option>Spandau</option>
<option>Steglitz</option>
<option>Tempelhof</option>
<option>Treptow</option>
<option>Zehlendorf</option>
</select><br>
<label for="w_date">Verfügbar ab Datum:</label><br>
<input type="text" name="w_date" id="w_date"><br>
<label for="w_cash">Vergütung:</label><br>
<input type="text" name="w_cash"><br>
<label for="w_title">Titel:</label><br>
<input type="text" name="w_title"><br>
<label for="w_desc">Beschreibung:</label><br>
<textarea name="w_desc"></textarea><br>
<label for="w_pic">Profilbild/Foto:</label><br>
<input type="file" name="w_pic">
</fieldset>
<fieldset>
<legend>Kontaktinformationen</legend>
<label for="w_email">E-Mail-Adresse:</label><br>
<input type="text" name="w_email"><br>
<label for="w_phone">Telefonnummer:</label><br>
<input type="text" name="w_phone"><br>
<label for="w_fax">Fax:</label><br>
<input type="text" name="w_fax">
</fieldset>
<button name="find_btn">Inserieren</button>
</fieldset>
</form>
</div>
And the JS File
$(document).ready(function(){
var pfad = "";
$("#choice_btn").click(function(){
//console.log($("#choice").val());
if ( $("#choice").val() == "joboffers" ){
pfad = "sites/suche_inserat.php";
}else{
pfad = "sites/finde_inserat.php";
//console.log($("#choice").val());
}
$( "#form" ).load( pfad );
$( "#w_date" ).datepicker();
/*
$.ajax({
url: pfad,
type: "POST",
async: true,
success: function(callback) {
//console.log(callback);
$("#form").innerHTML(callback);
}
})
*/
})
});
Sorry for my english!! I hope somebody can help me!
edit: Here is a fiddle: click
(I do not know, how to make more html windows in fiddle) :(
I made it this way(jsfiddle) now. Maby could someone have a look at it.
I have took all forms in one file. So I do not need three diffrent files and have to load them into it.
$(document).ready(function(){
$("#form_1").hide();
$("#form_2").hide();
$("#choice_btn").click(function(){
if ( $("#choice").val() == "joboffers" ){
$("#form_2").hide();
$("#form_1").show();
}else{
$("#form_1").hide();
$("#form_2").show();
}
})
$("#j_date").datepicker();
$("#w_date").datepicker();
});
I am trying to hide and/or show form elements when a user selects certain values.
For example, if the user selects "yes" to the consent question, I need it to show a few questions, However, if they change their response to the consent question, I need it to hide those questions.
Here is what I have come up with so far...
$(document).ready(function () {
var input = document.getElementById('consent');
var consent_responses = [{ "0": hideConsent },{ "1": showConsent }];
input.addEventListner('click', function () {
var consent_response;
if (consent_responses[this.value]) {
content_response = consent_responses[this.Function()]
}
else {
content_response = consent_responses[this.Function]
}
});
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
function hideConsent(){
$("#date").hide(),
$("#referrer").hide(),
$("#f_name").hide(),
$("#phone_num").hide(),
$("#leave_msg").hide(),
$("#email").hide(),
}; });
Fiddle here: http://jsfiddle.net/7jX47/1/
You could do it like this: JSFiddle
Basically I only fixed a few typos (did you actually try your code before you posted here?) and added event listeners to the radio buttons with
document.getElementById(...).addEventListener(...)
I also gave your radio buttons unique IDs.
This can be simplified:
var input = document.getElementById('consent');
// Let's use the value as key, and the functions as values
var consent_responses = {
"0" : hideConsent,
"1" : showConsent
};
input.addEventListener("click", function () {
// Get the appropriate function given the value, and invoke it
consent_responses[this.value]();
});
function hideConsent() {
// ...
}
function showConsent() {
// ...
}
It's better to envelop your questions (that needs to be hidden) by a div with a class ".hidden" or style "display: none;". And simplify your code by simply asking that div to show() or hide() when needed.
Like so:
<form id="screening">
<div class="col-md-12 col-sm-12 col-xs-12 nopad" id="create">
<div class="form-group text-center">
<b>Do you agree to answer the screening questions?</b><br />
<div class="radio" id="consent">
<label>
<input type="radio" name="consent" id="consent" value="1">
Yes, I consent
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="consent" id="consent" value="0">
No, I do not consent
</label>
</div>
</div>
<!-- simplify by using this -->
<div id="questions" style="display: none;">
<div class="form-group" id="date">
<label for="date">What is today's date?</label>
<input type="date" class="form-control" id="date" name="date" />
</div>
<div class="form-group" id="referrer">
<label for="referrer">How did you hear about us/our studies?</label>
<select class="form-control" name="referrer" id="referrer">
<option></option>
<option value="1">Flyers</option>
<option value="2">Print Media</option>
<option value="3">A friend</option>
<option value="4">Online (e.g., Craigslist)</option>
<option value="5">Other</option>
</select>
</div>
<div class="form-group" id="other_explain">
<label for="other_explain">Please specify other source.</label>
<textarea class="form-control" rows="3" id="other_explain" name="other_explain"></textarea>
</div>
<div class="form-group" id="f_name">
<label for="f_name">What is your first name?</label>
<input type="text" class="form-control" id="f_name" name="f_name" />
</div>
<div class="form-group" id="phone_num">
<label for="phone_num">What is a phone number at which you can be contacted? </label>
<input type="tel" class="form-control" id="phone_num" name="phone_num" />
</div>
<div class="form-group" id="leave_msg">
<label for="leave_msg">If we call and you are not available, may we leave a message?</label><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="1">
Yes
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="0">
No
</label>
</div>
</div>
<div class="form-group" id="email">
<label for="email">What is an e-mail at which you can be contacted?</label>
<input type="email" class="form-control" id="email" name="email" />
</div>
</div>
</div>
</form>
and in your javascript instead of using this:
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
you use:
function showConsent(){
$("#questions").show(),
};
Hello I have a contact us form using fancybox, and I want to reset/clear the form input values when fancybox closes (either when user clicks outside the popup or using the "close" popup button)
the element which holds the fancybox content is 'inline' so my guess was:
...
$("#fancybox-overlay").fancybox({
'afterClosed': function() {
$('#inline').hide(250, function() {
$('#name input').val('');
$('#phone input').val('');
$('#email input').val('');
$('#subject input').val('');
$('#msgcontent textarea').val('');
$('#security_code input').val('');
$('#name input').removeClass('error');
$('#phone input').removeClass('error');
$('#email input').removeClass('error');
$('#subject input').removeClass('error');
$('#msgcontent textarea').removeClass('error');
$('#security_code input').removeClass('error');
$('#security_code_error').html('');
});
}
});
But the result is as below:
before :
and after:
Any help to make the form values reset/cleared during a "close" action from clicking outside the popup, will be very much appreciated. Thanks.
UPDATE:
The html requested by #Spokey is:
<div id="inline" style="z-index:999999;">
<h2 class="popupheader">...Contact Us: Send us a Message</h2>
<div style="margin:2% 8%;background:#fff;border-radius:5px;width:auto;box-shadow: 3px 3px 10px #bbb;">
<p style="display:inline-block;padding:10px;">
...
</p>
<p style="display:inline-block;padding:10px;float:right;">
...
</p>
</div>
<form id="contact" name="contact" action="#" method="post">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" class="txt" style="margin-left: 3px">
<br>
<label for="phone">Your Phone No.</label>
<input type="text" id="phone" name="phone" class="txt" >
<br>
<label for="email">Your E-mail</label>
<input type="email" id="email" name="email" class="txt">
<br>
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" class="txt" size="45">
<br>
<label for="msgcontent">Enter a Message</label>
<textarea id="msgcontent" name="msgcontent" class="txtarea" style="margin-left: 3px"></textarea>
<br>
<label for="security_code" style="width:auto;">Verify you are human</label>
<img border="0" id="captcha" src="../../image.php" alt=""> <a href="JavaScript: new_captcha();">
<img border="0" alt="" src="../../images/refresh.png" align="bottom"></a>
<input name="security_code" id="security_code" class="txt" style="width:150px;vertical-align: top;margin: 0px;" size="20" type="text" >
<span id="security_code_error" name="security_code_error" style="background:#fefefe;color:red;"></span><? /*<div class="field_error error_pos"><?php if($error['security_code'] != "") echo $error['security_code']; ?></div> */ ?>
<br />
<hr style="color:#f2f2f2;border:1px solid #f2f2f2;width:auto;">
<button id="send" name="send">Send Message</button>
</form>
</div>
And you can do it a lot more easier and cleaner. E.g. if you want to clear all input fields just do it that way without repetitive and spaghetti code:
document.getElementById("yourFormId").reset();
You don't need to hide #inline, as the plugin will hide it itself
$("#fancybox-overlay").fancybox({
'afterClose': function() {
$('#inline input, #inline textarea').val('');
$('#inline').children().removeClass('error');
$('#security_code_error').empty();
}
});
NOTE changed 'afterClosed' for fancybox2
to 'afterClose' (typo error)