When echo inside value the javascript onchange doesnt work. it must click/choose again to show the div.
<?php
$test = '1';
?>
<select name="request" id="reqtypev" class="form-control1" >
<option value="<?php echo $test ?>" selected="selected"><?php echo $test ?></option>
</select>
it does work if you didnt echo it using php.
//javascript
$('#reqtypev').change(function(){
if( $(this).val()==="1" || $(this).val()==="2" || $(this).val()==="3" || $(this).val()==="4" ){
$("#otherTypev").show()
} else {
$("#otherTypev").hide()
}
});
how is it possible to execute the javascript when you echo using php ?
Trigger change event after page load for #reqtypev as following:
(function ($) {
$(function () {
$('#reqtypev').change(function(){
if( $(this).val()==="1" || $(this).val()==="2" || $(this).val()==="3" || $(this).val()==="4" ){
$("#otherTypev").show()
} else {
$("#otherTypev").hide()
}
});
$('#reqtypev').trigger("change");
});
}(jQuery));
Try this :
<?php
$test = '1';
?>
<select name="request" id="reqtypev" class="form-control1" onchange="intializeDrop(this.value);" >
<option value="<?php echo $test ?>" selected="selected"><?php echo $test ?></option>
</select>
Js code:
function intializeDrop(id){
if( $(this).val()==="1" || $(this).val()==="2" || $(this).val()==="3" || $(this).val()==="4" ){
$("#otherTypev").show()
} else {
$("#otherTypev").hide()
}
}
Try this
//javascript
$(document).on('change','#reqtypev',function(){
if( $(this).val()==="1" || $(this).val()==="2" || $(this).val()==="3" || $(this).val()==="4" ){
$("#otherTypev").show()
} else {
$("#otherTypev").hide()
}
});
Hmm, I don't think it's doable in PHP, PHP executes once and quits (Until another refresh occurs)
You can do it in PHP, once. But not live where people are moving the selection bar around.
Can you put more info on what you want to do? I assume from the little code you are showing is to hide a field in the form once a person chooses a value < 1 or > 4
Value in option at least 2 values function change() to activity
<div id="otherTypev">texttttt</div>
<select name="request" id="reqtypev" class="form-control" >
<?php
for($i = 0;$i<=10;$i++){
echo '<option value="'.$i.'" selected="selected">'.$i.'</option>';
}
?>
</select>
Js
<script>
$('#reqtypev').change(function(){
if( $(this).val()=== "1" || $(this).val()==="2" || $(this).val()==="3" || $(this).val()==="4" ){
$("#otherTypev").show()
} else {
$("#otherTypev").hide()
}
});
</script>
Related
Basically, I want to add an additional class when a certain IF condition is met.
<?php
if($type == 'NEW')
{
$('#'+day+s).addClass('new');
}
if($type == 'USED')
{
$('#'+day+s).addClass('used');
}
?>
You would need to do it through JavaScript / jQuery inside of a PHP conditional.
You can either close your PHP tags while leaving the conditional open:
<?php
if($type == 'NEW')
{
?>
<script>$('#'+day+s).addClass('new');</script>
<?php
}
if($type == 'USED')
{
?>
<script>$('#'+day+s).addClass('used');</script>
<?php
}
?>
Or echo() out the <script> tags from within PHP:
<?php
if($type == 'NEW')
{
echo "<script>$('#'+day+s).addClass('new');</script>";
}
if($type == 'USED')
{
echo "<script>$('#'+day+s).addClass('used');</script>";
}
?>
Having said that, you'd be better off simply altering your logic to output classes based on your conditionals. That way you would simply need to add a regular CSS rule for each class. The right rule would be selected based on which class was outputted.
It should be directly in your HTML :
<div class="<?php if ($type == 'NEW') echo 'new';?>"></div>
You have to assign your calss name in a variable and simply give that to your corresponding MHTL.
<?php
if($type == 'NEW')
{
$style = "class_name for if"; //eg:- new
}
if($type == 'USED')
{
$style = "class_name for else"; //eg:- used
}
?>
//html element
for eg:
<p id="days" class="<?php echo $style;?>"></p>
several ways to do that and depends also in your code
<!-- Assignment inline -->
<div class="<?= $type === 'NEW' ? 'newClass' : 'usedClass'?>"></div>
<!-- Assignment previous -->
<?php
$class = 'defaultClass';
if ($type === 'NEW') { $class = 'newClass'; }
if ($type === 'USED') { $class = 'usedClass'; }
?>
<div class="<?=$class?>"></div>
<!-- Assignment in script -->
<?php $class = $type === 'NEW' ? 'newClass' : 'usedClass'; ?>
<script>
$(document).ready(function(){
$('#'+day+s).addClass('<?= $class ?>');
});
</script>
You can put the if condition of PHP inside class attribute directly. No need to do any method or js for this. You can use the logic as below:
<div class="<?php if($type == 'NEW'){ echo 'new';} else if($type == 'USED'){ echo 'used'; } ?>"></div>
How can I create if for option in select? The code works, it is necessary to code only worked for option = 5
<select id="select<?php echo $product['id_product'];?>" name="status_id" class="form-control" onchange="changeFunction(<?php echo $product['id_product'];?>)">
<?php foreach ($statuses as $status) { ?>
<option id="option<?php echo $product['id_product'];?>" value="<?php echo $status['id_product_status'];?>"
<?php if ($status['id_product_status'] == $product['id_product_status']) { ?> selected="selected"<?php } ?>>
<?php echo $status['name_product_status']; ?>
</option>
<?php } ?>
<textarea id="onchange<?php echo $product['id_product'];?>" style="visibility: hidden" "></textarea>
</select>
function changeFunction(item) {
if ($("#option" + item).val == 5) {
var selectOption = document.querySelector("#onchange" + item);
selectOption.setAttribute('style', 'visibility: visible');
}
}
Do like this, though you don't need to pass "item" as parameter to achieve this. When you select an option, a change event is triggered on select. So you can bind a change event for this particular requirement. Upto you.
function changeFunction(item){
if($("#select"+item).val() == 5) {
var selectOption = $("select option:selected");
selectOption.setAttribute('style', 'visibility: visible');
}
}
you can use this code :
function changeFunction(item){
if($(this).val() == 5) {
$(this).css('visibility': 'visible');
}
}
Assume I have a table. Each row contains form fields that can be populated or not by the user. I need to check that for each row either all the form fields are populated or none.
The html is this:
<tr class="riga_gar">
<td class="report">
<input type="hidden" id="crediti[<?php echo $i; ?>]" name="crediti[<?php echo $i; ?>]"
value="<?php echo $cred['id_cre']; ?>" >
<?php echo $cred['id_cre'] ?>
</td>
<td class="report gbv" data-gbv="<?php echo $cred['gbv_tot']; ?>">
<?php echo num2cur($cred['gbv_tot']); ?>
</td>
<td class="report">
<?php echo veicolo2name($cred['titolare'],$pdo); ?>
</td>
<td class="report">
<?php echo $cred['stato']; ?>
</td>
<td class="report">
<input class="input_field numerico" id="chiesto" type="text" name="garanzia[<?php echo $i; ?>]" value="<?php echo $chiesto; ?>">
</td>
<td class="report">
<select name="tipo_gar[<?php echo $i; ?>]">
<option value="">Scegli</option>
<?php foreach($tipo_gars as $tipo_gar){
echo '<option value="'.$tipo_gar['id'].'">'.$tipo_gar['descrizione'].'</option>';
}?>
</select>
</td>
</tr>
What I am trying to do is to check that for each row both the input and the select have a value or none.
I started with this js:
function ajax_submit(){
var submit_val=$("#garante").serialize();
dest="anagrafiche/new_garante1.php";
$('.riga_gar').each(function(i,obj){
if ($(this).val()!='') {
}
});
}
and I want to run this ajax function:
$.ajax({
type: "POST",
url: dest,
data: submit_val,
success: function(data){
data1=data.split("|");
if(data1[0]=="Successo"){
$("#spnmsg").fadeTo(200,0.1,
function(){$(this).removeClass().addClass("spn_success").html(data1[1]).fadeTo(900,1)});
}else if(data1[0]=="Errore"){
$("#spnmsg").fadeTo(200,0.1,
function(){$(this).removeClass().addClass("spn_error").html(data1[1]).fadeTo(900,1)});
}
},
complete: function(){
$.fancybox.close();
//setTimeout(function(){ $('.container').load('sofferenze/dashboard.php?from=<?php echo $id_soff ?>');},3000);
setTimeout(function(){
$('#upper').load('sofferenze/soff.php?soff=<?php echo $id_soff ?>');
$("#spnmsg").fadeTo(200,0.1,
function(){$(this).removeClass().addClass("spn_normal").html('Cruscotto della sofferenza <?php echo soff2name($id_soff,$pdo); ?>').fadeTo(900,1)});
},3000);
} //chiudo complete function
}); //chiudo $.ajax
only when:
at least one row have both values;
all the rows that have values have both of them;
but I get stuck at how to refer to the value of input and select in the each loop so that I can check my conditions.
I think this will help you. This will read each row and ignore your hidden field. Once code will find both values populated than validateForm variable will be true and will become false if in next row one value from both input or select will be empty.
$(document).ready(function(){
var validateForm = false;
var check = 0;
$("form").on('submit',function(){
$("tr").each(function(){
console.log($.trim($(this).find("input.input_field").val()) +", "+ $.trim($(this).find("select").val()));
if($.trim($(this).find("input.input_field").val()) != "" && $.trim($(this).find("select").val()) != ""){
validateForm = true;
}
else{
if($.trim($(this).find("input.input_field").val()) == "" && $.trim($(this).find("select").val()) != ""){
if(validateForm){
validateForm = false;
check = 1;
return false;
}
}
if($.trim($(this).find("input.input_field").val()) != "" && $.trim($(this).find("select").val()) == ""){
if(validateForm){
validateForm = false;
check = 1;
return false;
}
}
}
});
if(validateForm && check == 0){
validateForm = true;
}
else{
validateForm = false;
}
if(validateForm){
//call ajax
}
});
});
Demo:https://jsfiddle.net/87tkraas/
This is untested but how about something like this:
var allowSubmit = false;
$("form").on("submit", function(e) {
$("tr").each(function() {
var input = $(this).find("input").val();
var select= $(this).find("select").val();
if ((input == "" && select != "") || (input != "" && select == "")) {
return;
} else if (input != "" && select != "") {
allowSubmit = true;
}
});
if (allowSubmit == false) {
e.preventDefault();
}
});
I am trying to detect if my user is using a smartphone. I have tried so many different methods but nothing seems to detect if it is a smartphone.
The one below does not even echo $_SERVER['HTTP_USER_AGENT'];
<?php
echo $_SERVER['HTTP_USER_AGENT'];
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
if ($iphone || $android || $palmpre || $ipod || $berry == true)
{
header('Location: http://mobile.site.com/');
}
?>
This is another script I tried that did not echo anything back.
<script type="text/javascript" >
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
<?php
echo "I should redirect";
?>
}
</script>
I have also tried getting the screen size, but that does not show anything.
<script type="text/javascript">
document.write(screen.width);
if (screen.width <= 800) {
window.location = "http://m.domain.com";
}
</script>
I have also tried the very popular php script below, but it also echo's nothing for $detect.
<?php
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
echo $detect;
if($detect->isMobile()) {
header('Location: http://mobile.example1.com/');
exit;
}
?>
Please check that solution:
if( strstr($_SERVER['HTTP_USER_AGENT'],'Android') ||
strstr($_SERVER['HTTP_USER_AGENT'],'webOS') ||
strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||
strstr($_SERVER['HTTP_USER_AGENT'],'iPod')
){}
I have the form submission because it is a simple
onchange="submit();"
<div class="cities">Select City <form method="post" action="<?php echo $PHP_SELF;?>" style="float:right;"><select name="city_select" id="city_select" onchange="submit();"><option>-----</option>
<option value="Beijing" <?php if($_SESSION['city_selected'] == 'Beijing') { echo 'selected=selected';} else { echo ''; }?> >Beijing</option>
<option value="Shanghai" <?php if($_SESSION['city_selected'] == 'Shanghai') { echo 'selected=selected';} else { echo ''; }?> >Shanghai</option>
<option value="Guangzhou" <?php if($_SESSION['city_selected'] == 'Guangzhou') { echo 'selected=selected';} else { echo ''; }?> >Guangzhou</option>
<option value="Manila" <?php if($_SESSION['city_selected'] == 'Manila') { echo 'selected=selected';} else { echo ''; }?> >Manila</option>
<option value="HongKong" <?php if($_SESSION['city_selected'] == 'HongKong') { echo 'selected=selected';} else { echo ''; }?> >Hong Kong</option>
<option value="Tokyo" <?php if($_SESSION['city_selected'] == 'Tokyo') { echo 'selected=selected';} else { echo ''; }?> >Tokyo</option>
<option value="Seoul" <?php if($_SESSION['city_selected'] == 'Seoul') { echo 'selected=selected';} else { echo ''; }?> >Seoul</option>
<option value="Taipai" <?php if($_SESSION['city_selected'] == 'Taipai') { echo 'selected=selected';} else { echo ''; }?> >Taipai</option>
</select></form>
<div style="clear:both;"></div>
</div>
I'm trying to submit the form and also redirect to a url. I was wondering if this was possible. I've tried implementing a jquery $.change event but it didn't fire before the form submit()
if anyone could help, that would be fantastic. Thanks!
Just do it in php by:
header('Location: ' . the_url_to_redirect);
where is your submit function?
Can you try like this
<select name="city_select" id="city_select" onchange="this.form.submit();">
It should work
You have not shown what your submit function does, but if it does a normal form submission (not AJAX), then you will need to redirect at a later time.
Normally, you would have your form submit normally, and then when the next page loads, that page would set a 'Location' header telling the browser to redirect.
For example, in whatever PHP code runs when the form submits, you will need to redirect by doing this:
header('Location', 'http://mysite.com/page-to-redirect-to.php');
All you need is "Jquery Form Plugin"
http://jquery.malsup.com/form/#ajaxForm
With this plug-in the form submits to the 'action' address without leaving the page. When it's done you can redirect with the callback function.
<script>
$(document).ready(function(){
$('#FORM_ID').ajaxForm(function(data) {
window.location="http://www.REDIRECT_URL.com/";
});
});
</script>
If you need this onchange you can use this one :
<script>
$(document).ready(function(){
$('#FORM_ID').ajaxForm(function(data) {
window.location="http://www.REDIRECT_URL.com/";
});
$('#city_select').change(function(){
$('#FORM_ID').trigger('submit');
});
});
</script>
if(isset($_POST['city_select'])) {
$_SESSION['city_selected'] = $_POST['city_select'];
if($_POST['city_select'] == "Beijing") {
header("Location: /city-beijing/");
}
if($_POST['city_select'] == "Shanghai") {
header("Location: /city-shanghai/");
}
if($_POST['city_select'] == "Guangzhou") {
header("Location: /city-guangzhou/");
}
if($_POST['city_select'] == "Manila") {
header("Location: /city-manila/");
}
if($_POST['city_select'] == "HongKong") {
header("Location: /city-hong-kong/");
}
if($_POST['city_select'] == "Tokyo") {
header("Location: /city-tokyo/");
}
if($_POST['city_select'] == "Seoul") {
header("Location: /city-seoul/");
}
if($_POST['city_select'] == "Taipai") {
header("Location: /city-taipai/");
}
else{
}
}
this worked for me :), cheers.