$('#sitrcpdevdetremarks').prop("required", true);
This not working please help me how to set required true in textarea
The provided code should work fine (given appropriate HTML).
See this example, on modern browsers the <textarea> is required and will not allow submit if it's empty:
$('#sitrcpdevdetremarks').prop("required", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<textarea id="sitrcpdevdetremarks"></textarea>
<br>
<input type="submit" />
</form>
Related
I am using summernote rich text editor, and I want to edit my posted data(stored in DB). I am sending the value to the text area and inputs but not showing into the text area and showing into the input. kindly share some solutions and suggestions with me. any jquery and js function like this...
here is rendered data to web page
route.get('/edit/:id', async (req, res) =>{
const id = req.params.id
const article = await Article.findById(id)
res.render('editarticle',{article:article})
})
and here is ejs or HTML
<%- include('header'); -%>
<div class="container-9">
<h2>Create Article Here</h2>
<hr>
<form action="/create/blog" method='post'>
<input type="text" name="title" id="" placeholder="Enter Title" value='<%=article.title%>'/>
<input type="text" name="description" id="dics" placeholder="Enter Description" value='<%=article.discription%>'/>
<hr>
<button id='btn-post' type="submit">Post</button>
<textarea name='content' id="body" rows="10" value="<%=article.content%>" ></textarea>
</form>
</div>
<%- include('footer'); -%>
I have solved this problem with help of one line of code. I have got the solution after 2 month
var value = $('#value').val()
console.log(value);
$('textarea#body').summernote('pasteHTML', value);
if want to render the HTML for edit this will work, var value = $('#value').val() it just receiving the value (HTML) from the backend and $('textarea#body').summernote('pasteHTML', value); this line of code pesting the HTML into summernote editor.
#tushar Very useful !!
I use it on summer note as like
Put Content in a div, and set it display none
<div id="contentDumpDiv" style="display:none;">
<?php echo $post['content'] ?>
</div>
then use this javascript code
var value = $('#contentDumpDiv').html();
$('textarea#saContent').summernote('pasteHTML', value);
I am trying to find a way to change the pop up HTML on a chrome extension to another one when you click a button. I have tried to make a onclick function href but nothing works. I am new to both HTML and chrome extensions so I am sorry if this problem seems easy to the more experience developers.
<form id="gform" method="POST" class="pure-form pure-form-stacked" data-email="from_email#example.com"
action="https://script.google.com/a/cvsd356.org/macros/s/AKfycbxb4ZyUUQCnTN-7iYF-YRViDSy/exec">
<div class="name">
name: <input type="text" name="Name" id= "inputbox"><br>
</div>
<div class="id">
ID# <input type="text" name= "ID" id= "inputbox"><br>
</div>
<div class="MailingAddress">
Mailing Address: <input type="text" name= "Mailing Adresss" id= "inputbox" style=width:350px;><br>
</div>
<div class="sendToTr">
Send Transcript to: <input type ="text" name="College" style=width:350px; id= "inputbox" ><br>
</div>
<div class="emailmy">
<label for="email"><em>Your</em> Email Address:</label>
<input id="inputbox" name="email" type="email" value=""
required placeholder="your.name#email.com" />
</div>
<div class="sButton">
<button style=height:30px;width:70px;border-radius: 3px; class="button-success pure-button button-xlarge">
send
</button>
</div>
I think there are quite a few ways to achieve what you are asking. If I were you, I would add a JavaScript file to my project to do this.
Step 1:
I would tell my HTML page where to find this JS file. The sample below can be included near the end of your HTML file, right before </body></html>. The sample below assumes your new popup.js file is in the root folder of your project:
<script src="popup.js" type="text/javascript"></script>
Step 2:
In the popup.js file, I would create a function that tells the popup how it should be modified. In the sample below, I'm going to hide the element with an ID of "theOldElement" and show the element with an ID of "theNewElement". I'm also going to attach this function to the click event of "theButton" element.
popup.js
function updatePopup(){
document.getElementById("theNewElement").style.display = "block";
document.getElementById("theOldElement").style.display = "none";
}
document.getElementById('theButton').addEventListener('click', updatePopup);
Step 3:
I like referring to my HTML elements by ID (as I've been doing above - note the "getElementById" references), so I would:
add id="theNewElement" to the element I want to reveal
add id="theOldElement" to the element I want to hide
add id="theButton" to the button that I want to trigger this change
Note: you can insert these IDs as the first attribute within the tag you want to identify. E.g., <div id="theNewElement" ...
First, the code:
$(document).ready(function() {
$('#member_pattern').hide();
$('.add-member').click(function() {
var clone = $('#member_pattern').clone(), cont = $('.members-cont');
$(cont).append(clone);
$(cont).find('#member_pattern').show(200, function() {
$(this).attr('id', '');
componentHandler.upgradeAllRegistered();
});
});
});
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.blue-indigo.min.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<div class="members-cont">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="first_name_<?php echo $member->id; ?>" value="<?php echo $member['first_name']; ?>"/>
<label class="mdl-textfield__label" for="first_name_<?php echo $member->id; ?>">Имя</label>
</div>
</div>
<button class="add-member add-member-top mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
<div id="member_pattern" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="[name]_[id]" value=""/>
<label class="mdl-textfield__label" for="[name]_[id]">Имя</label>
</div>
Objective:
By pressing a button on the page dynamically insert another field [.mdl-textfield], you want to apply the "material design" on Google
All is good, but the methods
componentHandler.upgradeAllRegistered ();
or
componentHandler.upgradeDom ();
in any does not want to renew, re-emerged, the elements on the page.
I also was having problems cloning an element and getting it to work correctly. What I did was to remove the MDL specific classes from the div and change it to a generic class name that I could select on.
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
became
<div class="upgradeTextField">
Then in javascript, after cloning the element, I selected for those divs within the cloned element and added the MDL specific classes to them. After that, running componentHandler.upgradeDom() seemed to work.
var textFieldUpgrades = cloned.querySelectorAll('.upgradeTextField');
if(textFieldUpgrades) {
for(var i=0;i<textFieldUpgrades.length;++i) {
textFieldUpgrades[i].className = 'mdl-textfield mdl-js-textfield mdl-textfield--floating-label';
}
}
componentHandler.upgradeDom();
I haven't verified this, but it seems that when you clone an existing element within the dom that has been upgraded by MDL previously, it won't upgrade it when you add the cloned object to the DOM. So that's why I simply removed the MDL classes so it wouldn't be upgraded beforehand.
Alternatively, if you need it upgraded beforehand and still want to clone it. Then what you can do is to remove the attribute 'data-upgraded' and class 'is-upgraded' from your element after you clone it. Then when you run the componentHandler.upgradeDom() it should upgrade it. So, instead of just setting the class name as in the above snippet, you'd simply remove the upgrade info:
textFieldUpgrades[i].setAttribute('data-upgraded','');
textFieldUpgrades[i].className = textFieldUpgrades[i].className.replace(/is-upgraded/g,'');
This seemed to work for me.
Thanks for the answer, but it turned out to solve it more concise way
var index = $('.member-section').length;
var clone = $('.member-section-pattern').clone();
$(clone)
.removeClass('member-section-pattern')
.find(':not([data-upgraded=""])').attr('data-upgraded', '');
$('.members-cont').append(clone);
$(clone).show(200, function() {
componentHandler.upgradeAllRegistered();
});
I need to redirect page into external site with POST parameters, but I cannot use vanilla HTML <form action="url"> like it is explained here:
JSF commandButton - passing POST params to an external site
because then the form would be within a jsf form - and it doesn't work.
Is it possible to use:
FacesContext.getCurrentInstance().getExternalContext().redirect("http://example.com");
with POST parameters without additional vanilla form somehow? Or maybe there is other way to acheive this without form?
Try something like this:
JAVASCRIPT:
function redirect() {
document.getElementById("mySubmitButton").submit();
}
XHTML:
<h:form>
<span onclick="javascript:redirect()" class="linkClass">REDIRECT</span>
</h:form>
<div style="display:none:"> <!-- If you want it hidden -->
<form action="http://external/myplace.html" method="post">
<input type="hidden" value="value1"></input>
<input type="submit" id="mySubmitButton"</input>
</form>
</div>
EDIT: Added another test.
PASSING DYNAMIC PARAMETER:
In this example we assume that we are always going to send a value.
JAVASCRIPT:
function redirect(dynamicValue) {
document.getElementById("dynamicField").value = dynamicValue;
document.getElementById("mySubmitButton").submit();
}
XHTML:
<h:form>
<span onclick="javascript:redirect('myValue')" class="linkClass">REDIRECT</span>
</h:form>
<div style="display:none:"> <!-- If you want it hidden -->
<form action="http://external/myplace.html" method="post">
<input id="dynamicField" type="hidden" value=""></input>
<input type="hidden" value="value1"></input>
<input type="submit" id="mySubmitButton"</input>
</form>
</div>
I would like to change text on button using jquery mobile. It works if I change data-role to none, but then I lose formatting.
<fieldset class="ui-grid-a" data-inline="true">
<div class="ui-block-a"><button class="cl_button1" type="submit"
data-theme="c" data-icon="home" data-iconpos="top">Click Me</button>
</div>
</fieldset>
$('.cl_button1').val('some text');
Another posting suggested this, but it did not work.
$("cl_button1 .ui-btn-text").text("some text");
Using Firebug I found that the HTML markup created by jQuery Mobile is the following:
<fieldset data-inline="true" class="ui-grid-a">
<div class="ui-block-a">
<div data-theme="c" class="ui-btn ui-btn-icon-top ui-btn-corner-all ui-shadow ui-btn-up-c" aria-disabled="false">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">some text</span>
<span class="ui-icon ui-icon-home ui-icon-shadow"></span>
</span>
<input type="hidden" value="">
<input type="hidden" value="">
<input type="hidden" value="">
<button data-iconpos="top" data-icon="home" data-theme="c" type="submit" class="cl_button1 ui-btn-hidden" aria-disabled="false">Click Me</button>
</div>
</div>
</fieldset>
You can see that the ui-btn-hidden class has been added to the origional <button> element and the display of the button is actually rendered through the use of the <span> tags above the <button> tag.
So to change the text for this jQuery Mobile rendered element you would use a selector like this:
$('.cl_button1').siblings('.ui-btn-inner').children('.ui-btn-text').text("some text");
Or if you wanted to change the button's text on click you can do this:
$('.cl_button1').bind('click', function () {
$(this).siblings('.ui-btn-inner').children('.ui-btn-text').text("some text");
});
Here is a jsfiddle for demonstration: http://jsfiddle.net/SfySk/1/
All,
The above solutions do not seem to work with JQM 1.1.1. A very simple way of doing this is to call.
$('.cl_button1').text('some text').button('refresh');
As per http://jquerymobile.com/test/docs/buttons/buttons-methods.html, there are only three methods you can call on a button. This should keep the internal state of your button consistent with the JQM UI adornment, and be more robust against changes to the way buttons are made 'pretty' in the future.
in jqm version 1.4.5, after initialization
$('#btn_input').parent().contents().filter(function(){
return this.nodeType === 3;
}).replaceWith('New Text');
It works without destroying binded events.
When you said this didn't work:
$("cl_button1 .ui-btn-text").text("some text");
You forgot the . before cl_button to indicate that you are trying to select a class
I don't see .ui-btn-text anywhere being used as a class
I got your code to work using this:
$('.cl_button1').text('some text');
Test Here: http://jsfiddle.net/S9asF/
A better solution is to refresh the page:
$(currentPage).trigger('create');
$(currentPage).page();
$('#buttonx').children('.ui-btn-inner').children('.ui-btn-text').text("Some Text");