Jump to content

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

vikaspa

By vikaspa
in Javascript Help

 Share
Go to solution Solved by Barand,

Recommended Posts

vikaspa Regular Member

vikaspa

Posted
Posted (edited) 
<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
  • Solution
Barand Prolific Member

Barand

Posted
  • Solution
Posted

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>

 

vikaspa Regular Member

vikaspa

Posted
  • Author
Posted (edited)

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
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.

×
 Share
Go to topic listing
×
×
  • 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.