I have 5 radio buttons and want to show different div on selection of particular radio
button, but other div as contact form should be displayed on submitting form.
And one more thing I want next div on same location of first div ( first div show and second div hide at same place)
<p>Tell us more about Yourself</p>
<form class="request-demo-form" action="" method="post" onSubmit="e();" name="form1">
<div class="input-block">
<input name="info" class="input-radio" type="radio" value="Restaurant" /> Restaurant Chain with more than 3 Locations. ( Looking for more information )
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" value="IndRestaurant"/> Independent Restaurant with 1-3 Locations ( Looking for more information )
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" /> Existing Punchh Customers ( Looking For Support)
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" /> User of Punchh Developed App ( Looking For Support)
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" /> Others ( Marketing , Partership etc.)
</div>
<br/>
<div class="submit-btn-area">
<button type="submit" class="button button-dark">SUBMIT<span class="arrow1"></span></button>
</div>
</form>
I have not much experience in javascript so please check my code
<script type="text/javascript">
$('input:radio[value="Restaurant"]').change(
$('form').submit(function (e) {
if ($(this).is(':checked')) {
$('#main').hide();
$('#Restaurant').show();
e.preventDefault();
}
});
</script>
In the above code the $(this) refers to the form element, and not the radio input field.
I suggest, that on the submit event of the form, that we check the radio input field and hide and show the divs accordingly.
<script type="text/javascript">
$().ready(function() {
$('form').submit(function (e) {
$('input:radio[value="Restaurant"]').is(':checked')) {
$('#main').hide();
$('#Restaurant').show();
e.preventDefault();
}
});
});
</script>
Related
I am trying to get the value from 5 buttons, whichever the user selects, and then once they fill the form out, I want the button value that they selected to be shown on the "summary" screen.
Is there a way to get the value of the button, along with all the other form details, and then send all those details to a new screen that shows all the information the user has entered? Something like a confirmation screen to confirm all details before they send their enquiry.
What I've been trying:
Buttons:
<div class="card">
<h1 id="size">Select your size*</h1>
<ul class="size-list">
<li>
<button class="size-link" id="size-button" value="Small">
Small
</button>
</li>
<li>
<button class="size-link" id="size-button2" value="Medium">
Medium
</button>
</li>
<li>
<button class="size-link" id="size-button3" value="Large">
Large
</button>
</li>
<li>
<button class="size-link" id="size-button4" value="X Large">
X Large
</button>
</li>
<li>
<button class="size-link" id="size-button5" value="XX Large">
XX Large
</button>
</li>
</ul>
</div>
I want to get the value from each button above as well as all the information from the form below and send it to the "Summary" screen.
Form:
<form method="GET" action="final.html" id="myform" class="contact-form">
<label id="fullname">Full Name*</label> <br />
<input name="name" id="name" class="txt-form name" type="text" />
<label id="mail">Email*</label> <br />
<input name="email" id="email" class="txt-form email" type="email" />
<label id="cheap">Have you found this item cheaper on a competitor website?*</label>
<br />
<label>
<input id="radio1" type="radio" name="radio" value="Yes"> <label for="radio1">
<span><span></span></span>Yes</label>
<input id="radio2" type="radio" name="radio" value="No"> <label for="radio2">
<span><span></span></span>No</label> <br />
</label>
<div id="url">
<label>Competitor URL</label>
<input name="url_name" id="url-link" class="txt-form" type="url">
</div>
<label id="msg">Enquiry Message*
<span id="characters">(0/200)</span></label>
<textarea name="message" id="message" class="txt-form message" type="textarea"></textarea>
<p id="asterisk">
Fields marked with an *asterisk are compulsory
</p>
<input type="submit" class=" btn" id="submit" value="Submit your enquiry">
</form>
Summary Screen:
<div id="app" class="contact-main">
<form id="myform" class="contact-form"></form>
</div>
Javascript:
const urlName = new URL(location.href);
document.getElementById('app').innerHTML = `
<label>Full Name: </label> ${urlName.searchParams.get("name") || "N/A"}
<br /><br />
<label>Email:</label> ${urlName.searchParams.get("email") || "N/A"}<br /><br />
<label>Size of item selected:</label> ${urlName.searchParams.get("sizes") || "N/A"} <br /><br />
<label>Have you found this item cheaper on a competitor
website?
</label> ${urlName.searchParams.get("radio") || "N/A" } <br /><br />
<div>
<label>Competitor URL:</label> ${urlName.searchParams.get("url-link") || "N/A"} <br /><br />
</div>
<label id="msg">Enquiry Message:</label> <br/> "${urlName.searchParams.get("message") || "N/A"}" <br /><br />
`;
I am able to get everything from the form but the "Size of item selected". I know this is because I am trying to retrieve it from the url.searchPram, however the buttons are not included on the form so I am just wondering if there's any other way?
Regarding: "Is there a way to get the value of the button"
I assume you mean the value of the clicked button. Yes, there is a way, by setting up a click listener.
Rather than setting up a click listener for each button, you can set up just one on the parent that contains the buttons. To make things easy, set an id for the enclosing <ul>:
<ul class="size-list" id="size-list">
Then set a listener on that <ul>:
document.getElementById('size-list').addEventListener('click', evt => {
let clickedButton = evt.target;
let btnValue = clickedButton.value;
}
You now have the value of the clicked button.
Storing Button's Value into a Form Element
If you need to store that value into a form element, so that value is included when the form is submitted, this can also be done with a hidden input. Let's create one with an id and name of "size":
<form method="GET" action="final.html" id="myform" class="contact-form">
<input type="hidden" id="size" name="size" value="" />
</form>
Then, just a slight modification of the click handler will store the button's value into the hidden input:
document.getElementById('size-list').addEventListener('click', evt => {
let clickedButton = evt.target;
let btnValue = clickedButton.value;
document.getElementById('size').value = btnValue;
}
That's all, the "size" value will now be sent when the form is submitted.
SOLUTION:
Add a hidden input on your form for the data. Based on your HTML and JavaScript it would be:
<input type="hidden" id="sizes" name="sizes" value="Medium">
Notice that I added a value attribute of Medium just in case the user hits submit on the form without actually pressing on of the size buttons. You could remove this and add code in your JavaScript to check if sizes is empty/ missing.
Next you need to add a click event listener to each button that will call a function when they are clicked. The JavaScript way:
// Way 1 using older JS.
var buttons = document.querySelectorAll('.size-link');
for( var x = 0; x < buttons.length; x++ ){
buttons[x].addEventListener( 'click', recordButtonSize );
}
// Way 2 using newer JS without an arrow function.
var buttons = document.querySelectorAll('.size-link');
buttons.forEach( function( button ) {
button.addEventListener( 'click', recordButtonSize );
} );
Or directly in the HTML add an onclick to each button:
<button class="size-link" value="..." onclick="recordButtonSize">...</button>
Notice that I removed your ID's. You don't really need them regardless of which solution you choose to use, the JavaScript or HTML.
And now we make the recordButtonSize function that will copy the data from the pressed button over to the hidden input:
function recordButtonSize(){
// Get the element that was clicked on.
var elem = event.target || event.srcElemnt;
// Depending on browsers / where the user clicked we may not be on the button.
if( elem.nodeName != 'BUTTON' ){
elem = elem.closest('button');
}
// Now pull the value from the button and place in the hidden input.
document.getElementById('sizes').value = elem.value;
}
NOTES:
I don't know if button elements care allowed to have value attributes so you may need to switch that to a dataset.
This solution gets the size placed into an input on the form but DOES NOT submit the form. That isn't hard to add but I will leave it as an exercise for you to figure out.
This answer uses a mix of older and newer JavaScript which will work fine on any modern browser but IE 11. See here: closest
This mostly works. It shows the SSN when the first Val radio button is picked. It also shows the PaperAppliction when the second Val radio button is picked. The ONLY problem is that the field PaperApplication shows when the form is loaded before any radio buttons are picked. I need it to hide both SSN and PaperApplicaition until one of the radio buttons is picked, and then show the proper field. What am I missing?
Here is the JS
$(".field.SocialSecurity input[type=radio]").on("change", function() {
if (
$(this).val() ==
"As a U.S. Citizen, permanent resident, or temporary working resident, I have a Social Security Number."
) {
$(".field.SSN").show();
$(".field.SSN input").focus();
$(".field.PaperApplication").hide();
} else if (
$(this).val() ==
"Due to my international student status, my residency status, or my specific visa type, I do not have a Social Security Number."
) {
$(".field.PaperApplication").show();
$(".field.PaperApplication input").focus();
$("field.SSN").hide();
} else {
$("field.PaperApplication").hide();
}
});
Here is the form html
US Citizen International Student Other
<div class="field SSN">
<label>SSN</label>
<input />
</div>
<div class="field PaperApplication">
<label>Paper Application</label>
<input />
</div>
You can just set them hidden initially using HTML markup to add a style attribute to the element. style="display:none" should do it.
e.g. <div class="field SSN" style="display:none;"> and the same for the other one.
Hide them both when the script is called, and also outside of the if statements when the change event is fired. Also, make your radio button values a word or two, camelCased. Put the string describing the button in the label tag:
$(".SSN, .PaperApplication").hide();
$(".field.SocialSecurity input[type=radio]").on("change", function() {
$(".SSN, .PaperApplication").hide();
if ($(this).val() == "first") {
$(".field.SSN").show();
$(".field.SSN input").focus();
} else if ($(this).val() == "second") {
$(".field.PaperApplication").show();
$(".field.PaperApplication input").focus();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field SocialSecurity">
<label>
Radio 1 text here
<input type="radio" name="radio" value="first" />
</label><br>
<label>
Radio 2 text here
<input type="radio" name="radio" value="second" />
</label>
</div>
<div class="field SSN">
<label>SSN</label>
<input />
</div>
<div class="field PaperApplication">
<label>Paper Application</label>
<input />
</div>
hide on load, then on click hide both and show the one that was clicked. run below snippet
$("input[name='socialsecurity']").click(() => {
$('.field').hide();
$(`.${$("input[name='socialsecurity']:checked").val()}`).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="socialsecurity" value="SSN"> SSN<br>
<input type="radio" name="socialsecurity" value="PaperApplication"> Paper Application<br>
<div class="field SSN" style = 'display: none;'>
<label>SSN</label>
<input />
</div>
<div class="field PaperApplication" style = 'display: none;'>
<label>Paper Application</label>
<input />
</div>
I have small problem
Here is JSfiddle:
link example
HTML CODE
<body>
<div class="content">
<!-- Multistep Form -->
<div class="main">
<form action="" class="regform" method="get">
<!-- Progress Bar -->
<ul id="progressbar">
<li class="active">01</li>
<li>02</li>
<li>03</li>
<li>04</li>
</ul>
<!-- Fieldsets -->
<fieldset id="first">
<h2>press visa or master to go next question</h2>
<div class="cc-selector">
<input id="visa" type="radio" name="credit-card" value="visa" />
<label class="kuvake visa jump-next-question" for="visa"></label>
<input id="mastercard" type="radio" name="credit-card" value="mastercard" />
<label class="kuvake mastercard jump-next-question"for="mastercard"></label>
</div>
</fieldset>
<fieldset id="second">
<h2>02 press visa jump fourth question but if press mastercard go next question</h2>
<div class="cc-selector">
<input id="visa" type="radio" name="credit-card" value="visa" />
<label class="kuvake visa jump-fourth-question" for="visa"></label>
<input id="mastercard" type="radio" name="credit-card" value="mastercard" />
<label class="kuvake mastercard jump-next-question"for="mastercard"></label>
</div>
</fieldset>
<fieldset id="third">
<h2>03 press visa or master to go next question</h2>
<div class="cc-selector">
<input id="visa1" type="radio" name="credit-card" value="visa1" />
<label class="kuvake visa1 jump-next-question" for="visa1"></label>
<input id="mastercard1" type="radio" name="credit-card" value="mastercard1" />
<label class="kuvake mastercard1 jump-next-question"for="mastercard1"></label>
</div>
<input class="next_btn" name="next" type="button" value="Next">
</fieldset>
<fieldset id="fourth">
<h2>04</h2>
<div class="cc-selector">
<input id="visa2" type="radio" name="visa2" value="visa2" />
<label class="kuvake visa2" for="visa2"></label>
<input id="mastercard2" type="radio" name="master2" value="mastercard2" />
<label class="kuvake mastercard2"for="mastercard2"></label>
</div>
<input class="next_btn" name="next" type="button" value="Next">
</fieldset>
</form>
jQuery code
$(document).ready(function() {
$(".jump-next-question").click(function() { // Function Runs On NEXT Button Click
$(this).closest('fieldset').next().fadeIn('slow');
$(this).closest('fieldset').css({
'display': 'none'
});
// Adding Class Active To Show Steps Forward;
$('.active').next().addClass('active');
});
});
$(document).ready(function() {
$(".jump-fourth-question").click(function() { // Function Runs On NEXT Button Click
$(this).closest('jump-fourth-question').next().fadeIn('slow');
$(this).closest('fieldset').css({
'display': 'none'
});
// Adding Class Active To Show Steps Forward;
$('.active').next().addClass('active');
});
});
I have small demo quiz, and I need to get questions go to next answer and that works ok, but when we are question number two if you answer visa you should jump to the question number fourth and show it but it wont work.
Any help here?
Thanks.
The problem in your code is due to .closest() in click event of class .jump-fourth-question.Since you are searching for closest with same class name it is redirecting to 02 again and you are using display:none for it.So you are not getting any result.
The other problem is you are using document $(document).ready(function(){}); twice.Avoid ding that.
Your Jquery should be:
$(document).ready(function() {
$(".jump-next-question").click(function() { // Function Runs On NEXT Button Click
$(this).closest('fieldset').next().fadeIn('slow');
$(this).closest('fieldset').css({
'display': 'none'
});
// Adding Class Active To Show Steps Forward;
$('.active').next().addClass('active');
});
$(".jump-fourth-question").click(function() { // Function Runs On NEXT Button Click
$(this).closest('fieldset').next().next().fadeIn('slow');
$(this).closest('fieldset').css({
'display': 'none'
});
// Adding Class Active To Show Steps Forward;
$('.active').next().next().addClass('active');
});
});
EDIT:
Yes you can directly use the id #fourth
$(".jump-fourth-question").click(function() {
$('#fourth').fadeIn('slow');
});
The issue is that you use a wrong selector.
You are selecting to show/hide the button instead of the fieldset itself.
here is a working example :
. http://jsbin.com/filaluhiti/edit?css,js,console,output
PS : You only need one occurence of "Document ready"
<form action="" method="post">
<body>
customer type:<input type="radio" name="customer" value="yes" onclick="return check()" checked="checked"/>yes
<input type="radio" name="customer" value="no" onclick="return check2()" />no
<div id="one">
firts name :<input type="text" name="fname" id="fname" required="required"/>
</div>
<div id="two" style="display:none;">
Party Name<input type="text" name="party_name" id="pname" required="required"/>
</div>
<input type="submit" value="save" name="save" />
</body>
</form>
<script type="text/javascript">
function check()
{
document.getElementById("one").style.display="";
document.getElementById("two").style.display="none";
}
function check2()
{
document.getElementById("one").style.display="none";
document.getElementById("two").style.display="";
}
</script>
</head>
<?php
if(isset($_POST["save"]))
{
header("location: hide_show.php");
}
?>
here at the top are two radio buttons ...when i click on "Yes" radio button Div one shows and div two gets hide....when i click on "no" radio button then div two shows up and one hides ...now i have applied validation in both the textboxes so suppose if have choosen yes div one shows up and when i click submit button ...it doesnt get submitted because i have applied validation in div named two....valiadtion is also necessary...but is taking both div's validation at the submit time...plz suggest some way for this
Try style.display="block" rather
function check()
{
document.getElementById("one").style.display="block";
document.getElementById("two").style.display="none";
}
function check2()
{
document.getElementById("one").style.display="none";
document.getElementById("two").style.display="block";
}
I am trying to checkbox when the div.menuitem is clicked and then it should change class and show the content in the div with class of hidediv. When the div.menuitem is again clicked it should remove the class and hide the div again and uncheck the checkbox.
Want I want to do:
Only show the content of the hidediv when the menuitem is pressed. (checkbox should be checked)
When the menuitem is pressed the checkbox should be checked
When the menuitem is clicked again the hidediv should be hidden again. (checkbox unchecked)
And the checkbox should be uncheched
Illustration of my menu form:
<div class="menuitem">
1.Company1
</div>
<div class="hidediv">
1.1 Company 1.1
1.2 Company 1.2
</div>
<div class="menuitem">
1.Company2
</div>
<div class="hidediv">
1.1 Company 2.1
1.2 Company 2.2
</div>
My previous Jquery code, which only is trigger when the checkbox is clicked. I want pretty
similar function to this, the checkbox should also be trigghed when the div is clicked:
$('.menuitem input:checkbox').change(function(){
if($(this).is(':checked')) {
$('div.hidediv').addClass('someclass').show(200); // not needed it there is another way of identifying the div later to add to hidediv class again.
$('div.hidediv').removeClass('hidediv');
} else {
$('div.someclass').addClass('hidediv').hide(200);
}
});
});
My Jquery so far(not working):
$('.menuitem').click(function(e){
$(this).addClass('menuclicked');
$('div.hidediv').addClass('clicked').show(200);
$('div.hidediv').removeClass('hidediv');
} else {
$('div.someclass').addClass('hidediv').hide(200);
}
$('.menuclicked').click(function(e){
$('div.someclass').addClass('hidediv').hide(200);
});
My HTML:
<form accept-charset="UTF-8" action="/" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<div class="menuitem">
<label for="search_company1">company1</label>
<input name="search[company1_is_true]" type="hidden" value="0" /><input id="search_company1_is_true" name="search[company1_is_true]" type="checkbox" value="1" />
</div>
<div class="menuitem">
<label for="search_company3">company3</label>
<input name="search[company3_is_true]" type="hidden" value="0" /><input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" />
</div>
<div class="hidediv">
<div class="menuitem">
<label for="search_company2">company2</label>
<input name="search[company2_is_true]" type="hidden" value="0" /><input id="search_company2_is_true" name="search[company2_is_true]" type="checkbox" value="1" />
<div>
</div>
<input id="search_submit" name="commit" style="display:none;" type="submit" value="Submit" />
</form>
I can help. I think you are structuring this wrong. You have three fields in your html, with the third being hidden. I assume when you fill in the first one you want nothing to happen, but clicking the second one should show the third field?
Try this:
//Use toggle instead of .click()
$('.menuitem').toggle(function(){
$('div.hidediv').addClass('clicked').show(200);
}, function(){
$('div.hidediv').removeClass('clicked').hide(200);
});
This will effect all divs with the "menuitem" class, meaning when you click on any of the three it will toggle showing/hiding the div with the "hidediv" class.
edit you have a couple valid answers here, but I think you're approaching this wrong. If you go try the jsfiddle posted by another user, whos' javascript does the same as mine - it reveals the problem I talked about above. You cannot select all three boxes without some clever clicking. Each click will toggle showing/hiding the third check box. Might I suggest modifying your code like so:
//Use toggle instead of .click()
$('.toggleMenuItem').toggle(function(){
$('div.hidediv').addClass('clicked').show(200);
}, function(){
$('div.hidediv').removeClass('clicked').hide(200);
});
<form accept-charset="UTF-8" action="/" method="get">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
</div>
<div class="menuitem">
<label for="search_company1">company1</label>
<input name="search[company1_is_true]" type="hidden" value="0" />
<input id="search_company1_is_true" name="search[company1_is_true]" type="checkbox" value="1" />
</div>
<div class="menuitem toggleMenuItem">
<label for="search_company3">company3</label>
<input name="search[company3_is_true]" type="hidden" value="0" />
<input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" />
</div>
<div class="hidediv">
<div class="menuitem">
<label for="search_company2">company2</label>
<input name="search[company2_is_true]" type="hidden" value="0" />
<input id="search_company2_is_true" name="search[company2_is_true]" type="checkbox" value="1" />
<div>
</div>
<input id="search_submit" name="commit" style="display:none;" type="submit" value="Submit" />
</form>
This will make it so only clicking the checkboxes with the class ".toggleMenuItem" will show the third checkbox.
try something like this:
$('.menuitem').click(function(e){
if($(this).hasClass('menuClicked')){
// Already clicked
$(this)
.removeClass('menuclicked')
.html("");
}else{
// First click
$(this)
.addClass('menuclicked');
.html($('#hidediv').html());
}
})
This may do what you're looking for:
$('.menuitem').click(function(e){
$(this).toggleClass('clicked');
$('div.hidediv').toggle(200);
});
Let me know if it is missing a feature.
http://jsfiddle.net/citizenconn/2bCdR/