jquery function to enable disable button - javascript

can anyone help me with my code...i want to do is to to enable disable button if the inputs textbox are not empty but in my current code its not working.
i have a selectbox that if i select from it the textbox will automatically filled but if i select empty the textboxes will be empty.
my problem is my script to enable disable button is not working.
output in my browser:
http://s38.photobucket.com/user/eloginko/media/hey_zps31f4cd60.png.html
html code:
<form method="post" action="index.php">
Caraga Region: <select name="region" id="region" onChange="here()"></select>
Municipalities: <select name="town" id="town" onChange="here()"></select>
Unique ID: <select name="uniq_id" id="uniq_id" onChange="here()"></select>
Position: <select name="position" id="position" onChange="here()"></select> <br />
Salary Grade: <select name="salary_grade" id="salary_grade" onChange="here()"></select>
Salary: <select name="salary" id="salary" onChange="here()"></select> <br />
<br />
<br />
Transfer Selected Text to textbox:<br />
<input id="t_region" name="t_region" type="text" ><br />
<input id="t_town" name="t_town" type="text" ><br />
<input id="t_uniq_id" name="t_uniq_id" type="text" ><br />
<input id="t_position" name="t_position" type="text" ><br />
<input id="t_salary_grade" name="t_salary_grade" type="text" ><br />
<input id="t_salary" name="t_salary" type="text" ><br /><br />
List of Applicants:<br />
<input readonly type="text" class="number" name="aic1" id="aic1" /><input class="number" placeholder=" 1.)" name="name1" type="text" required id="name1" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic2" id="aic2" /><input class="number" placeholder=" 2.)" name="name1" type="text" required id="name2" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic3" id="aic3" /><input class="number" placeholder=" 3.)" name="name1" type="text" required id="name3" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic4" id="aic4" /><input class="number" placeholder=" 4.)" name="name1" type="text" required id="name4" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic5" id="aic5" /><input class="number" placeholder=" 5.)" name="name1" type="text" required id="name5" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic6" id="aic6" /><input class="number" placeholder=" 6.)" name="name1" type="text" required id="name6" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic7" id="aic7" /><input class="number" placeholder=" 7.)" name="name1" type="text" required id="name7" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic8" id="aic8" /><input class="number" placeholder=" 8.)" name="name1" type="text" required id="name8" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic9" id="aic9" /><input class="number" placeholder=" 9.)" name="name1" type="text" required id="name9" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic10" id="aic10" /><input class="number" placeholder="10.)" name="name1" type="text" required id="name10" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic11" id="aic11" /><input class="number" placeholder="11.)" name="name1" type="text" required id="name11" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic12" id="aic12" /><input class="number" placeholder="12.)" name="name1" type="text" required id="name12" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic13" id="aic13" /><input class="number" placeholder="13.)" name="name1" type="text" required id="name13" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic14" id="aic14" /><input class="number" placeholder="14.)" name="name1" type="text" required id="name14" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic15" id="aic15" /><input class="number" placeholder="15.)" name="name1" type="text" required id="name15" readonly style="width:50%" /><br />
<input type="submit" name="send" id="send" disabled />
</form>
script to enable button if textbox is empty: note its not working.
<script type="text/javascript">
$(function() {
$('.number').on('input', function () {
$('#send').prop("disabled", !$.trim(this.value));
});
$('.number').each(function() {
if ($.trim(this.value).length) {
$('#send').prop('disabled', false);
return;
}
});
});
</script>

The input event will not fire if you set the value of the text box with code. In your change event, after you populate a text box, you should check if all the text boxes have a value, and then enable/disable the button.
function here() {
// ... current code that populates the text boxes ...
var disableBtn = false;
// check if all text boxes have a value
$('.number').each(function(i,el) {
if (!$.trim($(el).val()).length) {
disableBtn = true;
}
});
$('#send').prop("disabled", disableBtn);
}

