I have a form with a jquery date select and radio buttons like below
<table>
<tr>
<td>
<input type="text" id="5506_datepick_1"></input>
</td>
<td>
<input id="5506_protocol_protocol_1" type="radio" value="protocol 1" name="5506[protocol]">pp1</input>
<input id="5506_protocol_protocol_2" type="radio" value="protocol 2" name="5506[protocol]">pp2</input>
</td>
</tr>
<tr>
<td>
<input type="text" id="5507_datepick_2"></input>
</td>
<td>
<input id="5507_protocol_protocol_1" type="radio" value="protocol 1" name="5507[protocol]">pp1</input>
<input id="5507_protocol_protocol_2" type="radio" value="protocol 2" name="5507[protocol]">pp2</input>
</td>
</tr>
</table>
Whenever someone selects both the inputs on each row(example: radio for 5506* and date picker for 5506*) I want to be able to trigger a function regardless of the select order.
I have tried the following (in Js Fiddle) but its useless.
Anyone have any ideas on how I can go about this unobtrusively.
Jsfiddle
Your input selector is using ^=, which matches the exact START of a value, yet your values don't start with that value. I suggest changing that to *= so it searches anywhere within the ID. Reference jQuery Docs
Second, you're forgetting a closing ' quote for that selector.
That fixes the selector issues for activation. Now you just need to trigger a common function to check if both Date and Radio (in the same line) have been filled out.
Fixed JSFiddle
This activates the checkProtocol() function when a date is selected and passes the input text element along to it.
$(this).datepicker({
onSelect: function() { checkProtocol( this ) }
});
This activates the checkProtocol() function when a radio button has been selected for that group and passes that element along as a parameter.
$("input[id*='protocol_protocol']").change( function() { checkProtocol(this) } );
Related
I have an asp.net form with various textboxes and kendo datepickers. I allow the user to fill in the form and if they decide to start again I have a reset button for them.
The reset button should reset the form to its original model data. To be clear I don't want to reset the form to blank values, I want to reset all the inputs to their original model values.
This works nicely for the textboxes however after hitting the reset button the datepicker simply displays a "d" and not the original model value.
I use the following javascript/jquery to reset the form:
$(this).closest('form')[0].reset();
Here is my extract form code with the datepicker:
<tr>
<td><label asp-for="Aircraft.SerialNumber" class="frm-label"></label></td>
<td>
<input asp-for="Aircraft.SerialNumber" autocomplete="off" class="k-textbox k-state-disabled" style="width:400px" disabled />
<span asp-validation-for="Aircraft.SerialNumber" class="text-danger"></span>
</td>
</tr>
<tr>
<td><label asp-for="Aircraft.ManufactureDate" class="frm-label"></label>
</td>
<td>
<kendo-datepicker name="DatePicker" for="Aircraft.ManufactureDate" class="" style='width: 400px;' />
<span asp-validation-for="Aircraft.ManufactureDate" class="text-danger"></span>
</td>
</tr>
I'm not sure wether this problem lies with the telerik widget or my jquery/javascript code so I have also posted here
I tried with code sample :https://demos.telerik.com/aspnet-core/datepicker/tag-helper
And using :
$("#FormID").trigger("reset");
It can successfully reset datetimepicker to default model value :
<kendo-datepicker name='datepicker'
for="OrderDate"
style='width: 100%;'></kendo-datepicker>
But not work for datetimepicker which set with static value(change to format string) :
<kendo-datepicker name="monthpicker"
start="CalendarView.Year"
depth="CalendarView.Year"
format="MMMM yyyy"
value='DateTime.Parse("November 2011")'
style="width: 100%;"></kendo-datepicker>
But you can always set the value for that(store value form model/viewbag in hidden field) :
$("#monthpicker").val("November 2013")
EDIT :
So as a workaround , you can add hidden field :
<input type="hidden" id="DeOrderDate" asp-for="OrderDate"/>
And then use Jquery to re-bind the value :
$("#FormID").trigger("reset");
$("#OrderDate").data('kendoDatePicker').value($("#DeOrderDate").val())
That should work for special scenario .
I have code in which a gridview in asp.net webforms spits out 3 checkboxes of which I would like to have Jquery easily traverse through the ID's and ONLY allow 1 checkbox per row to be checked.
They will Always have the same name just that the ending numbers will increase thus row 1 might not have a number, but then ending in 1 then ending in 2 , then they all end of 3 etc...
I could do this regretfully long way of writing a ton of javascript/jquery in which I check for each specific checkbox and those that end in 1, those cannot have any others ending with 1 to be checked, they have to be unchecked.
I was thinking about regex in which I check the beginning of the ID and then the end of the ID and making sense that per ID having "chkCtrl" AND ending with a unique number like "1" that the specific box being checked will uncheck the other "chkCtrl" ending in 1 . Thus Out1 , Y1 , N1
I'm sure that there IS a fast way to do this I just cannot seem to find an example of it.
Example
<table>
<tr>
<td>Out</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>
<input id="MainContent_chkCtrlOut" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlY" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlN" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
</tr>
<tr>
<td>
<input id="MainContent_chkCtrlOut1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlY1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlN1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
</tr>
This can easily be done by writing a couple of lines of jquery. For example see the code below.
$('input:checkbox').click(function(){
$(this).closest('tr').find('input:checkbox').removeProp('checked');
$(this).prop('checked',true);
});
jsFiddle: https://jsfiddle.net/taleebanwar/a3qk0kc1/1/
Edit
As Tom Stickel has mentioned in the comments using removeProp is a bad idea. It may not work in jquery 2.*. Refer Tom Stickel's answer for a better way to do this.
The selected answer will work in older jquery, if you changed that selected answer jquery version to a new version the checkboxes do not work.
.removeProp is bad idea https://api.jquery.com/removeProp/
Taleeb was very close however, I would say to edit that one line.
$('input:checkbox').click(function () {
$(this).closest('tr').find('input:checkbox').prop('checked', false);
$(this).prop('checked', true);
});
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
I am trying to enable and disable a field using Javascript, works fine on IE but does not work on Safari.
FIELDS
If yes is clicked, should enable free text below, else disabled.
<tr id="ContainerQ1266I1396">
<td>Ultrasound Used</td>
<td>
<input type="radio" name="Q1266I1396" id="Q1266I13960" onclick="">No</input>
<input type="radio" name="Q1266I1396" id="Q1266I13961" onclick="regft();">Yes</input>
</td>
</tr>
<tr id="ContainerQ1267I1276">
<td>fretext</td>
<td>
<input id="Q1267I1276" type="text"size="80" />
</td>
</tr>
JAVASCRIPT
function regft(){
var regf=document.getElementById("Q1266I13961");
document.getElementById("ContainerQ1267I1276").disabled=true;
if (regf.checked==true){
document.getElementById("ContainerQ1267I1276").disabled=false;
}
}
First off the radio buttons don't seem to be in the same group - if you want them to be mutually exclusive options (which is what radio buttons mostly get used for) you could give them the same "name" attribute. See this tutorial for example: http://www.w3schools.com/jsref/dom_obj_radio.asp
Second, I think you are setting the disabled property on the tr element instead of the input element. Try:
document.getElementById("Q1267I1276").disabled=false;
I'm very new to using jQuery and JavaScript but here goes. I am trying to create a toggle function for my website. There is an input to select the name of the event which displays as default as a dropdown list of all the events in the database - but I want there to be an option to change it to manual input and type the name of the event as what ever you want.
I can get this to work fine! However I can't get the link to change the input BACK to a select box to work.
See my code below:
/// jQuery Code ///
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function toggleEventInput() {
$("#EventNameDropDown")
.replaceWith('<input type="text" size="35" name="boxEvent" class="FieldInput" />');
$("#EventNameChange")
.replaceWith(' (Drop Down Input)');
}
function toggleEventInputBack() {
$("#EventNameDropDown")
.replaceWith('TEST');
$("#EventNameChange")
.replaceWith(' (Manual Input)');
}
</script>
/// HTML Code ///
<table>
<tr>
<td class="label">Event:</td>
<td>
<span id="EventNameDropDown">
<select name="boxEvent" class="FieldInput" style="width:254px;" />
<?= $EventNameDropDownList ?>
</select>
</span>
<span id="EventNameChange">
(Manual Input)
</span>
</td>
</tr>
<tr>
<td class="label">Company:</td>
<td><input type="text" size="35" name="boxEvent" class="FieldInput" /></td>
</tr>
</table>
As said, when you click the original link to '(Manual Input)' it works fine and changes it to a text box. But then when you click the '(Drop Down Input)' link it does nothing.
Any help would be appreciated.
You need to use .html() instead of .replaceWith(). The former replaces the contents of the element. The latter replaces the element itself. By using .replaceWith() you are replacing the <span> that contains the <select> too.
Krishna is suggesting that rather than just replace the html for the <select>, you first store it in a variable so you can put it back later.
You could store it as data on an element, like this:
function toggleEventInput() {
// Store the html for the <select>.
$('#EventNameDropDown').data('selectHtml', $('#EventNameDropDown').html());
$("#EventNameDropDown").html('<input type="text" size="35" name="boxEvent" class="FieldInput" />');
$("#EventNameChange").html(' (Drop Down Input)');
}
function toggleEventInputBack() {
$("#EventNameDropDown").html($('#EventNameDropDown').data('selectHtml'));
$("#EventNameChange").html(' (Manual Input)');
// Clear the html for the <select>. We will get it again later if we need it.
$('#EventNameDropDown').data('selectHtml', '');
}
Its better to add the drop-down list inside a div/span and while clicking the toggle button, store the data inside the div/span to a variable and replace the content with the input box. on next toggle, replace the div/span with that data in the variable. a status variable 0/1 will help to toggle the data..