JQUERY: Change value from text input having a checkbox selected - javascript

I need to change the value of a text input only if a checkbox is selected. Both inputs (text and checkbox) have the same class:
<label for="text_to_apply">Write your text: </label>
<input type="text" id="text_to_apply" name="text_to_apply" value="">
<button type="button" id="btn_apply">Change</button>
<form id="theform">
<input type="text" value="1" id="one1" class="one"><input type="checkbox" id="one1_" class="one"><br>
<input type="text" value="1" id="one2" class="one"><input type="checkbox" id="one2_" class="one"><br>
<input type="text" value="1" id="one3" class="one"><input type="checkbox" id="one3_" class="one"><br>
<input type="text" value="1" id="one4" class="one"><input type="checkbox" id="one4_" class="one"><br>
<input type="text" value="2" id="two1" class="two"><input type="checkbox" id="two1_" class="two"><br>
</form>
</div>
<script>
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
if ($('#theform').find('.one input:checked')) {
$('#theform').find('.one:text').attr('value', mytext);
}
});
</script>
</body>
I am running out of ideas. Please Help!
Thanks!!

If I got your question right - it will look like this:
$('#btn_apply').click(function() {
if ($('#yourCheckboxId').is(':checked')){
$('#inputId').val('some text you want');
}
});
Here is fiddle http://jsfiddle.net/Goodluck/2XBcK/

Try
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
$('#theform').find('input:checked').each(function(){
$(this).prev().val(mytext);
});
});
DEMO

There is no :text in jQuery that I'm aware of. Presuming your HTML stays the same, you can use the .prev() method to target the input before each input:checked.
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
if ($('#theform').find('input:checked')) {
$('#theform').find('input:checked').prev('input').attr('value', mytext);
}
});
Fiddle: http://jsfiddle.net/willthemoor/5qmH8/

Related

How to add the checked input box in input text whether onload or onclick using jquery

