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
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 know this is a very elementary question, but I am on a tight time crunch to get this project done. I am using the JQuery plugin CloneYa and after you clone the form fields I want to be able to change the form names by appending the clone count.
<!DOCTYPE html>
<html>
<head>
<title>jQuery CloneYa demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h2>Simple Cloning</h2>
<form class="form" method="get" action="panel_test_simple.html">
<div id="animate-clone">
<div class="toclone">
<p>
<input type="text" name="name" id="sname" />
<label for="name">Name</label>
</p>
<p>
<input type="text" name="email" id="semail" />
<label for="email">E-mail</label>
</p>
<p >
<input type="text" name="web" id="sweb" />
<label for="web">Website</label>
</p>
clone
delete
</div>
</div>
<p class="submit">
<input type="submit" value="Save" />
</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="jquery-cloneya.js"></script>
<script>
$('#animate-clone').cloneya({
limit : 5,
valueClone : false,
dataClone : true,
deepClone : true,
clonePosition : 'after',
serializeID : true,
defaultRender : false,
preserveChildCount: true
})
.on('after_clone.cloneya', function (event, toclone, newclone) {
// alert(toclone.attr('id'));
});
</script>
</body>
</html>
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!
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");
I've bought and installed a custom template for Wordpress and it is randomly giving white/blank pages on all areas of the site excluding the admin cp when navigating around on IE7 (works fine on Chrome). I know it's the template as it works fine with standard templates, and I'm pretty sure it's a javascript as I've disabled all the plugins to see if it was those.
Here's the site: http://www.visualisebi.com
Looking at a page with minimal code that has the issue (Admin CP login area), the only major differences I can see that are different between the new template pages and a standard template are the amount of scripts the new template calls. Here's an example:
New template source:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Visualise Business Intelligence Services › Log In</title>
<link rel='stylesheet' id='wp-admin-css' href='http://www.visualisebi.com/wp-admin/css/wp-admin.css?ver=20111208' type='text/css' media='all' />
<link rel='stylesheet' id='colors-fresh-css' href='http://www.visualisebi.com/wp-admin/css/colors-fresh.css?ver=20111206' type='text/css' media='all' />
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery-1.6.1.min.js?ver=1.6.1'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/modernizr-2.0.js?ver=2.0'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/superfish.js?ver=1.4.8'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery.prettyPhoto.js?ver=3.1.2'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/easyTooltip.js?ver=1.0'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery.easing.1.3.js?ver=1.3'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery.loader.js?ver=1.0'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-includes/js/swfobject.js?ver=2.2'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery.cycle.all.js?ver=2.99'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/audiojs/audio.js?ver=1.0'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/custom.js?ver=1.0'></script>
<meta name='robots' content='noindex,nofollow' />
</head>
<body class="login">
<div id="login"><h1>Visualise Business Intelligence Services</h1>
<p class="message"> You are now logged out.<br />
</p>
<form name="loginform" id="loginform" action="http://www.visualisebi.com/wp-login.php" method="post">
<p>
<label for="user_login">Username<br />
<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" /></label>
</p>
<p>
<label for="user_pass">Password<br />
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
</p>
<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" />
<input type="hidden" name="redirect_to" value="http://www.visualisebi.com/wp-admin/" />
<input type="hidden" name="testcookie" value="1" />
</p>
</form>
<p id="nav">
Lost your password?
</p>
<script type="text/javascript">
function wp_attempt_focus(){
setTimeout( function(){ try{
d = document.getElementById('user_login');
d.focus();
d.select();
} catch(e){}
}, 200);
}
if(typeof wpOnload=='function')wpOnload();
</script>
<p id="backtoblog">← Back to Visualise Business Intelligence Services</p>
</div>
<link rel='stylesheet' id='wp-pagenavi-css' href='http://www.visualisebi.com/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<script type='text/javascript'>
/* <![CDATA[ */
var wpBannerizeJavascriptLocalization = {"ajaxURL":"http:\/\/www.visualisebi.com\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/plugins/wp-bannerize/js/wpBannerizeFrontend.min.js?ver=3.0.32'></script>
<div class="clear"></div>
</body>
</html>
Standard template source:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Visualise Business Intelligence Services › Log In</title>
<link rel='stylesheet' id='wp-admin-css' href='http://www.visualisebi.com/wp-admin/css/wp-admin.css?ver=20111208' type='text/css' media='all' />
<link rel='stylesheet' id='colors-fresh-css' href='http://www.visualisebi.com/wp-admin/css/colors-fresh.css?ver=20111206' type='text/css' media='all' />
<script type='text/javascript' src='http://www.visualisebi.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<meta name='robots' content='noindex,nofollow' />
</head>
<body class="login">
<div id="login"><h1>Visualise Business Intelligence Services</h1>
<p class="message"> You are now logged out.<br />
</p>
<form name="loginform" id="loginform" action="http://www.visualisebi.com/wp-login.php" method="post">
<p>
<label for="user_login">Username<br />
<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" /></label>
</p>
<p>
<label for="user_pass">Password<br />
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
</p>
<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" />
<input type="hidden" name="redirect_to" value="http://www.visualisebi.com/wp-admin/" />
<input type="hidden" name="testcookie" value="1" />
</p>
</form>
<p id="nav">
Lost your password?
</p>
<script type="text/javascript">
function wp_attempt_focus(){
setTimeout( function(){ try{
d = document.getElementById('user_login');
d.focus();
d.select();
} catch(e){}
}, 200);
}
if(typeof wpOnload=='function')wpOnload();
</script>
<p id="backtoblog">← Back to Visualise Business Intelligence Services</p>
</div>
<link rel='stylesheet' id='wp-pagenavi-css' href='http://www.visualisebi.com/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<script type='text/javascript'>
/* <![CDATA[ */
var wpBannerizeJavascriptLocalization = {"ajaxURL":"http:\/\/www.visualisebi.com\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/plugins/wp-bannerize/js/wpBannerizeFrontend.min.js?ver=3.0.32'></script>
<div class="clear"></div>
</body>
</html>
Any help greatly appreciated.
Is the original theme properly working in IE7 ??
Have you checked the theme demo where you purchased the theme ? Is it working in IE7. If not you can ask the theme owner to fix the issue.
(Cannot comment yet and hence the answer.)