Your .on event won't fire when you populate the text boxes outside of the browser. If you are setting the text boxes with code like this upon drop down selection (can't see that part of your code):
$('.number').val('foo')
Then you need to add a trigger event like this:
$('.number').val('foo').trigger('input');
By adding the trigger when you populate the inputs your existing code should work. See this slightly altered example of your code. Be sure to run it after it loads for the first time.

Try:
$('#send').removeAttr('disabled');
Anyway, you are talking about "unable" the button, but I think you meant "enable" which means the opossite to disabled, am I correct?

Related

How to change a input type hidden value of a selected radio button

I have 5 radio buttons in one form and 5 input type hidden values corresponding to each radio button. By default, the value of radio buttons and hidden values are 0. Now, I want to change the selected radio button value and its corresponding hidden value to 1. Also, if I re-change the selected radio button then it should make the old selected radio button value and corresponding hidden value to 0 and make the newly selected radio button value and its corresponding button value to 1. I'm able to change the value of selected to radio button and its corresponding hidden value to 1, but if I re-select to another radio button it's not changing the old hidden value to 0 and new hidden value to 1.
$('input[type=radio][name=correctanswer]').on('change', function() {
if ($(this).prop('checked', true)) {
$(this).val('1');
// $('#correct').val($(this).val());
}
$('input:radio').each(function() {
if($(this).is(':checked')) {
$(this).val('1');
// $('#correct').val($(this).val());
}
else {
$(this).val('0');
// $('#correct').val($(this).val());
}
});
$('input:hidden').each(function() {
if($('input[type=radio][name=correctanswer]').is(':checked')) {
// $(this).val('1');
$('#correct').val('1');
}
else {
$(this).val('0');
$('#correct').val('0');
}
});
});
<form action="#" th:action="#{/saveQuestionAnswer}" th:object="${question}" method="post">
<div class="form-group">
<label for="question" class="control-label">Question</label>
<textarea type="text" name="question" cols="40" rows="5" th:name="question" placeholder="question" class="form-control"></textarea>
</div>
<div class="form-group">
<input class="form-control-input" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="30" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 1" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 2" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 3" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 4" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 5" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>
You can loop through your radio buttons using each loop then use .closest() to get the closest div to that radio and if that radio is checked assign value to input-box either1 or 0.
Demo Code :
$('input[type=radio][name=correctanswer]').on('change', function() {
//loop through each radio
$('input:radio').each(function() {
//if checked
if ($(this).is(':checked')) {
//get closest div with class=form-group and add value to input
$(this).closest(".form-group").find("input[name=correct]").val('1');
} else {
//add 0
$(this).closest(".form-group").find("input[name=correct]").val('0');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" th:action="#{/saveQuestionAnswer}" th:object="${question}" method="post">
<div class="form-group">
<label for="question" class="control-label">Question</label>
<textarea type="text" name="question" cols="40" rows="5" th:name="question" placeholder="question" class="form-control"></textarea>
</div>
<div class="form-group">
<input class="form-control-input" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="30" class="form-control" name="options" width="50"
value="" th:name="options" placeholder="Option 1" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 2" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 3" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 4" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 5" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>

How to link webform to Bronto Database list

I have an old Html form already hooked up to Bronto already:
<div id="mc_embed_signup"><form id="lunar-form"><input name="fid" type="hidden" value="3yuzy87x8gjdf73zq9p6lav86dfdw" />
<input name="sid" type="hidden" value="01c3cd9e15ec122d6bada9aeba8dbe44" />
<input name="delid" type="hidden" value="" />
<input name="subid" type="hidden" value="" />
<input name="td" type="hidden" value="" />
<input name="formtype" type="hidden" value="addcontact" />
<input id="field_361909" class="hidden field" name="67765[361909]" type="hidden" value="Weekly" />
<input id="field_361796" class="hidden field" name="67746[361796]" type="hidden" value="Hair Shaman Lunar" />
<script type="text/javascript">
var fieldMaps = {};
</script>
<fieldset id="popupfieldset">
<div class="mc-field-group-email">
<input id="mce-EMAIL" class="text field fb-email" title="7 characters minimum" autocomplete="off" name="74662" pattern=".{7,}" required="" type="email" value="" placeholder="Email" />
i want to add another input for first name, how do I make sure it connects to the bronto database correctly?

number increment button

I have an existing html form which use array to store multiple row values. So I do not have a specific name for the same field for different row. In the PHP page i match the row according to the index.
In the form below, how do I make the button + and - to increase and decrease the value of the quantity of the specific row?
ROW 1
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>`
ROW 2
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>
ROW 3
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>
In my opinion you first should to numerate items:
<input type="text" name="product[]" />
<input id="price-1" type="text" name="price[]" value="" onChange="updatePrice(1)" /> <!-- row number -->
<input id="qty-1" type="text" name="quantity[]" value="" onChange="updatePrice(1)" />
<input type="button" onclick="inc('qty-1')" value="+"/>
<input type="button" onclick="dec('qty-1')" value="-"/>
Then use javascript to manipulate items:
<script>
function inc(id) {
stepQty(id, +1);
}
function dec(id) {
stepQty(id, -1);
}
function stepQty(id, step) {
var value = $('#'+id).val();
$('#'+id).val(value + step);
}
function updatePrice(id) {
var a = $('#price-'+id).val() || 0;
var b = $('#qty-'+id).val() || 0;
$('#'+id).val(a*b);
}
</script>

only first form is checked by jQuery

i have one form on my page. so i want to check each input with corresponding button. so i wrote smth like this and it only checks first input even if i click on second inputs button.
<form target="myFrame" method="post" id="addProduct">
<fieldset>
<input type="hidden" name="iProductAdd" value="6" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[6]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
<fieldset>
<input type="hidden" name="iProductAdd" value="7" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[7]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
<fieldset>
<input type="hidden" name="iProductAdd" value="4" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[4]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
</form>
and i have jQuery Code:
$(document).ready(function(){
$("form").submit(function(){
// Get the Login Name value and trim it
var name = $.trim($('.quantity').val());
// Check if empty of not
if (name === '') {
$("#addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-red.png')");
return false;
} else {
$('input[type="submit"]').each(function(){
$("#addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-green.png')");
});
}
});
});
Your problem is that you are using ids as it were classes. An id should be unique in a document. So defining multiple objects with the same id is an error. And all functions will apply only the first they encounter. To do what you want, you have to use classes, so change your code in this way:
$(".addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-green.png')");
To look for all elements of that class.

get id from radio input by clicking a link (siblings?)

so i have a list of addresses each with edit links and i want to grab the ID of the input within the list item
<li class="last">
<div class="checkout-select-address"><input type="radio" name="checkout_selected_address" id="checkout_selected_address_3" value="" /></div>
<div class="checkout-select-address-details">
<p><label for="checkout_selected_address_3">(Mothers)</label> Edit Address</p>
<input type="hidden" id="checkout_selected_address_3_name" value="" />
<input type="hidden" id="checkout_selected_address_3_title" value="" />
<input type="hidden" id="checkout_selected_address_3_first_name" value="" />
<input type="hidden" id="checkout_selected_address_3_last_name" value="" />
<input type="hidden" id="checkout_selected_address_3_address_line_1" value="" />
<input type="hidden" id="checkout_selected_address_3_address_line_2" value="" />
<input type="hidden" id="checkout_selected_address_3_address_line_3" value="" />
<input type="hidden" id="checkout_selected_address_3_town_city" value="" />
<input type="hidden" id="checkout_selected_address_3_county" value="" />
<input type="hidden" id="checkout_selected_address_3_postcode" value="" />
<input type="hidden" id="checkout_selected_address_3_country" value="" />
</div>
<div class="clear"></div>
so clicking on the link with class "edit-link" it will get the ID for the radio input within the li
Thanks in advance
try this :
$(".edit-link").click(function(){
alert($(this).closest("li").find("input[type=radio]").attr("id"));
});
demo : http://jsfiddle.net/ZABBS/

Categories

Resources