I am trying to show alert popup when the user didn't select any value from the dropdown
Here is my html :
<div id="reminder" class="popup-layout">
<form id="reminderForm" method="post">
<div class="modal followup-modal ui-draggable" id="reminderPopupdrag" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div id="errorInPopup" class="error displayInlineBlock"></div>
<div class="modal-header">
<h5 class="modal-title">select_followup</h5>
</div>
<div class="modal-body">
<table class="width100percent">
<tbody><tr>
<td>
<label><input type="radio" name="reminder" id="reminder-1" value="1" class="element full-width verticalAlignMiddle">close_with_reminder</label> </td>
<td class="textAlignRight">
<input type="text" id="reminderdate" name="reminderdate" class="marginRight5 displayNone">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="reminderText" id="reminderText" value="" class="element displayNone width-full marginTop5" placeholder="add_remark_here"> </td>
</tr>
<tr>
<td colspan="2">
<label><input type="radio" name="reminder" id="reminder-2" value="2" class="element full-width">close_without_reminder</label> </td>
</tr>
<tr>
<td colspan="2">
<select name="reminderclosereason" id="reminderclosereason" class="element displayNone width100percent">
<option value="0">Select value</option>
<option value="6">Advertisements</option>
<option value="4">Another reason:</option>
<option value="17">Checking financial terms and conditions</option>
<option value="16">Company not leasable</option>
<option value="18">Future potential clients </option>
<option value="20">Offer is of vehicle type in which we do not do business</option>
<option value="12">Open application</option>
<option value="13">Order</option>
<option value="10">Other ticket already in progress</option>
<option value="11">Out of office reply </option>
<option value="50">Portal, ad removed, payment, offer withdrawn</option>
<option value="7">SPAM</option>
<option value="9">Unsubscribe MFO Mailing</option>
<option value="2">Vehicle/part is sold (indicate order number!)</option>
<option value="8">Vehicle/part not on stock (is looking for something else)</option>
<option value="1">Vehicles too expensive</option>
</select> </td>
</tr>
</tbody></table>
</div>
<div class="modal-footer">
<input type="submit" name="send" id="sendPreview" value="Save" class="defaultbutton displayNone"> </div>
</div>
</div>
</div>
</form>
</div>
And i have tried like this in my js function page:
var TICKET = {};
TICKET.preview = {
init: function () {
this.bindUI();
},
bindUI: function () {
var self = this;
$('#send').click(function () {
self.followupPopup();
});
$(document).on('change', 'input[name=reminder]', function () {
$('#sendPreview').show();
if ($(this).val() == 1) {
$('#reminderdate').datetimepicker({
showOn: "button",
buttonImage:vbdBaseUrl + '/images/calendar.png',
dateFormat:'dd-mm-yy',
timeFormat: 'HH:mm',
buttonImageOnly: true,
controlType: 'select',
showWeek: true,
firstDay: 1,
oneLine : true,
});
/**
* To display the tomorrows date and time as 8AM by default in datepicker input box.
*/
var today = new Date();
var tomorrow = new Date();
tomorrow.setDate(today.getDate() + 1);
tomorrow.setHours(8);
tomorrow.setMinutes(0);
$('#reminderdate').datetimepicker('setDate', new Date(tomorrow));
$('#reminderText').show();
$('#reminderdate').show();
$('.ui-datepicker-trigger').show();
$('#reminderclosereason').hide();
$('#saveReminder').show();
return true;
}
$('#reminderText').hide();
$('#reminderdate').hide();
$('.ui-datepicker-trigger').hide();
$('#reminderclosereason').show();
$('#saveReminder').show();
});
$('#reminderForm').submit(function() {
if ('' == $('#reminderclosereason').val() && $('input[name=reminder]:checked').val()!= 1) {
$('#errorInPopup').html('please select close reason');
return false;
}
});
},
followupPopup: function () {
var request = BAS.ajax;
request.url = vbdBaseUrl + '/ticket/mail/follow-up';
request.method = 'POST';
request.data = {
ticketId : ticketId
}
request.ajaxRequest(function(response) {
$('#reminderPopup').html(response);
$('#reminderPopupdrag').draggable();
$('.popup-dragable').show();
});
}
};
$(function () {
TICKET.preview.init();
});
I have tried a lot of solution. but none of the things work in my case.
I haven't understood what wrong in this case. i am trying to check the condition if dropdown value not selected or drop-down value is 0 I would like to show alert
Can anyone help me
Thanks in advance.
It turns out the problem was simple - the alert IS working, it just doesn't come before the default behaviour of submit, which includes a page refresh.
If you prevent the default from happening, you can validate and then decide what to do from there. Attached is a working snippet.
$('#reminderForm').submit(function(e) {
e.preventDefault(); // Stop your form from submitting.
if ('0' === $('#reminderclosereason').val()) {
alert();
$('#errorInPopup').html('Please select close reason');
return false;
} else {
this.submit();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="reminder" class="popup-layout">
<form id="reminderForm" method="post">
<div class="modal followup-modal ui-draggable" id="reminderPopupdrag" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div id="errorInPopup" class="error displayInlineBlock"></div>
<div class="modal-header">
<h5 class="modal-title">select_followup</h5>
</div>
<div class="modal-body">
<table class="width100percent">
<tbody>
<tr>
<td>
<label><input type="radio" name="reminder" id="reminder-1" value="1" class="element full-width verticalAlignMiddle">close_with_reminder</label> </td>
<td class="textAlignRight">
<input type="text" id="reminderdate" name="reminderdate" class="marginRight5 displayNone">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="reminderText" id="reminderText" value="" class="element displayNone width-full marginTop5" placeholder="add_remark_here"> </td>
</tr>
<tr>
<td colspan="2">
<label><input type="radio" name="reminder" id="reminder-2" value="2" class="element full-width">close_without_reminder</label> </td>
</tr>
<tr>
<td colspan="2">
<select name="reminderclosereason" id="reminderclosereason" class="element displayNone width100percent">
<option value="0">Select value</option>
<option value="6">Advertisements</option>
<option value="4">Another reason:</option>
<option value="17">Checking financial terms and conditions</option>
<option value="16">Company not leasable</option>
<option value="18">Future potential clients </option>
<option value="20">Offer is of vehicle type in which we do not do business</option>
<option value="12">Open application</option>
<option value="13">Order</option>
<option value="10">Other ticket already in progress</option>
<option value="11">Out of office reply </option>
<option value="50">Portal, ad removed, payment, offer withdrawn</option>
<option value="7">SPAM</option>
<option value="9">Unsubscribe MFO Mailing</option>
<option value="2">Vehicle/part is sold (indicate order number!)</option>
<option value="8">Vehicle/part not on stock (is looking for something else)</option>
<option value="1">Vehicles too expensive</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<input type="submit" name="send" id="sendPreview" value="Save" class="defaultbutton displayNone"> </div>
</div>
</div>
</div>
</form>
</div>
Try this, don't forget to Install Jquery :-)
if ($("#reminderclosereason option:selected").val() === "0") {
console.log("Hi");
}
Try this
$(document).ready(function(){
$('#reminderForm').submit(function(e) {
e.preventDefault();
if ($(document).find('#reminderclosereason').val())==0) {
alert('please select close reason');
$('#errorInPopup').html('please select close reason');
return false;
}
});
});
Don't forget to import jquery.js before you call this .
Hope this will help you
Related
I have a form and user can dynamically add some text-feild to this form by clicking on dropdown and choosing what he wants to add.
How to post only these text feilds to php script using jquery
code:
<form id="sms_frm" name="sms_frm">
<tr>
<td width="17%"><label>Http URL</label></td>
<td >
<div class='input-group'>
<div class='input-group-addon'>
<i class='fa fa-television'></i>
</div>
<input type='text' class='form-control' id='smsurl' name='smsurl' >
</div>
</td>
<td></td>
</tr>
<tr id="element"></tr>
<tr>
<td>
<div class='input-group'>
<select name="sms_sel" class="form-control" style="margin: 10px" id="sms_sel">
<option value="username">UserName</option>
<option value="Password">Password</option>
<option value="APIKEY">APIKEY</option>
<option value="company">company</option>
<option value="Originator">Originator</option>
<option value="ServiceCode">ServiceCode</option>
<option value="sender">sender</option>
<option value="ServiceUrl">ServiceUrl</option>
<option value="ServicePassword">ServicePassword</option>
<option value="header">header</option>
<option value="OriginName">OriginName</option>
<option value="not">Not any of this</option>
</select>
</div>
</td>
<td><input type='text' class='form-control' id='vals' style="margin: 10px; float: right" name='vals' >
</td>
<td></td>
</tr>
</tbody></table>
this is ajax code to send text fields to php script but it not working
$(document).ready(function(){
$("#sms_frm").submit(function(event){
event.preventDefault(); //prevent default action
var arrays=new array();
var number = $(' input[type=text]');
$('#sms_frm input[type=text]').each(function () {
arrays.push(this);
});
var form_data = $(this).serialize(); //Encode form elements for submission
$.ajax({
url : "Save.php?id=sms_api",
type: 'post',
data : arrays
}).done(function(response){ //
$("#res").html(response);
});
});
});
</script>
if user choose sender for example new text field with id ='sender' and name ='sender' will be append
I don't want to send the select item with ajax
I only want text fields
Please try this code this may work...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="sms_frm" name="sms_frm">
<table id="text-table">
<tr>
<td width="17%"><label>Http URL</label></td>
<td>
<div class='input-group'>
<div class='input-group-addon'><i class='fa fa-television'></i></div>
<input type='text' class='form-control' id='smsurl' name='smsurl' >
</div>
</td>
<td></td>
</tr>
<tr id="element"></tr>
<tr>
<td>
<div class='input-group'>
<select name="sms_sel" class="form-control" style="margin: 10px" id="sms_sel">
<option value="username">UserName</option>
<option value="Password">Password</option>
<option value="APIKEY">APIKEY</option>
<option value="company">company</option>
<option value="Originator">Originator</option>
<option value="ServiceCode">ServiceCode</option>
<option value="sender">sender</option>
<option value="ServiceUrl">ServiceUrl</option>
<option value="ServicePassword">ServicePassword</option>
<option value="header">header</option>
<option value="OriginName">OriginName</option>
<option value="not">Not any of this</option>
</select>
</div>
</td>
<td>
<input type='text' class='form-control' id='vals' style="margin: 10px; float: right" name='vals' >
</td>
<td>
</td>
</tr>
</table>
</form>
<script>
$('#sms_sel').change(function(e) {
var name=$(this).val();
var value=$('#vals').val();
$('<tr><td width="17%"><label>'+name+'</label></td><td><input type="text" sms="sms" class="form-control ss" id="'+name+'" name="'+name+'" value="'+value+'" ></td><td></td><tr>').insertBefore($(this).closest('tr'));
});
</script>
In your jQuery, select only text fields. You can do that in multiple ways -
By directly accessing the tag $('input[text]');
By assigning a class to every text field and then accessing based on that class like `$('.some-class');
By assigning a data-* rule and then accessing it like $('input').data(YOUR_RULE);
After selecting your text fields, submit your form.
I have a table that lists all of the users invoices, and each invoice contains a pay button to allow them to pay the bill.
I currently have a loop that goes through each invoice and displays each invoice in its own row, and when a user goes to click on the pay button the JavaScript will show a selection box to use a saved card or a new card, if the user chooses a saved card then the JavaScript will show the other select box containing their saved cards, if the new card is chosen then the other input fields will be displayed, right now the showing and hiding part when selecting a saved card or new card ONLY works for the very first row in the table, no other rows work with that JavaScript, I'm sure its because JavaScript is grabbing that first id and stopping there. How can I do this correctly to where it grabs all of the ids and runs the code when the user chooses a saved card or new card on each invoice?
I created a JSFiddle to show my exact situation, can someone modify it to where it will work? I would really appreciate it!
https://jsfiddle.net/s0fbrcw6/1/
payments.blade.php
#if($payments)
#foreach($payments as $payment)
<tr>
<td>${{number_format(($payment->price /100), 2, '.', ' ')}}</td>
<td>{{$payment->product_name}}</td>
<td>{{$payment->created_at->toFormattedDateString()}}</td>
<td>{{$payment->created_at->addMonth()->toFormattedDateString()}}</td>
<td>{{$payment->reoccurring}}</td>
<td>{{$payment->status}}</td>
#if($payment->status == "Paid")
#else
<td>
<div class="add-payment-container">
<button class="toggle-add-payment mdl-button mdl-js-button mdl-js-ripple-effect pull-right btn-info">
#if($payment->reoccurring == "Yes")
Subscribe
#else
Pay Here
#endif
</button>
<div class="add-payment">
</br>
<form action="{{'/users/payment'}}" method="post"
id="checkout-form">
<input type="text" name="price" class="hidden"
value="{{$payment->price}}">
<input type="text" name="productName" class="hidden"
value="{{$payment->product_name}}">
<input type="text" name="paymentID" class="hidden"
value="{{$payment->id}}">
<input type="text" name="reoccurring" class="hidden"
value="{{$payment->reoccurring}}">
<div class="row">
<div class="col-sm-4">
<div id="paymentMethodDiv"
class="form-group label-floating">
{!! Form::label('paymentMethod', 'Payment Method') !!}
</br>
{!! Form::select('paymentMethod', ['Saved Card'=>'Saved Card','New Card'=>'New Card'], null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option', 'id' => 'paymentMethod'])!!}
</div>
</div>
<div class="col-sm-4">
<div id="savedCardsDiv" class="form-group label-floating" style="display: none;">
{!! Form::label('card', 'Previous Cards') !!}
</br>
{!! Form::select('card', $cardLast4, null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option', 'id' => 'savedCards'])!!}
</div>
</div>
<div class="col-md-4">
<div id="cardHolderNameDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Card Holder
Name</label>
<input type="text" id="card-name"
class="form-control">
</div>
</div>
<div class="col-md-4">
<div id="cardNumberDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Card Number</label>
<input type="text" id="card-number"
class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div id="expirationMonthDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Expiration
Month</label>
<input type="text" id="card-expiry-month"
class="form-control">
</div>
</div>
<div class="col-md-5">
<div id="expirationYearDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Expiration Year</label>
<input type="text" id="card-expiry-year"
class="form-control">
</div>
</div>
<div class="col-md-2">
<div id="cvcDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">CVC</label>
<input type="text" id="card-cvc"
class="form-control">
</div>
</div>
</div>
{{csrf_field()}}
<button type="submit" class="btn btn-primary pull-right">Make
Payment
</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</td>
#endif
</tr>
<script>
var paymentMethodSelect = document.getElementById('paymentMethod');
paymentMethodSelect.onchange = function () {
if (paymentMethodSelect.value == 'Saved Card') {
document.getElementById("savedCardsDiv").style.display = "block";
document.getElementById("cardHolderNameDiv").style.display = "none";
document.getElementById("cardNumberDiv").style.display = "none";
document.getElementById("expirationMonthDiv").style.display = "none";
document.getElementById("expirationYearDiv").style.display = "none";
document.getElementById("cvcDiv").style.display = "none";
} else if (paymentMethodSelect.value == 'New Card') {
document.getElementById("savedCardsDiv").style.display = "none";
document.getElementById("cardHolderNameDiv").style.display = "block";
document.getElementById("cardNumberDiv").style.display = "block";
document.getElementById("expirationMonthDiv").style.display = "block";
document.getElementById("expirationYearDiv").style.display = "block";
document.getElementById("cvcDiv").style.display = "block";
} else {
document.getElementById("savedCardsDiv").style.display = "none";
document.getElementById("cardHolderNameDiv").style.display = "none";
document.getElementById("cardNumberDiv").style.display = "none";
document.getElementById("expirationMonthDiv").style.display = "none";
document.getElementById("expirationYearDiv").style.display = "none";
document.getElementById("cvcDiv").style.display = "none";
}
};
</script>
Advice: use jQuery. For situations like this, it significantly simplifies the js function part of it.
jsFiddle Solution: https://jsfiddle.net/brednmuc/4/
Brief Description:
Move away from using HTML IDs for everything and just make attributes that make the most sense for your web application. This methodology allows you to practically define an unlimited number of attributes that you can key certain behaviors off of. This also prevents conflicts with libraries that you may use / integrate with your project.
Code:
jQuery:
$(document).ready(function() {
$("select[name='paymentMethod']").change(function() {
var dropdownValue = $(this).val();
var transactionId = $(this).parent().attr('transactionId');
switch (dropdownValue) {
case 'Saved Card':
$("td[transactionId='" + transactionId + "'] div.savedCardsDiv").show();
break;
case 'New Card':
$("td[transactionId='" + transactionId + "'] div.savedCardsDiv").hide();
break;
default:
$("td[transactionId='" + transactionId + "'] div.savedCardsDiv").hide();
break;
};
});
});
HTML:
<table>
<tr>
<td transactionId="1">
<select name="paymentMethod" form="carform" class="paymentMethod">
<option value="">Select your option</option>
<option value="Saved Card">Saved Card</option>
<option value="New Card">New Card</option>
</select>
<div class="savedCardsDiv" style="display: none;">
<select name="savedCards" form="carform" class="savedCards">
<option value="">Select your option</option>
<option value="Saved Card">****4242</option>
<option value="New Card">****5423</option>
</select>
</div>
</td>
</tr>
<tr>
<td transactionId="2">
<select name="paymentMethod" form="carform" class="paymentMethod">
<option value="">Select your option</option>
<option value="Saved Card">Saved Card</option>
<option value="New Card">New Card</option>
</select>
<div class="savedCardsDiv" style="display: none;">
<select name="savedCards" form="carform" class="savedCards">
<option value="">Select your option</option>
<option value="Saved Card">****4242</option>
<option value="New Card">****5423</option>
</select>
</div>
</td>
</tr>
</table>
I am working on this form with several select elements with options Yes, No or Not applicable. It was required that whenever the user select yes option a separate date field appears next to it. I used HTML DOM document.getElementById("id").innerHTML for this date field. Everything went well but I was not able to pass the value of date to the form action page using POST method. Check this code:
<!-- javascript code -->
<script type="text/javascript">
function credit_check(name){
if(name=='YES')document.getElementById('div2').innerHTML='Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div2').innerHTML='';
}
function employment_check(name){
if(name=='YES')document.getElementById('div3').innerHTML='Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div3').innerHTML='';
}
</script>
</head>
<body>
<?php include("menu.inc"); ?>
<div id="main">
<table>
<form method="post" action="checkinfo.php">
<tr><td colspan=2><hr/><input type="hidden" name="consultant_id" value="<?php echo $consult_id; ?>"> </td>
</tr>
<tr align="center">
<td><b>Credit Check </b></td>
<td>
<select name="2" onchange="credit_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div2"> </div></td>
</tr>
<tr align="center">
<td><b>Employment Check :<font color='red'>*</font></b></td>
<td>
<select name="3" onchange="employment_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div3"> </div></td>
</tr>
</form>
</table>
Demo - Change function credit_check(name) to window.credit_check = function(name)
window.credit_check = function(name){
if(name=='YES') document.getElementById('div2').innerHTML='Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div2').innerHTML='';
}
window.employment_check = function (name){
if(name=='YES') document.getElementById('div3').innerHTML='Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div3').innerHTML='';
}
You're script wasn't loading properly,
Uncaught ReferenceError: credit_check is not defined in your console shows the error. The functions were not being defined. You can set your functions like above or reposition your code.
Put the inputs into the HTML at loading, then simply hide/show them.
<!-- javascript code -->
<script type="text/javascript">
function credit_check(name){
if(name=='YES')document.getElementById('div2').style.display = 'block';
else document.getElementById('div2').style.display = 'none';
}
function employment_check(name){
if(name=='YES')document.getElementById('div3').style.display = 'block';
else document.getElementById('div3').style.display = 'none';
}
</script>
</head>
<body>
<?php include("menu.inc"); ?>
<div id="main">
<table>
<form method="post" action="checkinfo.php">
<tr><td colspan=2><hr/><input type="hidden" name="consultant_id" value="<?php echo $consult_id; ?>"> </td>
</tr>
<tr align="center">
<td><b>Credit Check </b></td>
<td>
<select name="2" onchange="credit_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div2" style="display: none;">
Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />
</div></td>
</tr>
<tr align="center">
<td><b>Employment Check :<font color='red'>*</font></b></td>
<td>
<select name="3" onchange="employment_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div3" style="display: none;">
Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />
</div></td>
</tr>
</form>
</table>
It's also a good idea to check out jQuery, it makes this kind of stuff a lot easier to do.
Your code is already working. See http://jsfiddle.net/2wg4u6ut/
Make sure your JavaScript is in the head section of your document.
There were some minor issues in your formatting where the <form> tag belongs around the table.
You also were missing the submit button, but then it's already working.
I made a button which is showing and hiding div on click by using jQuery. But IE showing another extra div and rest of the browsers showing it properly.
<div class="hide-search-button">
<div class="l-f-w" id="locate">
<h1> Location </h1>
<input type="hidden" value="" id="loc_hidden"/>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><h1>State</h1></td>
<td> <select onChange="selectCity(this.options[this.selectedIndex].value)" name="state_name" id="state_name">
<option value="Choose">Choose</option>
<?php
//connect with database
$sqlCountry="select DISTINCT state from sheet1
order by state asc ";
$resCountry=mysql_query($sqlCountry);
$checkCountry=mysql_num_rows($resCountry);
// fetch all country
while($rowCountry=mysql_fetch_array($resCountry)){
?>
<option value="<?php echo $rowCountry['state']?>">
<?php echo $rowCountry['state']?>
</option>
<?php
}
?>
</select></td>
</tr>
<tr>
<td><h1>Region</h1></td>
<td><select id="region_name" name="region_name"
onchange="selectState(this.options[this.selectedIndex].value)">
<option value="Choose">Choose</option>
</select>
</td>
</tr>
<!--<tr>
<td><h1>Suburb</h1></td>
<td><select id="suburb_name" name="suburb_name">
<option value="Choose">Choose</option>
</select></td>
</tr>-->
<tr>
<td><h1>Pin Code</h1></td>
<td> <input type="text"value=" " name="pin" id="pin"></td>
</tr>
</table>
<input type="hidden" value="2" name="searchform" />
<script>
function span_go()
{
//var locate = document.getElementById("menuSelection").innerHTML;
var service = document.getElementById("sertype").innerHTML;
//document.getElementById("locatetext").value = locate;
document.getElementById("servicetext").value = service;
//alert (service);
}
</script>
<input type="hidden" value="" id="servicetext" name="servicetext"/>
<?php /*?><a tabindex="0" href="menuContent.html" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout"><div class="arrow_wrap"><span class="ui-icon ui-icon-triangle-1-s"></span> </div> <span id="menuSelection"> <?php echo $location ?></span></a><?php */?>
</div> <!-- location field wrapper ends here -->
<div class="service_type_wrap s-t-w">
<h1> Service Type </h1>
<select multiple="multiple" label="choose" style="margin-left:8px;" name="tex_value" id="worktype">
<option value="Long Day Care">Long Day Care</option>
<option value="Occasional Care">Occasional Care</option>
<option value="In Home Care">In Home Care</option>
<option value="Before School Care">Before School Care</option>
<option value="After School Care">After School Care</option>
<option value="Vacation">Vacation Care</option>
<option value="Special Care">Special Care</option>
<option value="Permanent / Contract">Permanent / Contract</option>
<option value="Part time">Part time</option>
</select>
</div> <!-- service type wrapper ends here -->
<div class="f-r-w" style="margin-left:10px;">
<h1> Filter Results </h1>
<select data-placeholder="<?php echo $sorting; ?>" class="chzn-select" style="width:200px;" tabindex="2"name="q_state" id="jobsort">
<option value="title">Sort by job title</option>
<option value="date">Sort by date</option>
</select>
</div> <!-- filter results wrapper ends here -->
<div class="go_button_wrap">
<input name="submit" type="submit" value="Go" id="custum_button" onclick="span_go();">
</div> <!-- go button ends here -->
</form>
</div>
JS:
$(document).ready(function() {
$("#button").toggle(function() {
//$(this).text('Hide Advance Search');
}, function() {
//$(this).text('Show Advance Search');
}).click(function(){
$(".hide-search-button").slideToggle("slow");
event.preventDefault();
});
});
Screenshot shown below:
Try to change click part of your code. You need to pass event object into the handler. In IE actually there is window.event object. Maybe it causes the issue:
.click(function(event) {
$(".hide-search-button").slideToggle("slow");
event.preventDefault();
});
Hi I have an HTML page which has a text box and a dropdown box. When the page is loading for the first time, then depending upon the value in the drop down(Selected) the text box needs to be enabled or disabled. I want to do this using javascript or jquery. I need a little help.
<table>
<tr>
<td class="td">
<input type="text" size="3" name="length21" value="0" disabled="disabled"/>
</td>
<td class="td">
<div class="type">
<select name="type1" id="field_type">
<option value="TEXT" SELECTED="">TEXT</option>
<option value="TEXTAREA" >TEXTAREA</option>
<option value="DROPDOWN" >DROPDOWN</option>
<option value="DATE" >DATE</option>
<option value="CHECKBOX" >CHECKBOX</option>
<option value="SEPARATOR" >SEPARATOR</option>
<option value="DATETIME" >DATETIME</option>
<option value="HIERARCHY" >HIERARCHY</option>
</select>
</div>
</td>
</tr>
<tr>
<td class="td">
<input type="text" size="3" name="length21" value="0" disabled="disabled"/>
</td>
<td class="td">
<div class="type">
<select name="type2" id="field_type">
<option value="TEXT" >TEXT</option>
<option value="TEXTAREA" >TEXTAREA</option>
<option value="DROPDOWN" SELECTED="">DROPDOWN</option>
<option value="DATE" >DATE</option>
<option value="CHECKBOX" >CHECKBOX</option>
<option value="SEPARATOR" >SEPARATOR</option>
<option value="DATETIME" >DATETIME</option>
<option value="HIERARCHY" >HIERARCHY</option>
</select>
</div>
</td>
</tr>
</table>
Now what I want is, when the page loads, for the row where the drop down is having TEXT selected, the text box will get enabled. But not for the other. I would really appreciate any kind of help.
In jQuery:
$(document).ready(function(){
$('select').on('change',function(){
if($('select').val() == "TEXT") {
$(this).parents('td').siblings('td').children('input').removeAttr('disabled');
}
});
});
Changed Scott's code a bit so that it works on your load:
$(document).ready(function() {
$('select').each(function() {
var comboBox = $(this);
checkValue(comboBox);
comboBox.on('change', function() {
checkValue(comboBox);
});
});
});
function checkValue(comboBox) {
if (comboBox.val() == "TEXT") {
comboBox.parents('td').siblings('td').children('input').removeAttr('disabled');
}
else {
comboBox.parents('td').siblings('td').children('input').attr('disabled','disabled');
}
}
Here's a fiddle btw: http://jsfiddle.net/BbStP/1