Jump to content

Derive field name from accepted / known field name [dimensional or array fieldname]


vikaspa
Go to solution Solved by Barand,

Recommended Posts

<input name="weekday[8]" type="checkbox" value="21" class="weekday" checked="">
<input name="timing[8]" type="text" id="name" value="11" size="45" />

<input name="weekday[9]" type="checkbox" value="99" class="weekday" checked="">
<input name="timing[9]" type="text" id="name" value="12" size="45" />

<input name="weekday[10]" type="checkbox" value="77" class="weekday" checked="">
<input name="timing[10]" type="text" id="name" value="13" size="45" />

I have above html code

1. when checkbox for checkbox name="weekday[8]" is clicked, I want to check whether timing[8] is empty or not (we need to derive field name timing[8] from field name weekday[8]

2. when timing[8] some value is entered , i want to   name="weekday[8]" -> checked (we need to derive field name weekday[8] from timing[8]

we can find the name (jquery)

$('.weekday').click(function(){
var checkboxname=$(this).attr('name');

// we get checkbox clicked name=name[8]

console.log('checkbox name='+checkboxname);

})

 

In simple case (without dimension) this is easy

 

we get name of field (checkbox is clicked) as name[8]

i want to derive field name timing[8]

i tried (jquery)

$('.weekday').click(function(){

var checkboxname=$(this).attr('name');
console.log('checkboxname='+checkboxname);// i got this correct weekday[8] in this case

var splitname=checkboxname.split('weekday');// seperated [8] ,  

console.log(splitname[0]+'  1='+splitname[1]); //splitname[1] will have [8]

//now want to form or generate value of variable mobile[8]

var n='mobile'+splitname[1];//the n will be  mobile[8]
console.log('n='+n);// ths will be mobile[8]

var inp=$('input[name="'+n+'"]').val();
console.log(' inp='+inp);// but no success
//here I want value of $('input[name=name[8]').val(); 
 
})

Please guide how i derive (using jquery)

filed name mobile[8]  from filed name[8]

 

 

Edited by vikaspa
Link to comment
Share on other sites

  • Solution

The id of an element must be unique, so change those id="name" to class="name"

data attributes are useful. Give each pair of fields the same data-id value. (Easier than parsing names)

For example

<!DOCTYPE=html>
<html lang="en">
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type='text/javascript'>
    $(function() {
        
        $(".weekday").click( function() {
            let id = $(this).data("id")                         // get data-id value of checkbox
            let time = $(".name[data-id="+id+"]")               // find timing inut with same data-id value
            if ($(this).is(":checked"))  {
                $(time).focus()
            }
            else {
                $(time).val("")
            }
        })
        
    })
</script>
</head>
<body>
<input name="weekday[8]" type="checkbox" value="21" class="weekday" checked data-id="8">
Monday
<br>
Timing 
<input name="timing[8]" type="text" class="name" value="11" size="45" data-id="8">
<br><br>

<input name="weekday[9]" type="checkbox" value="99" class="weekday"  data-id="9">
Tuesday
<br>
Timing
<input name="timing[9]" type="text" class="name" value="" size="45" data-id="9">
<br><br>

<input name="weekday[10]" type="checkbox" value="77" class="weekday" data-id="10">
Wednesday
<br>
Timing 
<input name="timing[10]" type="text" class="name" value="" size="45" data-id="10">

</body>
</html>

 

Link to comment
Share on other sites

I tried the reverse part

when timing is blank, uncheck the checkbox

however

  let weekday = $(".weekday[data-id="+id+"]") ; ==> I am getting this undefined

pls help

code

$('.timing').blur(function() {
     let id = $(this).data("id")       
 
     let timing=$(this).text().trim();                  //text stored in timing
     console.log('timing text ='+timing);         // display the text stored in timing


     let weekday = $(".weekday[data-id="+id+"]") ;                // find timing input with same data-id value

// i am getting weekday as unefined 
    console.log( 'timing blur weekday '+weekday ); // timing blur weekday [object Object]
    if (timing =='')       // text is blank
        { 
               $(weekday).prop('checked', true);// set checkbox checked
        }
});     

    else
        {
               $(weekday).prop('checked', false);// set checkbox un-checked
        }
    });

Edited by vikaspa
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.