Im getting the result now, but what I want is to Also get the checked input box and put into the input text not just only using on change event in jQuery but also on page loads. As you can see, one of the checkboxes below has been checked but not putting into the input text. Please see my code below:
$(document).ready(function(){
$checks = $(":checkbox");
$checks.on('change', function() {
var string = $checks.filter(":checked").map(function(i,v){
return this.value;
}).get().join(",");
$('#field_results').val(string);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiple">
<input type="text" id="field_results"/><br>
<input type="checkbox" value="1" checked>1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3">3
</div>
<div class="multiple">
<input type="text" id="field_results"/><br>
<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2" checked>2<br>
<input type="checkbox" value="3">3
</div>
You can do this easily like:
$(document).ready(function() {
$checks = $(":checkbox");
$checks.on('change', setResults);
function setResults() {
var string = $checks.filter(":checked").map(function(i, v) {
return this.value;
}).get().join(",");
$('#field_results').val(string);
}
setResults();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="field_results" /><br>
<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2" checked>2<br>
<input type="checkbox" value="3" checked>3
You should set values into input at first, try this:
$(document).ready(function() {
$checks = $(":checkbox");
$('#field_results').val(getCheckedValues());
$checks.on('change', function(){
$('#field_results').val(getCheckedValues());
});
});
function getCheckedValues(){
$checks = $(":checkbox");
var valuse = $checks.filter(":checked").map(function(i, v) {
return this.value;
}).get().join(",");
return valuse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="field_results"/><br>
<input type="checkbox" value="1" checked>1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3" checked>3<br>
<input type="checkbox" value="4">4<br>
<input type="checkbox" value="5" checked>5<br>
The easiest way to do it You can use .trigger() to set default value
$checks.trigger('change');

value doesn't change when I'm trying to toggling the checkbox

I have this code, when im trying to toggle the checkbox (I can view the changes in inspect), the value of the checkbox doesnt change
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1" value=""/>
</div>
checkout with value
if ($(this).prop("checked") == true) {
$("h2 span").text(checkBoxval);
}
$(document).ready(function() {
var $checkBox = $("[type='checkbox']");
var checkBoxval = $checkBox.val();
$("h2 span").text(checkBoxval);
$checkBox.on("click", function() {
if ($(this).prop("checked") == true) {
$("h2").show();
$("h2 span").text(checkBoxval);
} else {
$("h2").hide();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="My Checkbox value" checked="true">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1" value="" />
<h2>Your value is <span></span></h2>
</div>
Well, we can't see you js code but, you SHOULDN'T duplicate an id attribute like you did with NCONF_RSN1
You given the same id to both input element, give two different id. Then it will work
Figured out my problem, added "_" on hidden id
Instead of id="NCONF_RSN1" i used id="NCONF_RSN1_".
i just tried it, i dont know how it worked.
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1_" value=""/>
</div>

add checkbox on input type number change

I would like to know how to add checkboxes on input type number change.
By default I have :
HTML CODE
<label for checkbox_number>Number of checkboxes :</label>
<input id="checkbox_number" name="checkbox_number" type="number" size="1" maxlength="1" value="1" onkeydown="change_cb()"/>
<input id="checkbox1" type="checkbox" name="checkbox[]" value="cb1">
If I change my checkbox number to 2, I would like javascript/ajax add
<input id="checkbox2" type="checkbox" name="checkbox[]" value="cb2">
Same as if I change my change number to 1, it has to remove one checkbox.
I already did same thing but with table (add one row or remove one row) but here i don't know how to add new element (on my first script I don't add new table, just new row)...
Need help to write my JS function change_cb()
EDIT TO GIVE YOU MY ANSWER
I find how to do this with DADE help (thank you DADE) :
HTML CODE (same)
<label for="cb_number">How many checkboxes ?</label>
<input id="cb_number" name="cb_number" type="number" size="1" maxlength="1" value="1">
<div class="my_cb_result"></div>
jQuery CODE
$(window).ready(function() {
$('#cb_number').on('keyup mouseup', function() {
var number = parseInt($(this).val());
$('input[type="checkbox"]').remove();
$('label[class="to_del"]').remove();
for (var i=1;i<=number;i++) {
var data = '<label for="checkbox" class="to_del">Label of my checkbox</label><input id="checkbox'+i+'" type="checkbox" name="checkbox[]" value="'+i+'">';
}
$('.my_cb_result').append(data);
});
});
JSFiddle with comments
Try this:
var ele = '<input id="checkbox2" type="checkbox" name="checkbox[]" value="cb2">';
document.getElementById("yourElementID").appendChild(ele);
HTML:
<label for checkbox_number>Number of checkboxes :</label>
<input id="checkbox_number" name="checkbox_number" type="number" size="1" maxlength="1" value="0">
<div class="inputs"></div>
JS:
$('#checkbox_number').on('keyup mouseup', function() {
var number = parseInt($(this).val());
$('input[type="checkbox"]').remove();
for (var i=1;i<=number;i++) {
var data = '<input id="checkbox'+i+'" type="checkbox" name="checkbox[]" value="cb'+i+'">';
$('.inputs').append(data);
}
});
JSFiddle with comments
Do you mean if checkbox_number's value is set to "2" that you'd like to render the second checkbox?
If so, you should use onblur or similar on checkbox_number to run a function that will render the new one via a getElementById and appendChild.
IE:
<script type="text/javascript">
function change_cb() {
var secondCheckbox = '<input id="checkbox_number2" name="checkbox_number" type="number" size="1" maxlength="1" value="1" />";
document.getElementById("yourForm").appendChild(secondCheckBox);
}
</script>
<div id="yourForm">
<label for checkbox_number>Number of checkboxes :</label>
<input id="checkbox_number" name="checkbox_number" type="number" size="1" maxlength="1" value="1" onblur="change_cb()"/>
<input id="checkbox1" type="checkbox" name="checkbox[]" value="cb1">
</div>
edit: From what you're posting, you shouldn't need Ajax, by the way.

disable select form if radio is checked

How can I disable a select form dropdown if a radio button is selected?
I would like the #preference form to be disabled if the user selects the #no radio button and it to be enabled again if the user selects #yes or #maybe.
This is my form code -
<form name="xmas" id="xmas" action="send_mail.php" method="post">
<input type="radio" name="choice" value="Yes" id="yes"/><label for="yes">Yes - I would like to take up the offer</label>
<input type="radio" name="choice" value="No" id="no"/><label for="no">No - I'm not ready to order yet</label>
<input type="radio" name="choice" value="Maybe" id="maybe"/><label for="maybe">Maybe - I'm not sure, would you please give me a call</label><br />
<div class="secondlineform">
<input type="text" name="name" class="textfield" value="Name" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/>
<input type="text" name="email" class="textfield" value="Email" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/>
<input type="text" name="company" class="textfield" value="Company" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/>
<select class="dropselect" name="preference" label="Preference" id="preference">
<option selected="selected" disabled="disabled" value="Preference">Preference</option>
<option value="Alcohol Package">Alcohol Package</option>
<option value="Gift Card Package">Gift Card Package</option>
</select>
<input type="submit" value="" name="submit" id="submit" class="submit"/>
</div>
</form>
And this is my script code -
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
​
var update_select = function () {
if ($('#no').is(':checked')) {
$('#preference').attr('disabled', "disabled");
}
else {
$("#preference").removeAttr("disabled");
}
};
$(update_select);
$('#no').change(update_select);
</script>
Thanks very much for any answers! I've been researching this for ages and all the solutions I find don't seem to solve my issue.
you are adding change event for only No radio, change it to :
$("input[name='choice']").change(update_select);
Demo:: jsFiddle
$('input[type=radio]').change(update_select);​
You need to apply the update_select function to the rest of the radio button,like this
var update_select = function () {
$('#preference').attr('disabled', $('#no').is(':checked'));
};
$('#no').change(update_select);
$('#yes').change(update_select);
$('#maybe').change(update_select);
Here is the fiddle: http://jsfiddle.net/QXkhM/
Wrap your radio button list by an ul and give it an ID.
For example:
<ul id="offer">
<input type="radio" name="choice" value="Yes" id="yes"/><label for="yes">Yes - I would like to take up the offer</label>
<input type="radio" name="choice" value="No" id="no"/><label for="no">No - I'm not ready to order yet</label>
<input type="radio" name="choice" value="Maybe" id="maybe"/><label for="maybe">Maybe - I'm not sure, would you please give me a cal
l</label><br />
</ul>
var update_select = function () {
if ($('#no').is(':checked')) {
$('#preference').attr('disabled', "disabled");
}
else {
$("#preference").removeAttr("disabled");
}
};
$(update_select);
$('#offer').change(update_select);
And it will work

Checking label text and verifying that input field tied to it has at least x amount characters

I'm super new to this language. I have the ability to check for the label sting but I want to make sure that the input field next to it has at least 6 digits (numerical if possible)
$(document).ready(function(){
$("label:contains('6 digit')") //i get lost here
});
Markup:
<form>
<label>Test</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<label>6 digit</label><input value="1" type="text" class="check">
<label>6 digit</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<input type="submit">
</form>
Tim Bolton got it almost right, though he is checking if the value is lower than 5, he is not testing the number of digits. i would do it like this:
function isValidForm(){
var labels = $('form labels');
$(labels).each(function(){
var inputText = $(this).next();
if($(inputText).val().length < 6 || isNaN($(inputText).val())) {
$(inputText).css('color', 'red'); // you can do whatever you want to show the field is not properly filled
return false;
}
})
return true;
}
then, on form submission, all you have to do is:
$('form').submit(function(){
if(!isValidForm()){
alert('please fix the errors');
return false;
}
});
You're going to want to set the for attribute on your label's. You'll also want to set an ID for the inputs for the label to recognize. That should arm you with the proper hooks to do what you want (or at least be set up appropriately).
With your current setup, try:
<script>
$(document).ready(function(){
$('#submit').click(function(event) {
event.preventDefault();
$('label').each(function() {
var len = $(this).next().length;
if(len < 5) {
alert('Too Short!');
} else { $('#form').submit();
});
})
});
</script>
<form id="form">
<label>Test</label><input value="asdfassd1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<label>6 digit</label><input value="1" type="text" class="check">
<label>6 digit</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<input type="submit" id="submit">
</form>
The purpose of a label is to be associated with a form-related element via an id:
<label for="digits">Enter Digits</label>
<input type="text" id="digits" />
See documentation for label. Given that all your inputs should have an id if they have a label, try the following:
$('#inputID').each(function() {
if (!$(this).val().match(/^\d{6,}$/)) {
alert('incorrect formatting!');
}
});
which tests the value of the selected input against a regular expression for "all digits, at least six".
jsFiddle demo
I think regular expressions are the most concise and portable way of validating simple inputs.
If at all possible, find an easy way to distinguish the fields you need to validate, like Tim Bolton suggested with ID attributes on the elements, or perhaps by CSS Classes like below (i.e., the "needs6" class):
<form>
<label>Test</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<label>6 digit</label><input value="1" type="text" class="check needs6">
<label>6 digit</label><input value="1" type="text" class="check needs6">
<label>Test</label><input value="1" type="text" class="check">
<input type="submit" />
</form>
Then your jQuery selector becomes much simpler (i.e., $("input.needs6")).
Once you have your inputs selected, there are many ways to validate them.
Personally, I would use the following method:
$(document).ready(function() {
var testFor6 = function () {
var allHave6 = true;
$("input.needs6").each(function () {
var input = $(this);
var value = input.val();
if (!value.match(/\d{6}/g)) {
allHave6 = false;
input.addClass('doesNotHave6');
} else {
input.removeClass('doesNotHave6');
}
});
return allHave6;
};
$('input[type="submit"]').click(function (e) {
var allHave6 = testFor6();
if (!allHave6) {
e.preventDefault(); //Cancel event-bubbling.
}
return allHave6; //Prevent form submission when false.
});
});
If you want to see this in action, pop it into http://jsfiddle.net/ and test it, although you may want to combine this with some sample CSS classes to see it working. Samples below.
.needs6 {background-color: yellow;}
.doesNotHave6 {background-color: red;}
Hope this helps,
Pete
Addendum:
Do you mean spaces...
<form>
<label>Test</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<!-- here? --><label><!-- here? -->6 digit</label><!-- here? --><input value="1" type="text" class="check needs6" value="<!-- here? -->">
<label>6 digit</label><input value="1" type="text" class="check needs6">
<label>Test</label><input value="1" type="text" class="check">
<input type="submit" />
</form>
Please clarify.
Certainly!
Simply change the input loop function to any portion of the following...
$("input.needs6").each(function () {
var input = $(this);
var value = input.val();
//You can use this to trim.
var trimmedValue = value.replace(/\s\s*$/, '').replace(/^\s\s*/, '');
//You can use this to find leading whitespace.
var hasLeadingSpaces = value.match(/^\s\s*/, '');
//You can use this to find trailing whitespace.
var hasTrailingSpaces = value.match(/\s\s*$/, '');
if (hasLeadingSpaces) {
//Do something
}
if (hasTrailingSpaces) {
//Do something
}
//Check original value
if (!value.match(/\d{6}/g)) {
allHave6 = false;
input.addClass('doesNotHave6');
} else {
input.removeClass('doesNotHave6');
}
//Check trimmed value
if (!trimmedValue.match(/\d{6}/g)) {
allHave6 = false;
input.addClass('doesNotHave6');
} else {
input.removeClass('doesNotHave6');
}
});

Categories