I have a form created using echo command in php. It is being displayed correctly. I have a javascript which detects click on radio button of form and displays the hyperlink/anchor corresponding to each button group, which is not working.
But if I create the form in html only without any php, it works perfectly. please HELP.
Form creation
echo("<form name ='input' action = 'result.php' method = 'POST'>");
while($row = mysqli_fetch_array($result,MYSQLI_NUM))
{
echo(($i+1)." ".$row[1]."<br>");
echo("
<input type = 'radio' value = $row[2] name = '$i'>$row[2]    
<input type = 'radio' value = $row[3] name = '$i'>$row[3]<br>
<input type = 'radio' value = $row[4] name = '$i'>$row[4]    
<input type = 'radio' value = $row[5] name = '$i'>$row[5]  
<a id='$i' href='javascript:clear($i)'>Reset</a><br>");
$i++;
$z[]=$row[6];
}
SCRIPT
$('input:radio').click(function() {
var n = $(this).attr('name');
var k ='#' + n;
alert($(this).attr('name'));
$(k).show(400);
});
You can try changing $('input:radio') to $('input[type="radio"]').
Try this
$('input[type="radio"]').on('click', function() {
var n = $(this).attr('name');
var k ='#' + n;
alert($(this).attr('name'));
$(k).show(400);
});
$('body').on('click','input:radio',(function() {
var n = $(this).attr('name');
var k ='#' + n;
alert($(this).attr('name'));
$(k).show(400);
});
When clicking on dynamically created elements you need to use event delegation.
Hmm... your problem is that $row array should be with curly brackets because you're in double quotes
echo("<form name ='input' action = 'result.php' method = 'POST'>");
while($row = mysqli_fetch_array($result,MYSQLI_NUM))
{
echo(($i+1)." ".$row[1]."<br>");
echo("
<input type = 'radio' value = '{$row[2]}' name = '$i'>{$row[2]}    
<input type = 'radio' value = '{$row[3]}' name = '$i'>{$row[3]}<br>
<input type = 'radio' value = '{$row[4]}' name = '$i'>{$row[4]}    
<input type = 'radio' value = '{$row[5]}' name = '$i'>{$row[5]}  
<a id='$i' href='javascript:clear($i)'>Reset</a><br>");
$i++;
$z[]=$row[6];
}
Related
Hi I need to change the hardcoded url in the value property of input attribute dynamically based on a dropdown selected.
Following is the code I tried but not working. I am new to Javascript. Please help
var returnValue = checkDropDown();
var myValue = returnValue === "DropDown1" ? "http://url1/..." : "http://url2..";
var input = document.getElementById('URLField');
input.value = myValue;
function checkDropDown() {
const platForm = $('#platform-select').val();
console.log("platform select"+platForm);
return platForm;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<label for="platform">Choose from dropdown :</label>
<select name="platform" id="platform-select" onchange="togglePlatformOptions()">
<option value="DropDown1" >foo</option>
<option value="DropDown2" selected>bar</option>
</select>
<input type="text" id="URLField" value="myValue"/>
</body>
As you already have a function defined on change event on dropdown(called togglePlatformOptions) you can just use it.
Just add to this function your functionality.
Like below
function togglePlatformOptions(){
//you old code if it exists already
var returnValue = document.getElementById('platform-select').value;
var myValue = returnValue === "DropDown1" ? "http://url1/..." : "http://url2..";
var input = document.getElementById('URLField');
input.value = myValue;
}
UPDATE: Seems you have a function checkDropDown, then add everything you have inside
function togglePlatformOptions(){
var returnValue = checkDropDown();
var myValue = returnValue === "DropDown1" ? "http://url1/..." : "http://url2..";
var input = document.getElementById('URLField');
input.value = myValue;
}
UPDATE #2: To have it on initialization just call it
function togglePlatformOptions(){
var returnValue = checkDropDown();
var myValue = returnValue === "DropDown1" ? "http://url1/..." : "http://url2..";
var input = document.getElementById('URLField');
input.value = myValue;
}
// below call added
togglePlatformOptions();
I have this code:
<input type = "text" value = "$va" name = "n"/>
and I want it to be readonly if va is not whitespace. How can I accomplish this?
This should make it so that if $va contains whitespace the field will be readonly.
<?php
$readonly = (!empty($va) && strlen(trim($va)) == 0) ? null : 'readonly';
echo '<input type="text" value="'.$va.'" name = "n" '.$readonly.' />';
However I'm not sure if you also want to include an empty string as "only including whitespace", in which case you could alter the first line to:
$readonly = (strlen(trim($va)) == 0) ? null : 'readonly';
1st Option With Java Script
in javascript you can do it like this:
1st: put an id to your element
<input type = "text" value = "$va" name = "n" id='n'/> //i just made it the same as the name
2nd: get the element with the id of 'n'
<script>
$(document).ready(function(){
var nValue = $("#n").val();
if( nValue != " " ) {
$("#n").prop("readonly",true);
}
});
</script>
2nd Option With PHP
in php, assuming that you are printing your element via php:
//other codes here
<?php $va = "noAWhiteSpace";
$readOnly = "";
if($va != ""){
$readOnly = "readonly";
}
?>
<input type = "text" value = "<?php echo $va; ?>" name = "n" <?php echo $readOnly; ?> />;
here is
<input type = "text" value = "$va" name = "n" <?= ($va != '' || $va == null) ? '' : 'readonly'; ?>/>
check https://www.php.net/manual/en/control-structures.if.php
I am trying to create an array from user input in JavaScript and display the latest array as the numbers are appended to the array. The numbers are not getting printed.
Kindly help.
HTML part :
<textarea form = "arrays" cols = 10 rows = 2 id = "num">
</textarea><br />
<form id = "arrays" method = "" onsubmit="arrAppend(document.getElementById('num').value);">
<input type ="submit" value="Append" />
</form>
JavaScript part :
<script>
var myarr = [];
function arrAppend(num) {
myarr.push(+num);
text = "";
for (var x = 0; x< myarr.length; x++) {
text += myarr[x];
}
console.log(text);
}
</script>
This is working :
HTML :
<input type = "text"
id = "addNumber" />
<input type = "button"
id = "addToArray"
value = "Append"
onclick = "arrAppend();" />
JavaScript :
function arrAppend() {
myarr[x] = document.getElementById('addNumber').value;
alert("Element : "+myarr[x]+" is added at index "+x);
x++;
document.getElementById('addNumber').value = "";
<textarea form = "arrays" cols = 10 rows = 2 id = "num">
</textarea><br />
<input type ="submit" value="Append" onclick="arrAppend(document.getElementById('num').value);"/>
why do you need a form? are you submitting something to the server? when you submit a form it will clear the global array as well.
taking value in 1st textbox and want to display it in 2nd..
1st <input type="text" value=" " id = "marks1" name = "marks1" onblur = "myFunction('marks1')" />
2nd <input type="text" value=" " id = "marks2" name = "marks1" disabled = "disabled" />
and on oblur I am calling a function. Whenever I change the value from UI, on function call I am getting the old value i.e. ' ' instead of changed value.
in the variable "value" the old value which i am getting, i am unable to display it on 2nd textbox.
function myFunction( txtname )
{
alert("call");
var txtobj = document.getElementsByName(txtname);
var value = txtobj[0].value;
alert("my value : "+value);
txtobj[1].value = value;
}
I know the code is okay, but it is not working at me. Is there any other way?
Works for me:
function myFunction(element)
{
var txtobj = document.getElementsByName(element);
var value = txtobj[0].value;
txtobj[1].value = value;
}
http://jsfiddle.net/pwTwB/1/
Are you getting an error?
Try it this way:
function myFunction( txtname )
{
var txtobj = document.getElementById(txtname);
var target = document.getElementById("marks2");
target.value = txtobj.value;
}
Here is a simple way to set the next textbox's value.
function moveText(ele){
document.getElementById("marks2").value = ele.value;
}
Then use the following in your html markup
<input type="text" id="marks1" onblur="moveText(this)" />
<input type="text" id="marks2" disabled="disabled" />
Hi I am having some issues trying to get check box values. For a school project I have a pizza order form and I am suppose to print a summary of he order. I am having issues printing the toppings.
<label><input type = "checkbox" name = "topping" id = "sausage" value = "Sausage"/> Sausage</label>
<label><input type = "checkbox" name = "topping" id = "pepperoni" value = "Pepperoni"/> Pepperoni</label>
<label><input type = "checkbox" name = "topping" id = "beef" value = "Beef"/> Beef</label>
<label><input type = "checkbox" name = "topping" id = "bacon" value = "Bacon"/> Bacon</label><br />
<label><input type = "checkbox" name = "topping" id = "chicken" value = "Chicken"/> Chicken</label>
<label><input type = "checkbox" name = "topping" id = "ham" value = "Ham"/> Ham</label>
<label><input type = "checkbox" name = "topping" id = "olives" value = "Olives"/> Olives</label>
<label><input type = "checkbox" name = "topping" id = "peppers" value = "Peppers"/> Peppers</label><br />
<label><input type = "checkbox" name = "topping" id = "tomatoes" value = "Tomatoes"/> Tomatoes</label>
<label><input type = "checkbox" name = "topping" id = "mushrooms" value = "Mushrooms"/> Mushrooms</label>
<label><input type = "checkbox" name = "topping" id = "pineapple" value = "Pineapple"/> Pineapple</label>
Thats the html part and I have my javascript function where I think the problem is.
function toppings(inputCollection) {
var toppings = "";
for (var i = 0; i < inputCollection.length; i++) {
if (inputCollection[i].checked) {
toppings = toppings + inputCollection[i].value + " ";
}
}
return toppings;
}
I am fairly new to javascript so please don't flame me if I made a stupid mistake. Thank you very much
How are you calling your function?
This should do it - toppings(document.getElementsByName("topping"))
Have a look at this example, which also shows how labels are properly used:
http://jsbin.com/upeqam