I am used following code hide DataPicker element only hide textbox does not hide image of calender.
HTML Code
#Html.Telerik().DatePickerFor(model=>model.Dateofpublisher)
Jquery
$('[name="Dateofpublisher"]').hide();
You dont need to write DatePickerFor.I always do it as following:
<input id="datepicker" name="date*" type="text" value="" />
*The name of your datepicker should be the same with the name of your model date filed.
And in script codes just write:
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Note:jqueryui files should be added first.
HTML
<div id="Date">
<input id="datepicker" name="date*" type="text" value="" />
</div>
Jquery
$(document).ready(function () {
$("Date").hide();
});
Related
I want to autosave the content of tinyMce editor
I'm using tinmce version 5.2.2 with laravel V7
tinymce configuration in app.js
require('./bootstrap');
require('tinymce/themes/silver');
require('tinymce/plugins/image');
require('tinymce/plugins/code');
require('tinymce/plugins/save');
import tinymce from 'tinymce';
tinymce.init({
selector:'textarea#inputQuestionTitle',
height:400,
setup: function(editor) {
editor.on('Change Keyup', function () {
editor.save();
//tinyMCE.triggerSave() <-- also tried
});
}
With following View
#extends('dashboard.layout')
#section('content')
<form id='addQ' action="{{route('questions.store')}}" method="post" enctype="multipart/form-data" >
#csrf
<div class="form-row align-items-center " >
<div class="col-md-12">
<label class="sr-only" for="inputQuestionTitle">Title</label>
<textarea name="title" class="form-control mb-2 " id="inputQuestionTitle" placeholder="Question Title"> </textarea>
</div>
</div>
<div class="form-row">
<button type="submit" class="btn btn-primary mb-2">Add new category </button>
</div>
</form>
<script type="text/javascript" src="{{asset('js/app.js')}}"></script>
<script type="text/javascript">
$(function(){
$('#addQ').submit(function(e){
e.preventDefault();
var frmdata = $(this).serialize();
console.log(frmdata);
});
});
</script>
#endsection
Outputs
I had using jquery to show input request with console.log
As showed in output title field does not returns any value
Please tell me how i autosave the content of tinymce editor and send it with input request ..
I had also tried to tinymce.triggerSave() before serialize() method of ajax so that input request will take tinymce content but not works
Instead of trying to update the textarea via the triggerSave() or save() methods while someone is editing the content I would just place tinymce.triggerSave() at the very beginning of the function that submits the page. This will ensure that the triggerSave() is called directly before you grab the content from the textarea.
I'm developing a form and need to enable or disable a field depending on the answer given.
Attached screen. When choosing whether to enable the field below, NO disables it.
Thanks for the reply.
You can try this (using jquery hide and show):
You have to include jquery first in you file to make it work;
HTML:
<script src="jquery-2.1.4.js" type="text/javascript"></script>
<input type="radio" class="radiobutton" name="select" value="yes" /> yes
<input type="radio" class="radiobutton" name="select" value="no" />no
<input type="text" name="name" id="name" value="" />
Working example https://jsfiddle.net/prohit0/zfjsmn59/22/
SCRIPT:
<script>
$(document).ready(function(e) {
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="yes"){
//id is the id of the elemnt to hide
$('input[id="name"]').show();
}else {
$('input[id="name"]').hide();
}
});
});
</script>
http://www.tutorialrepublic.com/faq/show-hide-divs-based-on-radio-button-selection-in-jquery.php
I think this may be a bug in Jquery Mobile, but it could also be user error (mine).
For a jquery mobile page, I am manually calling $(..).trigger("create") after loading in some html asynchronously. I am finding an odd - to me anyway - behaviour, which is that <input>s of type text on the loaded html are not enhanced to have JQM's styling, whereas <input>s that are of type button are.
Here's a stripped-down version that replicates the problem. Basically, a page loads and injects foo.html. Part of foo.html is a placeholder div that is subsequently loaded and injected with bar.html. bar.html contains a link that opens a popup. When it's clicked and the popup opens, buttons are styled correctly; inputs are not.
Note: I call trigger("create") on the parent of the injected content.
Further note: calling trigger("create") on the grandparent of where bar.html is injected makes everything be styled correctly, including inputs on the popup. See below for code.
in the body of my basic html page:
<div data-role="page" id="grandparent" data-theme="a">
<h3>A very basic page</h3>
</div>
the script in that page's head:
<script type="text/javascript">
$(document).ready(function() {
var path = "pathToFiles/";
$("#grandparent").load(path + "foo.html", null, function() {
$("#grandparent").trigger("create");
//now load bar
$("#bar_placeholder").load(path + "bar.html", null, function() {
/*this does NOT enhance text <input> on popup*/
$("#bar_placeholder").trigger("create");
/*this DOES enhance text <input> on popup*/
//$("#grandparent").trigger("create");
});
});
});
</script>
here is foo.html
<div data-role="content" id="foo">
<h3>Foo before placeholder...</h3>
<div id="bar_placeholder" data-role="content"></div>
<h3>...foo after placeholder</h3>
<label for="foo_input" class="ui-hidden-accessible">foo input IS enhanced:</label>
<input id="foo_input" value="" placeholder="i AM enhanced" data-theme="a" type="text" />
<input type="button" id="foo_button" value="Foo Button"/>
</div>
and here is bar.html:
bar popup button
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<h3>Bar header</h3>
<label for="bar_input" class="ui-hidden-accessible">bar text input NOT enhanced</label>
<input name="bar_input" id="bar_input" placeholder="i am NOT enhanced" data-theme="a" type="text"/>
<input type="button" data-theme="a" value="bar button"/>
</div>
The code for example document.getElementById("id").value="value"; is not working. I have assigned it on a function to replace the current value of the textbox once the page is loaded.
here is my code
<script type="text/javascript">
function rplace(){
document.getElementById('idtext').value="New Value";
}
onload=rplace
</script>
<form>
<input type="text" id="idtext" name="idtext" value="">
</form>
use jquery insteat of javascript.
$(document).ready(function(){ $("#idtext").val("New Value")});
Refer this
I am using ASP.net for a program with a number of check boxes and a submit button which initiates an action depending on the selected check boxes.
However, one of my check boxes should behave as this submit button, i.e, upon selecting/deselecting this check box, the same action as the button must be triggered. Can someone please help me in doing this (or perhaps direct me to a tutorial)
I have a controller class and model.
Thanks you
EDIT
The program look like:
#using(Html.BeginForm("controllername", FormMethod.Get)) {
#html.CheckBox("check1");
#HTMl.Checkbos("check2");
<input type="submit" value="Submit" />
}
Everything else is pretty much handled in the controller.
You can use javascript to listen to the check event of your check box and then invoke the form submit.
Assuming your markup of view is like this
<form id="yourFormId" action="user/post">
<input type="checkbox" class="optionChk" value="1" /> One
<input type="checkbox" class="optionChk" value="2" /> Two
<input type="checkbox" class="optionChk" value="3" /> Three
</form>
<script type="text/javascript">
$(function(){
$(".optionChk").click(function(){
var item=$(this);
if(item.val()=="2") //check your condition here
{
item.closest("form").submit();
}
});
});
</script>
EDIT : As per the question edit.
Change the CheckBox Helper method usage like the below to add a css class to the checkbox so that we can use that for the jQuery selection.
#Html.CheckBox("check1",new { #class="optionChk"})
imagining you have something like this:
#using(Html.BeginForm()) {
<label class="checkbox">
<input type="checkbox" name="chb_a" id="chb_a"> Option A
</label>
<label class="checkbox">
<input type="checkbox" name="chb_b" id="chb_b"> Option B
</label>
<label class="checkbox">
<input type="checkbox" name="chb_c" id="chb_c"> Option C
</label>
<label class="checkbox">
<input type="checkbox" name="chb_d" id="chb_d"> Option D
</label>
<button type="submit" class="btn">Submit</button>
}
you can write a simple jQuery to complement:
$(".submit").click(function() {
// find the <form> the element belongs and submit it
$(this).closest('form').submit();
});
and with this, all you need is to add a class named submit to any checkbox or more buttons if you want them to submit
for example:
<label class="checkbox">
<input type="checkbox" name="chb_e" id="chb_e" class="submit"> Option E
</label>
You can bind the click events on the checkboxes.
$( '.myCheckboxes' ).click(function () {
var clickedBox = $( this );
// now do something based on the clicked box...
});
If you need to know which checkboxes are checked, that's just another selector.
$( '.myCheckboxes:checked' ).each(function () {
// Now you have access to each checked box.
// Maybe you want to grab their values.
});
Just bind the checkbox to a click event. Assuming you have a way of uniquely identifying the checkbox that submits the form.
$( '#formSubmitCheckbox' ).click(function() {
$( '#myForm' ).submit();
});