Preselect of value on input - javascript

I want ask you for help. I have form, where I change id by check-boxes:
<input id="SP_sid" type="hidden" name="sid" value="" />
<!--radio-->
<input name="sid_id" type="radio" value="1">One</input>
<input name="sid_id" type="radio" value="2">Two</input>
<!--script-->
<script>
jQuery('input[name="sid_id"]').click(function() {
jQuery('#SP_sid').val(this.value);
});
</script>
but I need to have value of sid from beginning pre-set to "1".
If I put "1" to value of sid, I am not able to change it by script to "2".
Is there any easy solution to get it work like this?

You can try with:
jQuery('input[name="sid_id"]').change(function() {
jQuery('#SP_sid').val(jQuery(this).val());
});

Related

Is it possible to assign value of text-field to radio button

I am providing multiple check-box and radio button when i enter any value in text field than the same value will assign to radio button and How it is possible using jQuery. Below is the image for reference. I am storing Question and multiple answer and i am going to store true answer out of them like shown in image.
$data = array();
for($i=0,$j=1;$i<count($_REQUEST['quiz_options']);$i++,$j++)
{
$data["quiz_Options".$j] = $_REQUEST['quiz_options'][$i];
}
$data["quiz_Id"] = $Quiz_ID;
$data["quiz_Correct_Answer"] = $_REQUEST['quiz_opt'];
$quiz->insertOptions($data,'quizoptions');
<input class="col-md-4" type="text" name="quiz_options[]" value=""/>
<input type="radio" name="quiz_opt[]" value=""/>
//Here I want to assign my textfield value to the radio button when i write something in my text field.
Please see the example here
You could attach a keydown event to the the textbox and update the value of the radiobutton.
something like this(pseudocode):
$('#textboxId').on('keydown',function(){
$('#radiobuttonId').val($(this).value);
});
Maybe you can use a data attributes (HTML5)
Example
:)
You have to on blur or onchange and should use one class for all dynamic textbox creation. try this code
<input name="quiz_options[]" class ="changesNo1" value="" />
<input name="quiz_options[]" class ="changesNo1" value="" />
<input name="quiz_options[]" class ="changesNo1" value="" />
<input type=radio value="" name="quiz_opt[]">
<input type=radio value="" name="quiz_opt[]">
<input type=radio value="" name="quiz_opt[]">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var test_arr = $("input[name='quiz_options[]']");
$(document).on('change keyup blur','.changesNo1',function(){
$.each(test_arr, function(i, item) {
$("input[name='quiz_opt[]']").val($(item).val());
var d=$("input[name='quiz_opt[]']").val(); // your reference
//alert(d); // This alert for your reference
});
});
</script>

Using isset from a name of an input

