I have a form and a checkbox. By click on the checkbox, a div within some other divs will show up or hide. This works! But, if i visit my page with an id like xxxxx.php?id=10, the checkbox is checked but the divs are hide. if i click on the checkbox, the divs will show up, but the checkbox is unchecked (bad for e.g. mysql updates).. hope anyone can help me by this issue..
Here my code:
$(document).ready(function() {
$('#Show').hide();
$("input[name=mycheckbox]").click(function () {
$('#Show').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<div class="form-group">
<div class="form-group">
<div class="checkbox-inline">
<label>
<input type="checkbox" name="mycheckbox" id="mycheckbox" value="yes"> my option
</label>
</div>
</div>
</div>
<div id="Show">
<div class="form-group">
<label for="textinput" class="control-label">Company </label>
<div class="">
<input type="text" class="form-control" name="name" id="name" placeholder="" value="">
</div>
</div>
</div>
</form>
My input field have this code (php doesn't work in the snippet):
<input type="checkbox" name="mycheckbox" id="mycheckbox" value="yes" <?php if (isset($_GET['id'])) {echo $row->mycheckbox == "yes" ? 'checked="checked"' : "";}?>
thanks for your help!
I would recommend to use change event, trigger using .trigger('change') on page load so that the div in sync with the state of checkbox element.
Also you should .toggle(display)
$("input[name=mycheckbox]").change(function () {
$('#Show').toggle(this.checked);
}).trigger('change');
Related
I develop an app using codigniter. In view, I have a form like this :
<div class="box-content">
<?php
$properties = array('class' => 'form-horizontal', 'id' => 'myForm');
echo form_open("control_request/userRequest", $properties);
?>
<fieldset>
<div class="control-group">
<label class="control-label">Jenis Request :</label>
<div class="controls" id="chekboxes">
<label class="checkbox inline"><input type="checkbox" name="request[]" id="Login" value="Login" > Login </label>
<label class="checkbox inline"><input type="checkbox" name="request[]" id="Printer" value="Printer"> Printer </label>
<label class="checkbox inline"><input type="checkbox" name="request[]" id="Monitor" value="Monitor"> Monitor</label>
<label class="checkbox inline"><input type="checkbox" name="request[]" id="Computer" value="Computer"> Computer</label>
<label class="checkbox inline"><input type="checkbox" name="request[]" id="Network" value="Network"> Network</label>
<label class="checkbox inline"><input type="checkbox" name="request[]" id="Lain-lain" value="Lain-lain" > Lain-lain</label>
</div>
</div>
<div class="control-group hidden-phone">
<label class="control-label" for="Complaint" Complaint : </label>
<div class="controls">
<textarea class="cleditor" name="Complaint" id="Complaint" rows="3"></textarea>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" id="submit" >Submit</button>
<button type="reset" class="btn">Cancel</button>
</div>
</fieldset>
<?php echo form_close(); ?>
Now, I create some javascript using jquery to validate, if the checkbox and textarea was qualify before submit. Here is the logic of jquery :
<script>
$(document).ready(function() {
$("#submit").click(function(e){
if (chekbox not selected at least one ) {
<p> Please choose at least one </p>
}
if textbox is empty {
<p> Pleaser fill the textbox </p>
}
if (all qualified)
submit
});
</script>
I just wanna check all of the element is qualified before submitting. But if not qualified, there will be a error message like this
()Checkbox1 ()Checkbox2 ()Checkbox3 ()Checkbox 4 <p>Please select one</p>
<textarea></textarea> <p>Please describe your complaint</p>
I am using jquery 1.9.1 , I will keep learn, and for the help thank you so much..
JSFIDDLE
Your question is not clear ..but it may help you what do you need
$("textarea:empty").length == 0 // text area empty
$(".checkbox [type=checkbox]:checked").length >= 1 // at least one is selected
If you need to make the textarea mandatory, use requierd
attribute. The jQuery validate plugin that you have used will do the
rest of the trick for validation.
For checking if at least one of the checkboxes is selected, you can
add one rule for checkboxes:
rules: {
'request[]': {
required: true,
minlength:2
}
},
OR
You can add a custom rule:
$.validator.addMethod("request[]", function(value, elem, param) {
if($(".request[]:checked").length > 0){
return true;
}else {
return false;
}
},"You must select at least one checkbox to continue");
Lets say i have a form that asks for name and exam result. Id like to make the form disappear and display another div when the user hits submit.
heres the form code
<form action="exam.php" method="post" id = "coursedata" class="form-horizontal">
<fieldset>
<legend>Please Complete the Details</legend>
<div class ="form-group">
<label for="name" class="control-label col-xs-2">Student name</label>
<div class="col-xs-6">
<input type="text" name="name" id="name" size="20" class="form-control" autofocus required pattern = "[A-Z][a-z]+( [A-Z][a-z]+)?" title="Please enter a name (Surname optional) with First Letter capitalised">
</div></div>
<div class ="form-group">
<label for="CA1" class="control-label col-xs-2">Assessment One</label>
<div class="col-xs-6">
<input type="number" class="form-control" min = "0" max = "100"name="CA1" id="CA1" size="3" maxlength ="3" onkey ="limit(this);" onkeyup="limit(this);" required>
</div></div>
<div class="buttonarea">
<input type="submit" value="Submit" name = "Submit">
<input type="reset" value="Clear the Info">
</div>
</fieldset>
</form>
The shortest way (asuming that form and exam.php are the same files...):
<?php
if (!isset($_POST['Submit'])) {
?>
Your form code
<?php
}
else {
// form engine
echo "<div>SUCCESS</div>";
}
?>
Hope it helps :). PS. This is a strict answer to Your question, whether there are many other questions, like how to handle form, how to verify it, etc. But this is another side of answered coin ;). Best regards :).
Use jQuery for this (JavaScript library).
Copy this in your head section
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button[type="submit"]').click(function(){
$("#coursedata").hide();
return false;
})
})
</script>
I want to change the label text based on the selection of the radio button. Could you please help me to do it easily. Here is my code.
<div class="control-group ">
<div class="controls">
<label class="radio inline">
<input type="radio" name="btype[]" id="private" value="private" checked>Private
</label>
<label class="radio inline">
<input type="radio" name="btype[]" id="business" value="business">Business Advertiser
</label>
</div>
</div>
This is the label that i want to change the text
<div class="control-group " >
<label class="control-label" id="labelName">Name</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input type="text" class="input-xlarge" id="name" name="name" placeholder="">
</div>
</div>
</div>
<div class="control-group ">
<label class="control-label" id="labelNum">NIC</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input type="text" class="input-xlarge" id="regNum" name="regNum" placeholder="">
</div>
</div>
</div>
This is my javascript
<script type="text/javascript">
$(document).ready(function()
{
if (($('input[name=btype]:radio:checked').val())=="business")
{
document.getElementById("labelName").innerHTML="Company Name";
document.getElementById("labelNum").innerHTML="Reg No.";
}
}
);
</script>
I rewrote the code for you in a better way. When you have jQuery use it to the best. Don't get messed up by handling JavaScript. jQuery is there to do it for you.
<script type="text/javascript">
$(document).ready(function()
{
if ($('#business').is(':checked'))
{
$('#labelName').text("Company Name");
$('#labelNum').text("Reg No.");
}
}
);
</script>
youre mixing jquery in with your js, so heres jquery
<script type="text/javascript">
$(document).ready(function(){
$('input[name=btype]:radio:checked').click(function(e){
if($(e.currentTarget).val()==='business') {
$("#labelName").text("Company Name");
$("#labelNum").text("Reg No.");
}
});
});
</script>
JsFiddle
onclick="document.getElementById('labelName').innerHTML='NEWLABELNAME'"
You can achieve this by adding a change listener to that inputs and getting the value of the selected one
I have added some HTML5 attributes to avoid getting more DOM
please look at data-text
<div class="control-group ">
<div class="controls">
<label class="radio inline">
<input type="radio" data-text="private" name="btype[]" id="private" value="private" checked>Private
</label>
<label class="radio inline">
<input type="radio" data-text="Business Advertiser" name="btype[]" id="business" value="business">Business Advertiser
</label>
</div>
</div>
Here is your JS and its jQuery
$(document).ready(function(){
$('input[name="btype[]"]').change(function(){
alert($(this).data('text'));
});
});
You can add more than data-* attributes like price or whatever you want and getting the value of it by using $(this).data('*');
It's used like this to make your HTML valid and I used it to avoid getting parent text
Check this fiddle http://jsfiddle.net/gK6bU/1/
I hope this can help :)
I want to show different information based on radio buttons using jQuery.
When I select any payment processor then I want to show related payment method information on the right side.
So, when I select any button then show the information related to that payment processor, and at the same time hide information related to the other payment processors.
This is my HTML Form:
<form class="form-horizontal" action="<?php base_url(); ?>confirm_order" method="post">
<fieldset>
<div class="span4">
<!-- Left Side -->
<input type="radio" checked="checked" name="paypal">Paypal<br/>
<input type="radio" name="cart">Visa, Master Card, etc<br/>
<input type="radio" name="cash_on_delevary">Cash on Delivery
<!-- End Left Side -->
</div>
<div class="span4">
<!-- Right Side -->
<div class="control-group" id="paypal">
<label class="control-label" >Paypal Payment</label>
</div>
<div class="control-group" id="Cart">
<label class="control-label" >Cart</label>
</div>
<div class="control-group" id="cash_on_delevary">
<label class="control-label" >Cash on Delevary</label>
</div>
<!-- end Right Side -->
</div>
<input type="submit" name="Continue" class="btn btn-orange pull-right">
</fieldset>
</form>
What can I do?
This will work:
$("input[type='radio']").change(function() {
$(".control-group").hide();
$("#" + this.name).show();
});
If you want radiobutton to work, you need to assign them the same name, else when you select 1, the others wont deselect.
What you should do is to assign a data on element to know wich section they show :
<input type="radio" data-for='paypal' checked="checked" name="payment">Paypal<br/>
<input type="radio" data-for='Cart' name="payment">Visa, Master etc<br/>
<input type="radio" data-for='cash_on_delevary' name="payment">Cash on Delevary
And then You bind the change event :
$("input[name=payment]").change(function() {
$(".control-group").hide();
$("#" + $(this).data("for")).show();
});
But to hide every section at start, you need to add this :
$(".control-group").hide();
$("input[name=payment]:checked").trigger('change')
Here's a fiddle : http://jsfiddle.net/a9Fvn/
i do have multiple text boxes called first name,last name,phone no and so on.. and i want to clear/refresh the input typed in it on button click called as refresh or clear.the problem is that the input in these text boxes are not getting refreshed because the data in it is coming from other page and it is getting refreshed when we type some thing in it
my code is as follows:
<div class="control-group">
<input value="<?php echo $model['pros']['oppid'] ?>" name="oppid" type="hidden" id="prospectid" />
<label class="control-label">First Name </label>
<div class="controls">
<input type="text" name="f_name" pattern="[-a-zA-Z]+" required="" title="First Name is required" value="<?php echo $model['pros']["f_name"]; ?>" />
</div>
</div>
<div class="control-group">
<label class="control-label">Last Name </label>
<div class="controls">
<input type="text" name="l_name" pattern="[-a-zA-Z]+" required="" title="Last Name is required" value="<?php echo $model['pros']["l_name"];?>" />
</div>
</div>
<div class="control-group">
<label class="control-label">Primary phone </label>
<div class="controls">
<input type="tel" required="" pattern="[-0-9]+" title="Please Enter correct phone" name="pri_phone" value="<?php echo $model['pros']["pri_phone"];?>" />
</div>
</div>
and the button as
<button class="btn">New</button>
please suggest me on this...
use the following code:
$("#elementid").live('click',function(){
$(this).parents('form').find('input[type="text"]').val('');
});
Assuming that your input elements are inside of a form, and so too is your button, you can do this using jQuery:
$('button.btn').click(function(e) {
e.preventDefault();
$(this).parents('form').find('input[type="text"], input[type="tel"]').val('');
});
you can write code in jquery as:
$('#new').live('click',function(){
$('#fname').val('');
$('#lname').val('');
$('#tel').val('');
});
If your button is not within the form you can use the following
$('button.btn').click(function() {
$('.control-group input:not(:submit)').val('');
});
This will reset any type of input within the control-group divs except for submit inputs
If your reset button is within the form then BenM's answer is what you want.
$(".clearform").live('click',function(){
$(this).parents('form').find('input[type="text"], input[type="tel"],input[type="time"],input[type="email"],input[type="number"],input[type="date"],select').val('');
});