I making a context menu and it almost done, just left this problem for me, but i have no idea to do this:
This is the JS Fiddle
Get different value from input hidden to a single link, because I want to pass it into a controller action
<table>
<tr>
<td class="element">im here
<input type="hidden" id="theid" name="theid" value="1"/>
</td>
</tr>
<tr>
<td class="element">im there
<input type="hidden" id="theid" name="theid" value="2"/>
</td>
</tr>
<tr>
<td class="element">im where
<input type="hidden" id="theid" name="theid" value="3"/>
</td>
</tr>
</table>
<div type="context" class="menu"> // link
<label class="menuitem">Cancel this app</label>
</div>
I want to pass the value to theid , for example when right click im here the link should get the hidden value = 1 and so on, any suggestion to do that ? Thanks
The mouse event object contains the target you were clicking on. So you can access that, pass it to jQuery and do whatever you want with it, eg. accessing the ID of the input.
$(e.target).find('input').attr('id');
And as the other commentators, I'm hoping that your IDs are different ;)
Edit: I re-read your question, you just want the value. So you don't need the ID theid in your markup overall (for this usecase). Getting the value from the clicked element:
$(e.target).find('input').val();
And working, see the alert(): See this jsfiddle
Related
I know we can find lots of similar questions on stackoverflow. I am using ReactJS.
<body>
<table>
<tbody>
<tr>
<td>
<input type="checkbox" id="checkbox1">
<p>Check 1</p>
<a></a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="checkbox1">
<p>Check 2</p>
<a></a>
</td>
</tr>
</tbody>
</table>
</body>
Here is an example of what I am using. there are above 35 checkboxes, and whenever I am clicking on any one of them the page is jumping to top.[![enter image description here][1]][1]
As I have tried on simple html page with 100 checkboxes, its working fine but in my React code. There is jump
Here is how I am handling change event:
<input type="checkbox" onChange={this.props.checkedList} name="article" value={item.id}/>
checkedList(e) {
let id = e.target.value
if (this.state.marked.includes(id)) {
let filteredArray = this.state.marked.filter(item => item !== id)
this.setState({marked: filteredArray});
}
else {
this.setState({marked: this.state.marked.concat(id)});
}
}
As you are calling setState in the event, it is causing the component to render which has the state marked. You should use the local variable in the component to handle the array marked or handle the shouldComponentUpdate. You can find details here to how to use it.
You might be able to use aria-label="test".
Example:
<input aria-label="test" id="test" type="checkbox" />
The aria-label attribute is used to define a string that labels the
current element. Use it in cases where a text label is not visible on
the screen. (If there is visible text labeling the element, use
aria-labelledby instead.)
Reference - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
I'm developing an app and I've a table populated with ng-repeat and the last column of the table is an image that it is clicked open another page that should contains more details about the line of the table that I've choose clicking the image.
I've tried to use an input type hidden in a form but it doesn't work for me.
This is my code:
<tr ng-repeat="Data in response">
<td align="center">{{Data.date}}</td>
<td align="center">{{Data.conf}}</td>
<td align="center">{{Data.evaso}}</td>
<form ng-submit="submit()">
<input type="hidden" name="codice" value="Data.code" ng-model="codice">
<td align="center"><input type="image" src="img/note.png" class="imageNote" ng-click="submit()"></td>
</form>
</tr>
After in the controller I need to manage this data (the cod). But in this way, I've tried to print it in the console and the result is undefined.
How can I solve this problem?
I am not sure if I get your question, but if you want to pass the selected item to the submit function, you can have your angular function like this:
$scope.submit = function(selectedId){
console.log(selectedId);
//Your code.
}
and your HTML should change to this:
<input ng-click="submit(Data.id)" type="image" src="img/note.png" class="imageNote">
Note: You do not need to use {{}} (expressions) to pass something to a function (here, ng-click)
I think you can try following way to get easily the Date.code data on click:
<input type="image" src="img/note.png" class="imageNote" ng-click="submit(Data.code)">
I have a table with tr that have this pattern
<tr>
<td width="37" align="left"></td>
<td width="200" align="left">
<input type="submit" name="s1" onclick="ChangeThis(this);" value="Update Color" id="s1" class="btn-blue">
<input name="info1" type="text" maxlength="6" id="info1" style="color:Red;background-color:#FFFFFF;font-weight:normal;width:90px;">
</td>
<td width="340" align="center">
<input name="extra1" type="text" maxlength="200" id="extra1" style="width:330px;">
</td>
<td class="hide"></td>
</tr>
What I want to do is onclick on this button which will have the same sequence matching the input example button id=s1 input id =info1
I want to change the background color. I prefer jquery or javascript is fine. I thought about the regex with starting with .. ^ ..
function ChangeThis(x) {
$(this).closest('td').find('input[type="text"]').css('backgroundColor', 'Yellow');
}
That doesn't work, I tried tr instead of td
UPDATE/EDIT
So Essentially what I want is that When the button is clicked that there are predefined things to change in the text
Font Color
Bold or not
Background Color
UPDATE
Ok, I think I understand what you'd like.
Let me know if this fiddle solves it:
https://jsfiddle.net/14ymd0pd/
Based on your description, I'm a little confused as to what you'd like.
I've created a JSFiddle with what I think is the intended functionality.
https://jsfiddle.net/tvu08yrm/
The main differences involved separating out the JavaScript, using the jQuery on event handler:
$('.color-btn').on('click', function(){
adding a new class (color-btn) so the buttons could be targetted and changing the functions which trraverse the DOM Elements.
A couple of notes:
You should not be using inline JavaScript. I've separated out the JavaScript in my fiddle.
Since I can only see a small section of code it's hard for me to say, but if the page isn't going to be displaying tabular data then don't display it in a table...use a div or ul or another relevant element, just not a table.
I haven't done it in my fiddle, but you should also move the inline css out of the markup and into an external css file.
The JavaScript is dependant on the structure of the table, if you change its structure you'll also need to update the jQuery selectors. This can be avoided by following a naming convention in the table rows and using these to target the appropriate elements instead of their relative positions.
Let me know if the fiddle answered your question :)
There are many solutions to get your code working.
First solution: use x instead of this inside the function
pro: code works
contra: bad coding style and you should not use inline javascript.
Second solution: change onclick="changeThis(this)" to onclick="changeThis.call(this)"
pro: the code works, and you can use this in function context
contra: you use this in function context... there are only a few situation to do that. this is not such a situation. and again: inline-javascript
Third solution: don't use onclick.
<tr>
<td width="37" align="left"></td>
<td width="200" align="left">
<input type="submit" name="s1" value="Update Color" id="s1" class="btn-blue">
<input name="info1" type="text" maxlength="6" id="info1" style="color:Red;background-color:#FFFFFF;font-weight:normal;width:90px;">
</td>
<td width="340" align="center">
<input name="extra1" type="text" maxlength="200" id="extra1" style="width:330px;">
</td>
<td class="hide"></td>
</tr>
$('input:submit[name="s1"]/* or a different selector... depends on your logic */').click(changeThis);
you should use the third one.
html:
<tr id="head-58">
<td style="width:150px;">
<input type="button" name="delete" class="delete_person" value="58" />name<button type="button" style="margin: 1px 35px 5px;" name="delete" value="58" class="delete_icon button_style">Delete</button>
</td>
<td>
<input type="checkbox" name="first_aid" id="id_first_aid" />FirstAid
</td>
<td>
<input type="checkbox" name="sick_bay" id="id_sick_bay" /Sick bay
</td>
<td>
<input type="checkbox" name="ambulance" id="id_ambulance" />Ambulance
</td>
</tr>
Here onclicking the delete_person class,i want to show the hidden button with class delete_icon.Since class delete_icon can have more than one,i need to show the hidden button form clicked element.I tried with $this.closest('tr').find(".delete_icon").toggle(); which is not working.
Use:
$this.parents('tr').find(".delete_icon").toggle();
Your delete button is not a child of tr. Move it into tr, or use:
$(this).closest('tr').next('.delete_icon')
There is no $this variable unless you create it yourself. this refers to the target of the event, so use it in the jQuery function to create a jQuery object containing it:
$(this).closest('tr').find(".delete_icon").toggle();
However, you also need to move the button inside the table row for that to work. Now it looks like it's inside the table but outside any table cell, which is invalid HTML. (Some browsers may put it inside some table cell, other may move it outside the table entirely. The result is unpredictable, so unless you move the button inside a cell, it's not possible to write code that accesses it.)
Since the button is after the <tr>...</tr>
Use:
$(this).parent().next().toggle()
I am a true beginner in html/js/jquery.
I am trying to save user input into an array, then later I want to write all that information from that array into an xml file.
My Problem is that my form consists of multiple Jobs which will all have the same input fields.
This is a short example of the first job:
<form>
<table class="wrapper">
<tr>
<td style="text-align: left">First Digit:
<div> <input id="fDigit" type="text" name="Job1[]" /></td>
<td style="text-align: left">System:
<div> <input id="system" type="text" name="Job1[]" /></td>
<td style="text-align: left">SAP Modul:
<div> <input id="sapModul" type="text" name="Job1[]" /></td>
</tr>
<tr>
<td style="text-align: left">Country:
<div> <input id="country" type="text" name="Job1[]" /></td>
<td style="text-align: left">Duration:
<div> <input id="duration" type="text" name="Job1[]" /></td>
<td style="text-align: left">Step Number:
<div> <input id="stepNumber" type="text" name="Job1[]" /></td>
</tr>
<tr>
<td style="text-align: left">Optional Text:
<div>
<textarea align ="left" id ="optionalText" name="Job1[]" cols="20" rows="2"> </textarea>
</div>
</td>
</tr>
</table>
</form>
I have many more of those in my Script.
What I want to do now is saving the Information of every Job into an Array, meaning Job1[]: with the user input of every field which is shown above , Job2[]: different user input but similar input field with the same name.
There might be an easier solution to do this but I just can't figure one out.
Sorry if this is a too stupid issue but i tried to find solutions for ages and could not find one which helped me out.
Thanks in advance!
For a beginner, the easiest solution might be to use a component that does form serialization for you. Your form should have a name (attribute), and an id is probably going to be useful too.
I've found form2js to be very practical, and it can manage collecting similarly named fields into an array.
I also made a small fiddle that shows one way to collect the info yourself, for example like this.
var job1 = [];
$('[name="Job1[]"]').each(function(index, inputField) {
job1.push($(inputField).val());
});
console.log(job1);
you don't need to use multiple array names because the javascript is client side
just use Job1[]
I suggest you organize your data as a JSON object, for example
[{"Country": a, jobs:[your array]},{"Country":b, jobs:[your array]}]
and to insert a value to array, you can use: your_array.push(value)
Hope this help.
You can use a two dimensional array in your inputs name with the first index being the row index and the second the column name, something like Jobs[0][Country]. Then in the end you will have all your data in one array.
Also, if you're repeating the markup you posted for every job, avoid using id attributes on your inputs as this would produce invalid markup. Id attributes must be unique in a HTML page, use classes instead.