I am not sure if I am going about this correctly. I have a set of checkbox inputs. If someone selects the last check box all_users_check, I want a new form to appear where I will be listing all of the users in a drop down (haven't added the drop down yet). I thought I could do this by using the name of the input, but I am mistaken apparently as I am getting this error..
How else could I structure what I am doing so that if someone checks that option the new form displays?
<div class="user_dropdown">
<form action="">
<input type="checkbox" name="spectator_check" value=""> Spectators<br>
<input type="checkbox" name="member_check" value="" checked> Team Members<br>
<input type="checkbox" name="commissioner_check" value="" checked> Commissioner(s)<br>
<label for="all_users_check">
<input type="checkbox" name="all_users_check" value="" checked> Individual User<br>
</label>
</form>
</div>
<script>
$(".user_dropdown").hide();
$(".all_users_check").click(function() {
if($(this).is(":checked")) {
$(".user_dropdown").show();
} else {
$(".user_dropdown").hide();
}
});
</script>
This is how the page looks on load. Those fields are already checked for some reason.
Issues in your code.
.all_users_check that is looking for a class. Your element doesn't have a class so this isn't found. You can use a different selector to use the name attribute, https://api.jquery.com/attribute-equals-selector/.
This $(".user_dropdown").hide(); hides your whole form. You might want to move around your divs, or remove that altogether.
The checked attribute checks the field it is on. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
Use the checked attribute to indicate whether this item is selected
<div class="user_dropdown">
<form>
<input type="checkbox" name="spectator_check" value=""> Spectators<br>
<input type="checkbox" name="member_check" value=""> Team Members<br>
<input type="checkbox" name="commissioner_check" value=""> Commissioner(s)<br>
<label for="all_users_check">
<input type="checkbox" name="all_users_check" value=""> Individual User<br>
</label>
</form>
</div>
<script>
//$(".user_dropdown").hide();
$("input[name='all_users_check']").click(function() {
if($(this).is(":checked")) {
$(".user_dropdown").show();
} else {
$(".user_dropdown").hide();
}
});
</script>
isset is a language construct and can't accept anything other than a variable as indicated by this warning on the linked to manual page:
Warning isset() only works with variables as passing anything else will result in a parse error.
You are not passing in a variable to the isset function, you are passing in a constant value, basically an array with a single string all_users_check. This is not a variable because you are not assigning it to a variable name. Try this instead:
if(isset($_POST['all_users_check']))
Here the variable being passed in is the superglobal $_POST, and you are checking to see if the index all_users_check is set inside of that array.
Update
To check if an input is empty or not via javascript, take a look at this question.
Try using this script, you have set the state of check boxes as checked by default.
<div class="user_dropdown">
<form action="">
<input type="checkbox" name="spectator_check" value=""> Spectators<br>
<input type="checkbox" name="member_check" value=""> Team Members<br><!-- removed 'checked' from this line -->
<input type="checkbox" name="commissioner_check" value=""> Commissioner(s)<br><!-- removed 'checked' from this line -->
<label for="all_users_check">
<input type="checkbox" name="all_users_check" value="" > Individual User<br> <!-- removed 'checked' from this line -->
</label>
</form>
</div>
<script>
$(".user_dropdown").hide();
$(".all_users_check").click(function() {
if($(this).is(":checked")) {
$(".user_dropdown").show();
} else {
$(".user_dropdown").hide();
}
});
</script>
For the other issue of showing the hidden section again, try whether class all_users_check is visible to click.

Need to disable a checkbox in JSP where checkbox name is same as hidden field

I have a checkbox and a hidden input type having same name. I need to enable/disable checkbox base on some condition. How can i do that ? If I am trying to disable it by using checkbox name it is failing because it is not able to identify whether I want to diasable hidden field or checkbox.
Please suggest any solution for this.
try this.
<!DOCTYPE html>
<html>
<head>
<script>
function getElements() {
var x=document.getElementsByName("x");
if(x.length == 2) {
alert("Number of 'X' is " + x.length);
document.getElementsByName("x")[1].disabled=true ;
}
}
</script>
</head>
<body>
<input name="x" type="hidden" value="1">
<input name="x" type="text" value="1">
<input type="button" onclick="getElements()" value="How many elements named 'x'?">
</body>
</html>
If you insist to use name instead of of an unique id
By assuming your tag order with same name in your html is looked something like below:
<input type="checkbox" name="a">
<input type = "hidden" name="a">
You can do something like this:
document.getElementsByName('a')[0].disabled = true;

What value passes from a form with checkbox to the java script

I take a form and wants value of checkbox.
such as:
<form method="post" onSubmit="return nameempty()">
<input name="checkn1" id="check1" type="checkbox" />
<input name="checkn2" id="check2" type="checkbox" />
<input type="submit" value="submit">
</form>
Now I want to know the values of checkbox when it is selected, and also when not selected.
Now I write javascript, and get that each checkbox has value "on" whether it is selected or not.
<script>
function nameempty()
{
alert(document.getElementById('check1').value);
alert(document.getElementById('check2').value);
}
</script>
How could I get 'on' when it is selected and anything else when not selected.
use checked instead of value which will return true if the checkbox is checked or it will return false
<script>
function nameempty()
{
alert(document.getElementById('check1').checked);
alert(document.getElementById('check2').checked);
}
</script>
One way to get the value of a 'checked' check box which includes the check if 'checked'
var check1value = document.querySelector('#check1:checked').value;
In the html you are missing a value attribute (if checked)
<input name="checkn1" id="check1" value="value-here" type="checkbox" />

display data in a textbox when checkbox is checked

I have three text boxes having id text1, text2, text3 and one checkbox having id check. I am displaying something in first textbox let's say 10. Now if i will check checkbox then automatically "20" will be displayed in the second textbox. Third textbox remains same as it is. If I will display something in 1st and 2nd textboxes, now if i will check checkbox then same "20" will be displayed in 3rd textbox. After checked if in anytime i will uncheck the checkbox then value "20" will also be removed from the textbox(either 2nd or 3rd) Any idea please? Please be easy with me
index.jsp
<input type="checkbox" id="check"/>
<input type="text" id="text1" value="10"/>
<input type="text" id="text2"/>
<input type="text" id="text3"/>
Your question is not easy to understand....
When checkbox is checked the next empty input text have to display '20' value ?
And if checkbox is unchecked last input with '20' is cleared value ?
Add the "checker" class to each input text.
<input type="checkbox" id="check"/>
<input type="text" id="text1" value="10" class="checker"/>
<input type="text" id="text2" class="checker"/>
<input type="text" id="text3" class="checker"/>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
<br/>
<input type="text" id="anotherTB" value="100"/>
Use this jquery script instead of yours
$(document).ready(function(){
$('#check').click(function(){
if($(this).is(':checked'))
{
var stop='';
$('.checker').each(function(){
if($(this).val()=='' && !stop)
{
$(this).val('20');
stop='stop';
// Add something like that to set other textbox values
var add = parseInt($('#anotherTB').val()) + parseInt($(this).val());
$('#anotherTB').val(add);
}
});
}
else if(!$(this).is(':checked'))
{
$('.checker').each(function(){
if($(this).val()=='20')
{
$(this).val('');
}
});
}
});
});
You can see it work here : http://jsfiddle.net/w9hAZ/1/
$('#check').change(function(){if($(this).is(':checked'))$('#text2').val(20);});
If you want to clear the value when it is unchecked use:
$('#check').change(function(){if($(this).is(':checked'))$('#text2').val(20);else $('#text2').val(''); });

Categories