I got a button called Rework, when i click the button two checkboxes has to be appeared and Rework button should be disappeared and in place a submit button has to be appeared . How will i move on with this concept.?
You can do this like this: http://codepen.io/anon/pen/pjrwLe
**HTML**
<input type="button" id="rework-button" value="Rework" onclick="rework()"/>
<div id="checkboxes">
Check A: <input type="checkbox" />
Check B: <input type="checkbox" id="check-a" />
</div>
<input type="submit" id="submit-button" value="Submit"/>
**CSS**
#checkboxes,
#submit-button{
display:none;
}
**JAVASCRIPT**
function rework(){
document.getElementById("checkboxes").style.display = "block"
document.getElementById("submit-button").style.display = "block"
document.getElementById("rework-button").style.display = "none"
}
You can try something like this, when Rework is clicked, if it is not displayed as none, and show the checkboxes and submit button.
function reworkClick() {
if (document.getElementById("Rework").style.display != "none"){
document.getElementById("Rework").style.display = "none";
document.getElementById("Submit").style.display = "block";
document.getElementById("checkboxContainer").style.display = "block";
}
}
understand this and edit as you want:
<div class='checkbx' style="display:none;">
<!--here goes your checkboxes-->
</div>
<input type='button' class'button1'/>
<input type='submit' class'button2'/>
<script>
$('.button1').click(function(){
$('.checkbx').show();
$('.button2').show();
$('.button1').hide();
});
</script>
This is jquery ..Learn Jquery Ok. code less Do more
Note: just dont forget to include jquery files... read about jquery
try this
<div class="input_box">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car<br>
<input type="submit" value="Submit">
</div>
<div class="button">
<input type="button" class="Rework" value="Rework">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.input_box').hide();
$('.Rework').click(function(){
$('.button').hide();
$('.input_box').show();
});
});
</script>
Hope this helps!
Related
I want to hide the an entire field represented by a div id. I tried doing it, but it doesnt work. I could get it working when i used dropdown list and select. Here is my code:
HTML:
<div class="form-group">
<p>
<input type="radio" class="flat" name="botsign" id="signature" value="show" checked="checked"/>
Show Signature
<br><br>
<input type="radio" class="flat" name="botsign" id="signature" value="hide" />
Hide Signature
</p>
</div>
JS:
<script>
$("input[name='botsign']").change(function () {
if ($(this).val() == 'show') {
$("#Sigbox").show();
} else {
$("#Sigbox").hide();
}
});
</script>
CSS:
#Sigbox{
display:none;
}
Try Like This
<div class="form-group">
<p>
<input type="radio" class="flat" name="botsign" value="show" checked="checked"/> Show Signature<br><br>
<input type="radio" class="flat" name="botsign" value="hide" /> Hide Signature
</p>
</div>
<script>
jQuery(document).ready(function($){
$("input[name='botsign']").click(function() {
if ($(this).val() == 'show') {
$("#Sigbox").show();
} else {
$("#Sigbox").hide();
}
});
});
</script>
Thank you for helping me out. The code I posted does work fine, but there where some Javascript conflicts as I was using around 6 of them. I tried the above answers and even that didnt work, then I saw #AdriánDaraš comment and I cross checked with all the other Javascripts. And now its working fine as I removed the Javascript I was using to make the radio buttons look good.
Thanks a lot everyone.
Added the jquery cdn and a div box with an id to test the hide function. Then i used jQuery() that it's the normal way to call jquery.
The change function listen on both input and check the value of the input to know if must hide or show the box.
Here your solution:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="form-group">
<p>
<input type="radio"
class="flat"
name="botsign"
id="signature"
value="show"
checked="checked"/>
Show Signature
<br><br>
<input type="radio"
class="flat"
name="botsign"
id="signature"
value="hide" />
Hide Signature
</p>
</div>
<div id="Sigbox">
hello i'm your sign box
</div>
<script>
jQuery("input[name='botsign']").change(function () {
if (jQuery(this).val() == 'show') {
jQuery("#Sigbox").show();
} else {
jQuery("#Sigbox").hide();
}
});
</script>
</body>
</html>
I am trying to use a checkbox to clear a form but I do not want the reset to clear the checkbox itself. The code I am using is as follows:
<input name="no_cage" id="no_cage" type="checkbox" value="1" onclick="this.form.reset();">
When I click on the checkbox it clears the form fine but unfortunately, also clear itself too.
The checkbox also updates a db with a 1 if checked or a 0 if unchecked. So I need it within the form and it needs to be able to toggle between checked and unchecked.
There are two ways to do this:
Create a javascript function to reset the form and then check the checkbox again to true.
Using JQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('change', '#no_cage', function() {
if(this.checked) {
document.getElementById("client").reset();
this.checked = true;
}
});
</script>
<form id="client">
<input type="text">
<input id="no_cage" type="checkbox" value="1"> CLEAR
</form>
Using Javascript:
<script type="text/javascript">
function clearform(){
if (document.getElementById("no_cage").checked == true){
document.getElementById("client").reset();
document.getElementById("no_cage").checked = true;
}
}
</script>
<form id="client">
<input type="text">
<input id="no_cage" type="checkbox" onclick="javascript:clearform();"> CLEAR
</form>
OR,
keep the checkbox out of the form
<script type="text/javascript">
function clearform(){
document.getElementById("client").reset();
}
</script>
<form id="client">
<input type="text">
</form>
<input id="no_cage" type="checkbox" value="1" onclick="javascript:clearform();"> CLEAR
I don't know if you want it this way, but I change the code that if checkbox is checked than clear form else it won't. Here the code
<form id ="myForm" name = "test">
<input type ="text"/>
<input type ="text"/>
<input type ="text"/>
<input type ="text"/>
</form>
<input name="no_cage" id="no_cage" type="checkbox" onclick="resetForm()">
<script type="text/javascript">
function resetForm()
{
if (document.getElementById("no_cage").checked == true)
{
document.getElementById("myForm").reset();
}
}
</script>
<form id="myForm">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="checkbox" id="box"onclick="myFunction()" value="Reset form">reset
</form>
<script>
function myFunction() {
document.getElementById("myForm").reset();
document.getElementById("box").checked = true;
}</script>
hope it helps
I have 3 input type radio:
<input type="radio" name="status">Semi-Finalist
<input type="radio" id="finalist" name="status">Finalist
<input type="radio" name="status">Reject
<input type="button" data-toggle="modal" data-target="#myModal" value="Submit">
When the user select Finalist the Modal (pop up window) show appear and ask additional questions, but If Semi-finalist or Reject is checked, submit the form when the "Submit" button is clicked. This is why I can't use type="submit"
Thank you...
UPDATE:
here is the js that show the modal
//finalist Modal
$(document).ready(function(){
$(".submitButton").click(function(){
if($('#finalist').is(':checked')) {
$("#myModalFinalist").modal('show');
}
});
});
Use type="submit".
When writing the JavaScript event handler to decide if you need to show additional questions or not, conditionally call event.preventDefault() to stop the form submission.
$("form [type='submit']").on('click', show_additional);
function show_additional(event) {
if ($("[value=finalist]:checked").length) {
event.preventDefault();
alert("Also show additional fields now");
} else {
alert("Just submit normally");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>
<input type="radio" name="status" value="semi">Semi-Finalist</label>
<label>
<input type="radio" name="status" value="finalist">Finalist</label>
<label>
<input type="radio" name="status" value="reject">Reject</label>
<input type="submit" value="Submit">
</form>
NB: The form won't actually submit in this demo because of Stackoverflow's sandboxing.
This is what i used: Thanks to #Quentin I could figure it out!
<input type="radio" name="status">Semi-Finalist
<input type="radio" id="finalist" name="status">Finalist
<input type="radio" name="status">Reject
<input type="button" data-toggle="modal" data-target="#myModal" value="Submit">
$(document).ready(function(){
$(".submitButton").click(function(event){
if($('#finalist').is(':checked')) {
event.preventDefault();
$("#myModalFinalist").modal('show');
}
});
});
Below is my snippets, what i want is hide only the button that has class of "save" and the button that has a class of "cancel" if both checkbox is not checked, any ideas, help, suggestions, recommendations?
$(document).ready(function(){
$("input[type='checkbox']").change(function(){
if($(this).is(":checked")){
$(".save").show();
$(".edit").hide();
$(".cancel").show();
}else{
$(".save").hide();
$(".edit").show();
$(".cancel").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="edit">edit</button>
<button class="save">save</button>
<button class="cancel">cancel</button>
<input type="checkbox" named="test1" />
<input type="checkbox" named="test2" />
You can try
$(document).ready(function() {
var $checks = $("input[type='checkbox']").change(function() {
var checked = $checks.is(':checked');
$(".save, .cancel").toggle(checked);
$(".edit").toggle(!checked);
});
$checks.first().change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="edit">edit</button>
<button class="save">save</button>
<button class="cancel">cancel</button>
<input type="checkbox" named="test1" />
<input type="checkbox" named="test2" />
Hello and thanks in advance for any help
In my store page, I have a checkbox that is checked when user agrees with the terms. When he checks the checkbox, submit button is disabled (false). My problem is that this solution doesn't work on iPhone and other mobile devices.
Here's the code:
function terms() {
if (document.getElementById("cbTerms").checked)
document.getElementById("submit").disabled = false;
else
document.getElementById("submit").disabled = true;
}
function cbc() {
if (document.getElementById("cbc").checked)
document.getElementById("cbc") = ("הריני מאשר קבלת מבצעים והטבות אל הדואר האלקטרוני מפראיה");
else
document.getElementById("cbc").value = ".";
}
<input class="btn btn-toranj alt" name="submit" type="submit" id="submit" value="לרכישה" disabled="true">
<br>
<br>
<input type="checkbox-0" id="cbTerms" name="cbTerms" onclick="terms();" style="width:15px; height:15px;">
<p style="margin-bottom:0px; font-size:14px; display: -webkit-inline-box;">הריני מאשר כי קראתי את התקנון
</p>
<br>
<input type="checkbox" id="cbc" name="os3" oninput="cbc()" style="width:15px; height:15px;">
<p style="margin-bottom:0px; font-size:14px; display: -webkit-inline-box;">הריני מאשר קבלת מבצעים והטבות אל דואר האלקטרוני</p>
<input type="hidden" value="הטבות ומבצעים" id="on3" name="on3">
At first sight your first checkbox is not really a checkbox.
<input type="checkbox-0" ...> should be more like: <input type="checkbox" ...>
With this change it will work.
P.S.:
Consider using braces for your if() {} else {} statements as you will propably run into some logic error if you change something in the future (e.g. add a line of code) and forget to add them.
The change event is preferred over click. And in addition, you'd pass the currently clicked checkbox on the fly as following
<input class="btn btn-toranj alt" name="submit" type="submit" id="submit" value="לרכישה" disabled="true">
<br><br>
<input type="checkbox" id="cbTerms" name="cbTerms" onchange="terms(this);" style="...">
<p style="...">הריני מאשר כי קראתי את
התקנון
</p>
<br>
<input type="checkbox" id="cbc" name="os3" onchange="cbc(this)" style="...">
<p style="...">הריני מאשר קבלת מבצעים והטבות אל דואר האלקטרוני</p>
<input type="hidden" value="הטבות ומבצעים" id="on3" name="on3">
<script type="text/javascript">
function terms(me)
{
document.getElementById("submit").disabled = !me.checked;
}
function cbc(me){
var val=document.getElementById("cbc").checked?
"הריני מאשר קבלת מבצעים והטבות אל הדואר האלקטרוני מפראיה":".";
document.getElementById("cbc").value = val;
}
</script>