We Keep Coding

Update background color jquery input inside td tag

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.

Jquery get different input hidden value to a link

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

jQuery looking for a plugin to dynamically move tables and updates ID's accordingly [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I'm trying to find a way in jQuery to move dynamically tables.
I've coded actually a button to clone a hidden table when needed as well a button to delete a not needed table.
Now I'd like to add the function to change the order of those tables dynamically. But, I need the id's of the elements inside the table to be updated as well as the data will be used into a form (see sample).
<TABLE id="Leg0" width="400px" border="0">
<TR >
<TD><INPUT type="checkbox" class="delCheckLeg" name="chk"/></TD>
<TD><INPUT type="text" placeholder="Date" class="datepicker" id="tripdate0" name="tripdate0"/></TD>
<TD><INPUT type="text" placeholder="Dep Time" id="deptime0" name="deptime0"/></TD>
<TD><INPUT type="text" placeholder="Departure" class="aptsearch" id="routingdep0" name="routingdep0"/></TD>
<TD><INPUT type="text" placeholder="Arrival" class="aptsearch" id="routingarr0" name="routingarr0"/></TD>
<TD><INPUT type="text" placeholder="Flight Time" id="fttime0" name="fttime0"/></TD>
<TD><INPUT type="text" placeholder="Pax" id="pax0" name="pax0"/></TD>
</TR>
</TABLE>
<TABLE id="Leg1" width="400px" border="0">
<TR >
<TD><INPUT type="checkbox" class="delCheckLeg" name="chk"/></TD>
<TD><INPUT type="text" placeholder="Date" class="datepicker" id="tripdate1" name="tripdate1"/></TD>
<TD><INPUT type="text" placeholder="Dep Time" id="deptime1" name="deptime1"/></TD>
<TD><INPUT type="text" placeholder="Departure" class="aptsearch" id="routingdep1" name="routingdep1"/></TD>
<TD><INPUT type="text" placeholder="Arrival" class="aptsearch" id="routingarr1" name="routingarr1"/></TD>
<TD><INPUT type="text" placeholder="Flight Time" id="fttime1" name="fttime1"/></TD>
<TD><INPUT type="text" placeholder="Pax" id="pax1" name="pax1"/></TD>
</TR>
</TABLE>
I've tried to use a system with arrows to move the tables up and down but it would be more nice with a dragging solution. For such thing, I've seen the pluggin "Table Drag and Drop JQuery plugin" but it seems to work only with rows&columns.
Does anyone have an idea on how to perform this?

You can go with slickgrid. Slickgrid is open source library and has nice documentation and examples

How to get checkbox values and insert them to an observable array in knockouts [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
<table class="table table-hover">
<thead>
<tr>
<th> Kategoriler </th>
</tr>
</thead>
<tbody data-bind="foreach:categories">
<tr>
<td>
<input type="checkbox" class="tooltips" data-bind="value: name" data-bind="checked: categoriesToSend" />
</td>
<td data-bind="text:name"></td>
</tr>
</tbody>
</table>
This is my table that content checkboxex. I want to get values from this checkboxes and insert this values to an observable array how can i do this?

In this case, you would want to do something like:
<input type="checkbox" data-bind="attr: { value: name }, checked: $parent.categoriesToSend" />
So, you want to:
use a single data-bind attribute
do a one-way binding for the value attribute using the attr binding
use the checked binding against categoriesToSend which lives on the parent (not on the category itself), so it can be referenced using $parent.categoriesToSend
Here is a sample in jsFiddle: http://jsfiddle.net/rniemeyer/Vf5LA/

Save user input in Array

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.