I have checked radio button using Jquery buts its not updated in UI .
Anyone has any idea .below is my snippets...
<!DOCTYPE html>
<html>
<head>
<title>Radio Button</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
function getValue() {
alert("Value is :"+$('input[name=animal]:checked').val());
}
function setValue(toBeSetID) {
$("input[name=animal][id=radio-choice-2]").prop("checked", true);
$("label[for='rock']").addClass("ui-radio-on");
alert("Value is :"+$('input[name=animal]:checked').val());
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Radio Button</h1>
</div><!-- /header -->
<div data-role="content">
<input type="radio" name="animal" id="cat" value="Cat" />
<label for="cat">Cat</label>
<input type="radio" name="animal" id="radio-choice-2" value="choice-2"/>
<label for="radio-choice-2">Dog</label>
<input type="radio" name="animal" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="animal" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
<input type="button" value="Get Radio Button Value" onclick="getValue();">
<input type="button" value="Set Radio Button Value" onclick="setValue();">
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Its Checked by programm as alert box says But not updated in UI.
As Chase says in his answer to your other question, you have to refresh the jQuery Mobile widget when you change the checked property of the underlying form element. This can be done by writing:
$("input[name=animal][id=radio-choice-2]")
.prop("checked", true).checkboxradio("refresh");
That way, you do not have to manipulate the classes yourself, the mobile widget does all the work.
Note in passing that your selector targets an element that has an id attribute, so it can be simplified:
$("#radio-choice-2").prop("checked", true).checkboxradio("refresh");
Related
I've been struggling to make this as reusable as possible. I have written it such that if I put the id's of both the target fieldset and the input checkbox it works. However, I have a number of form elements that must all act the same, so this isn't a great way to deal with it.
When a user enables or disables the checkbox switch, then I want the following form field to disable or enable accordingly. I've tried multiple different ways to accomplish this and cleaned up my javascript based on suggestions in other threads, but when I attempt to activate the switch I get the below error. Any help would be amazing!
form_enable.js:2 Uncaught TypeError: Cannot set property 'disabled' of null at enable_disable (form_enable.js:2) at HTMLInputElement.onchange (Trim.htm:11)
My trimmed down HTML:
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="form-group custom-control custom-switch">
<input class="custom-control-input" type="checkbox" name="report_url_active" id="report_url_active_yes" onchange="enable_disable(report_url_disable_fieldset,report_url_active_yes)">
<label class="custom-control-label" for="report_url_active_yes">Will you need a report?</label>
</div>
<div class="container">
<fieldset disabled id="report_url_disable_fieldset"> <!-- Enable if report_url_active_yes is checked -->
<div class="form-group form-inline">
<label class="form-control-label" for="report_url">Reports URL</label>
<input class="form-control" type="text" id="report_url">
</div>
</fieldset>
</div>
</div>
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/form_enable.js"></script>
</body>
And my form_enable.js file:
function enable_disable(target_id,check_id) {
document.getElementById(target_id).disabled = !check_id.checked;
}
Try:
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="form-group custom-control custom-switch">
<input class="custom-control-input" type="checkbox" name="report_url_active" id="report_url_active_yes">
<label class="custom-control-label" for="report_url_active_yes">Will you need a report?</label>
</div>
<div class="container">
<fieldset id="report_url_disable_fieldset"> <!-- Enable if report_url_active_yes is checked -->
<div class="form-group form-inline">
<label class="form-control-label" for="report_url">Reports URL</label>
<input class="form-control" type="text" id="report_url">
</div>
</fieldset>
</div>
</div>
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/form_enable.js"></script>
</body>
</html>
And form_enable.js:
document.getElementById("report_url").setAttribute("disabled", "true");
document.getElementById("report_url_active_yes").addEventListener("change", function() {
document.getElementById("report_url_active_yes").checked ? document.getElementById("report_url").removeAttribute("disabled") : document.getElementById("report_url").setAttribute("disabled", "true")
});
I am trying to make a dropdown menu for a date and time picker within a multiple step form. The issue here is that the jQuery libraries are conflicting each other (specifically in between the </form> and the </body>), where the multiple step form works when the date and time picker libraries are disabled, and vice versa. I Looked online but nothing seem to resolve the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- jQuery -->
<!-- Custom styles for this template-->
<link href="coupons_Example.css" rel="stylesheet">
<title>Title of the document</title>
</head>
<body>
<!-- jQuery -->
<!-- multistep form -->
<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Discount Setup</li>
<li>Type of Discount</li>
<li>Discount Time Period</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Create Discount</h2>
<h3 class="fs-subtitle">Step 1</h3>
<input type="text" name="email" placeholder="Name of Discount" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Type of Discount</h2>
<h3 class="fs-subtitle">Step 2</h3>
<!-- Picking the date and time -->
<input type="text" name="datetimes" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Discount Time Period</h2>
<h3 class="fs-subtitle">Step 3</h3>
<input type="text" name="discountstart" placeholder="Discount Start Period" />
<input type="text" name="discountend" placeholder="Discount End Period" />
<input type="text" name="speekeasy" placeholder="Speekeasy" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
</form>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="app.js"></script>
<script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- jQuery easing plugin -->
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>
</body>
</html>
Please try below link
https://api.jquery.com/jQuery.noConflict/
Or for use multiple versions for jquery in same page, include jquery migrate:
https://code.jquery.com/jquery-migrate-1.4.1.min.js
But best advice do not user multiple jQuery library
Why dont you find the same module that requires the same jquery major version instead?
I did a research while it can be achieved by separating the scope, havent done it
you might want to check it by yourself in this link
https://www.tutorialspoint.com/How-to-use-multiple-versions-of-jQuery-on-the-same-page
Don't Use Multiple jQuery Core Library. Use either 3.4 or 1.9
In order to get Date etc work, you need to update(recall) that js after ajax call.
I have this code on materialize
it's working, but when the button is already checked, won`t work for some reason
so, if there is :
<input type="checkbox" name="test1" onclick="this.form.submit()" checked="checked">
there will be the lever ON but when i click it off it won`t submit the form
Here is the relevant code snippet:
<?php if (isset($_POST['test1'])){ echo "working"; } ?>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="materialize.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> </head>
<form method="post">
<div class="switch"> <label> Off <input type="checkbox" name="test1" onclick="this.form.submit()" checked="checked"> <span class="lever" ></span> On </label> </div>
</form>
</script>
<script src="jquery.min.js"></script>
<script src="materialize.min.js"></script>
<script src="scripts.js"></script>
Any help is really appreciate
Thank you
i have the answer but i dont know why i cant post it
so there is the syntax
<?php if (isset($_GET['test1'])){ echo "working"; } ?>
and on the action form:
<form action="test.php?test1=true" method="post">
and then it`s working with the checked attribute
thank you
I added inline stylesheet to color the two radio button, but the two radio buttons remain blue, they don't became red or green.
This is the code, could you please help me find the bug in my code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap-social.css" rel="stylesheet">
<link href="css/mystyles.css" rel="stylesheet">
</head>
<body> <form class="form-horizontal" role="form">
<div class="form-group">
<label for="btn-group" class="col-xs-12 col-sm-2 control-label">Sections</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" style ="background-color:red;" checked > True
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" style="background-color: green;" autocomplete="off"> False
</label>
</div></div>
</form><!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
</body>
</html>
Change the class btn-primary to btn-success to became green and btn-danger to become red
You are styling the radio button itself but the thing that is making the button blue is the label that is containing it. Try this
<label class="btn btn-primary active" style ="background-color:red;">
<input type="radio" name="options" id="option1" autocomplete="off" checked > True
</label>
<label class="btn btn-primary" style="background-color: green;">
<input type="radio" name="options" id="option3" autocomplete="off"> False
</label>
I am experiencing a weird issue... when I load the page the first time this works completely:
<script type="text/javascript">
jQuery(function($){
$("#phone").mask("(999) 999-9999");
});
</script>
but if I try POSTing to the same page again, with my "Add" or "Remove" button, the above function doesn't work any longer. In other works, the phone field will be perfect and filtered when the page is first loaded, but when you try and add more club fields, the phone filter no longer works. Why isn't the phone field being masked anymore, am I doing something wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs -->
<meta charset="utf-8">
<title>Test Page</title>
<meta http-equiv="cache-control" content="no-cache"/>
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!-- css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/framework.css">
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
$("#phone").mask("(999) 999-9999");
});
</script>
</head>
<body>
<div data-role="page">
<!-- header -->
<div data-role="header" class="page-header">
</div>
<!--/header -->
<form style="" method="POST">
<fieldset style="text-align: center;">
<label for="phone">Cell Phone</label>
<input type="tel" id="phone" style="" value="<?php if(isset($_POST['phone'])) echo $_POST['phone'];?>" name="phone" />
<br />
<?php
if(isset($_POST['add']))
$_POST['club_num']++;
if(isset($_POST['remove']) && $_POST['club_num'] > 1)
$_POST['club_num']--;
if(!isset($_POST['club_num']))
$_POST['club_num'] = 1;
?>
<input type="hidden" value="<?php if(isset($_POST['club_num'])) echo $_POST['club_num'];?>" name="club_num" />
<h3 style="font-size: 1.5em; margin-top: 40px;">Are you in a Club?</h3>
<?php
$count = 0;
do {
$count++;
?>
<label for="clubs<?=$count?>"><?=$count?>. Club</label>
<input type='text' id="clubs<?=$count?>" name="clubs<?=$count?>" value="<?php if(isset($_POST['clubs'.$count])) echo $_POST['clubs'.$count];?>" />
<?php if($count == $_POST['club_num']){ ?>
<div style="text-align: center; display: inline-block;" data-type="horizontal" data-role="controlgroup" data-mini="true">
<input data-theme="e" data-icon="plus" type="submit" name="add" value="Add" />
<input data-theme="e" data-icon="minus" <?=($_POST['club_num']==1)?'disabled="disabled"':''?> data-iconpos="right" type="submit" name="remove" value="Remove"/>
</div>
<?php
}
} while ($count < $_POST['club_num']);
?>
</fieldset>
</form>
<br />
<!-- footer -->
<div data-role="footer" class="footer">
<div class="ui-grid-solo">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e" style="height:120px">
</div>
</div>
</div>
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
When one of the buttons is pressed the page content is reloaded using AJAX. This means the original element '#phone' (that you bound the mask function to) is replaced.
I can't see where you are doing the AJAX request from, but you need to call $("#phone").mask("(999) 999-9999"); again once the page has reloaded.
I figured out how to solve this problem, by using jd182 answer and jeroen comment and link here: http://demos.jquerymobile.com/1.2.0/docs/forms/forms-sample.html
Since it is submitting an ajax form, like jd182 stated, and because it was mobile jquery, all post automatically send as a ajax post.
All I had to do was change
<form style="" method="POST">
to
<form style="" method="POST" data-ajax="false">
and it fixed the problem, because it posted regularly!
Thanks jeroen and jd182!