this is my test form,in this form i want to apply change function and keyup functions,but it doesnt work
<form>
<div id="main" class="group1">
<div>
<label>Choose group</label>
<select name="group " id="sktest">
<option value="group1">Group 1</option>
<option value="group2">Group 2</option>
<option value="group3">Group 3</option>
</select>
</div>
<div class="group1_opts">
<label>G1 option </label><input id="sk" type="text" name="opt1">
</div>
<div class="group1_opts group2_opts">
<label>G1/G2 option</label><input id="sk" type="text" name="opt2">
</div>
<div class="group2_opts group3_opts">
<label>G2/G3 option</label><input id="sk" type="text" name="opt3">
</div>
<div class="group3_opts">
<label>G3 option</label><input id="sk"type="text" name="opt4">
</div>
</div>
</form>
</div>
<?php get_footer(); ?>
<script
src="http://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
$("#sktest").change(function(){
alert('ok');
});
$("#sk").keyup(function(){
alert('ok');
});
</script>
i am trying to alert messages but it doesent work .please help me/...
First of all Id should be unique. So in case you needed to bind same function with multiple elements, use class then.
Second, put your js function inside $(document).ready
I checked when putting your function in $(document).ready() plus if you have mutliple ids it will fire only for the first element.
It has nothing to do with wordpress
$(document).ready(function(e)
{
alert('jQuery loaded');
$("#sktest").change(function(){
alert('ok');
});
$("#sk").keyup(function(){
alert('ok');
});
})
Hi #Pankaj Waghmare user JQuery instead of $.
Example : JQuery(document).ready();.
Hope this helps u.
Related
In my ClientController#index, I have a form with a select input to list every client in the database.
After submitting the form to list detailed client information, the URL is like /clients?client_id=id.
The routes are the defult with route::resource().
<form name="show_client" id="show_client">
<div class="form-group">
<label for="branch"><b>Selectione o Cliente</b></label>
<select class="form-control select2" name="client_id" id="client_id" required>
<option value="">Selecione o Cliente</option>
#foreach ($list as $client)
<option value="{{ $client->client_id }}">{{ $client->name }} </option>
#endforeach
</select>
</div>
<hr />
<div class="form-group">
<button type="submit" class="btn btn-primary btn-rounded">Listar Cliente</button>
</div>
</form>
<script>
$(function() {
$('#show_client').submit(function(){
var client_id = $('#client_id').val();
$(this).attr('action', "/clients/" + client_id);
});
});
</script>
Is there any way to work the url to be /clients/id?
I accomplish that by using an js function but it's clearly not the solution.
You should listen to the change event on the select list:
<script>
$(function() {
$('#client_id').change(function(){
var client_id = $(this).val();
$('#show_client').attr('action', "/clients/" + client_id);
});
});
</script>
You do know you can make the parameter in the route optional. That way, it can accept the route without a parameter. You then append the parameter on submit of the form
hello i want to display data of business3's data according to business2's and business2's data according to business1's dropdown list but on change() of business1 i got data in response but I didn't get second on change() in dropdown list.
<!-- ajax code for first business starts here -->
<script>
$(document).on('change', 'select.Business1', function(){
var business1 = $('select.Business1 option:selected').val();
alert(business1);
var value = $(this).val();
$.ajax({
type:"POST",
data: { business1:business1 },
url: '<?php echo site_url('client_area/select_business_sub_cat'); ?>',
success : function (data){
$('#business2').empty();
$('#business2').append(data);
}
});
});
</script>
<!-- ajax code for first business ends here -->
// This script is not working. i can't find second change event.
<!-- ajax code for second business starts here -->
<script>
$(document).on('change','#business2',function(){
alert('Change Happened');
});
</script>
<!-- ajax code for second business ends here -->
I have tried with live() method also so alert called on first dropdown selection and then the ajax request calls so second drop down fills (Alternate for second script) ,
<script>
$(document).live('change', '#business2', function() {
alert('Change Happened');
});
</script>
Model function
public function select_business_sub_cat()
{
$business1 = $this->input->post('business1');
$result_sub_cat1 = $this->db->query("select category.id,subcategory.* From category LEFT JOIN subcategory ON category.id = subcategory.category_id where category.id = '$business1'");
$row_cat1 = $result_sub_cat1->result();
$data = array(
'id' => $row_cat1['0']->id,
'name' => $row_cat1['0']->name
);
echo "<option value='" . $row_cat1['0']->id . "'>" . $row_cat1['0']->name . "</option>";
// return $this->output->set_output($data);
}
View --
<div class="form-group">
<label>Business 1</label>
<select name="txtBusiness1" id="" style="height: 30px;width: 100%;" class="Business1">
<option value=""> Select Business </option>
<?php
$result_cat1 = $this->db->query("select * from category");
$row_cat1 = $result_cat1->result();
?>
<?php foreach($row_cat1 as $item){ ?>
<option value="<?php echo $item->id; ?>"><?php echo $item->name; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label>Business 2</label>
<select name="txtBusiness2" id="business2" style="height: 30px;width: 100%;" class="Business2">
<option value=""> Select Business2 </option>
</select>
</div>
<div class="form-group">
<label>Business 3</label>
<select name="txtBusiness4" id="business3" style="height: 30px;width: 100%;" class="Business3">
<option value=""> Select Business3 </option>
<?php echo $abc; ?>
</select>
</div>
Maybe that's because by calling $('#business2').html(data); you remove the event handlers, from jQuery documentation: http://api.jquery.com/html
When .html() is used to set an element's content, any content that was
in that element is completely replaced by the new content.
Additionally, jQuery removes other constructs such as data and event
handlers from child elements before replacing those elements with the
new content.
One option would be to use empty and append like this
$('#business2').empty();
$('#business2').append(data);
instead of $('#business2').html(data);
The Script which is not working for you !!!
<script>
$(document.body).on('change','#business2',function(){
alert('Change Happened');
});
</script>
Try this in place of the above script :
$(document).on("change", "#business2", function(){
alert('Change Happened');
});
I have a form which is submitted on option change. It is connected to the database. So everytime I submit the form, the page reloads and the value is selected (the value is now saved as "car" in the database).
<form class="cars" id="carSelect" name="car" action="index.php" method="get">
<select onchange='this.form.submit()'>
<option <?php if ($row['car'] == Volvo ) echo 'selected'; ?> value="volvo">Volvo</option>
<option <?php if ($row['car'] == Saab ) echo 'selected'; ?> value="saab">Saab</option>
<option <?php if ($row['car'] == Opel ) echo 'selected'; ?> value="opel">Opel</option>
<option <?php if ($row['car'] == Audi ) echo 'selected'; ?> value="audi">Audi</option>
</select>
</form>
when the form is submitted and the selected option is Volvo, a modal (I am using the bootstrap modal) should appear. This is the bootstrap modal code, which opens the modal when I click on the "openBtn" Button.
Volvo
<div id="modal-content" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Volvo</h3>
</div>
<div class="modal-body">
<p>
<input type="text" id="txtname" />
</p>
</div>
<div class="modal-footer">
cancel
save
</div>
</div>
</div>
</div>
The bootstrap modal script for opening the modal with a button:
$('#openBtn').click(function () {
$('#modal-content').modal({
show: true
});
});
So here is my approach:
$(window).load(function(){
if($(.cars option:Volvo).is(':selected')){
$('#modal-content').modal({
show: true
});
}
});
But my code is not working. The other problem is, the modal should only appear if I selected "Volvo". Not everytime the page is loaded. But I do not know how I can detect that the form was submitted before the page is loaded.
When you want the selected option you have to take it from the select DOM element. So you would start with giving it an ID.
<select onchange='this.form.submit()' id="carSelect">
Then you can get the currently selected value and use it as condition.
$(window).load(function(){
var value = $( "#carSelect option:selected").val();
if(value == 'volvo'){
$('#modal-content').modal({
show: true
});
}
});
I have the correct solution that you have been waiting for.
Please look at this code :
function myFunction() {
var option_value = document.getElementById("numbers").value;
if (option_value == "3") {
alert("Hai !");
}
}
<!DOCTYPE html>
<html>
<head>
<script>
// Add the above javascript code here !
</script>
</head>
<body>
<select id = "numbers" onchange = "myFunction()">
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">Click me !</option>
</select>
</body>
</html>
First, you can check the selected value in select option. Select adds the :selected property to the selected option which is a child of the dropdown.
$(document).ready(function(){
$("#select").on('change', function(){
if($(this).find(":selected").val()=='xyz'){
//alert($(this).find(":selected").val());
$('#modal-content').modal({
show: true
});
}
});
});
I know this question is very old, but for those who may find it like I did, I wanted to share a small adaptation I did, so if I have one modal per select option, I don't need to check every and each of the possibilities:
$(document).ready(function(){
$("#myModalSelector").on('change', function(){
var selected = $(this).find(":selected").val();
$('#' + selected ).modal({
show: true
});
});
});
Try this:
<select onchange='funMyModel(this.value)'>
function funMyModel(val)
{
if(val=="Volvo"){
$('#modal-content').modal({
show: true
});
}
}
I have a dropdown which contains data retrieved from a table. There is another dropdown which has some dynamic options. It means when a user selects a one option from the first dropdown. Only the matching options will be loaded into second dropdown from the same table. Everything works as I expected and the ouput is printed in the console properly (developers' tool).
But ajax response is not inserted into the second dropdown.
I went through similar questions in this forum, but nothing could help me to make it work.
I did these changes too
Changed dataType in Ajax to html.
Used append instead of html.
Even though I did above changes second dropdown is still empty. Surprisingly correct input is printed in the console.
What is printed in the console
<option value='10046'>ABC</option><option value='10048'>Nuwan</option>
When I inspect the console carefully I could see something like this
"" create_loan_request:169
Line 169 is console.log(html)
Below is my code and I am really grateful anyone to who could help me to find where the bug is.
First drop down
<div class="formBlock">
<label for="branch_id">Branch Name<span class="required">*</span></label>
<select id="branch_id" name="branch_id" class="textInput">
<?php
$branches = $branch->find_by_sql("SELECT * FROM branch");//this is an arry
foreach ($branches as $branch) {
echo "<option value='$branch->id'>$branch->branch_name</option> ";
}
?>
</select>
</div>
Second dropdown (will change dynamically)
<div class="formBlock">
<label for="cust_id">Customer Name <span class="required">*</span></label>
<select id="cust_id" ></select>
</div>
Script
$(function(){
$("#branch_id").bind("change",function(){
$.ajax({
type:"GET",
url:"create_loan_request.php", //same file
data:"branch_id="+$("#branch_id").val(),
dataType:"text", //changed this to html also
success:function(html){
$("#cust_id").html(html); // I have tried append also
console.log(html);
//inserting options to second dropdown
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
});
PHP code
<?php
//php code to populate customer dropdown based on branch
if(isset($_GET["branch_id"])){
$id=(int)$_GET["branch_id"];
$customers= Customer::find_by_sql("SELECT id,firstname,lastname FROM customer WHERE branch_id=".$id);
foreach ($customers as $customer) {
echo "<option value='$customer->id'>".$customer->firstname."</option>";
}
}
?>
P:S The whole html file is displayed as shown below
Try putting your jquery code in
$(document).ready(function(){
});
I check your code, without its database codes and it worked for me. I put my code here.
Test.php :
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#branch_id").bind("change",function(){
$.ajax({
type:"GET",
url:"server.php",
data:"branch_id="+$("#branch_id").val(),
dataType:"text",
success:function(html){
$("#cust_id").html(html);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
});
});
</script>
<div class="formBlock">
<label for="branch_id">Branch Name<span class="required">*</span></label>
<select id="branch_id" name="branch_id" class="textInput">
<option value='1'>a1</option>
<option value='2'>a2</option>
<option value='3'>a3</option>
</select>
</div>
<div class="formBlock">
<label for="cust_id">Customer Name <span class="required">*</span></label>
<select id="cust_id" ></select>
</div>
</body>
and server.php that works as the file for ajax call :
<?php
if(isset($_GET["branch_id"])){
echo "<option value='4'>a7</option>";
}
?>
You can check your db-related codes too.
Hope it can help :)
im trying to make a simple form which have a select menu with clone and remove button and once any of those select menus changed it must post the form using .Ajax call .
its working but have some issues
HTML
<form action="action.php" method="post" id="LangForm" >
<div id="fileds">
<select name="lang[]" id="lang" class="lang">
<option value="">Select</option>
<option value="arabic">Arabic</option>
<option value="english">english</option>
</select>
</div>
</form>
<button class="clone">Clone</button>
<button class="remove">Remove</button>
<div id="content"></div>
JS
$(function(){
var counter = 1;
$(".clone").click(function(){
$('#lang').clone().appendTo('#fileds');
counter++ ;
});
$(".remove").click(function(){
if (counter > 1) {
$('#lang:last').remove();
counter-- ;
}
});
$('.lang').change(function(){
$.ajax({type:'POST',
url: 'action.php',
data:$('#LangForm').serialize(),
success: function(response) {
$('#content').html(response);
}
});
});
});
it have 2 issues
first one when i click the remove button it remove the original select menu first then the cloned one and keep the last cloned one what i need is to remove the cloned menus first and keep the original one
second issue its submit form only when original menu changed what i need is to submit form whenever any menu changed original or cloned.
below is the PHP code from the action PHP page its something simple just to show result
PHP
<?php
print_r ($_POST['lang']);
?>
Thanks
HTML:
<form action="action.php" method="post" id="LangForm" >
<div id="fileds">
<select name="lang[]" class="lang">
<option value="">Select</option>
<option value="arabic">Arabic</option>
<option value="english">english</option>
</select>
</div>
</form>
<button class="clone">Clone</button>
<button class="remove">Remove</button>
<div id="content"></div>
Note: Id of the field has been removed.
JS:
$(function(){
$(".clone").click(function(){
// clone(true) will clone the element with event handlers intact.
$('.lang').last().clone(true).appendTo('#fileds');
});
$(".remove").click(function(){
var selects = $('.lang');
if (selects.length > 1) {
selects.last().remove()
}
});
$('.lang').change(function(e){
// console.log(e)
$.ajax({type:'POST',
url: 'action.php',
data:$('#LangForm').serialize(),
success: function(response) {
$('#content').html(response);
}
});
});
});
Demo:
http://jsfiddle.net/kFB5j/1/