First of all I'm no javascript expert at all, actually I am totally new to javascript. The function I use is copy pasted and edited, so I am rly not into this. For some how I can not figure out how to resolve the input text from that form.
Javascript code:
function addInput(type) {
// Create an input type dynamically.
var element = document.createElement("input");
// Assign different attributes to the element.
element.setAttribute("type", "text");
//element.setAttribute("value", type);
element.setAttribute("name", "text");
var foo = document.getElementById("fooBar");
// Append the element in page (in span).
foo.appendChild(element);
};
The method call in xhtml is :
<h:form>
<h:messages infoClass="success" errorClass="error"
warnStyle="warning" />
<div class="info">
<span class="required">*</span>
<h:outputText value=" = #{msg['required']}" />
</div>
<div class="widget box" style="width: 40%; float: left">
<div class="widget-header">
<i class="fa fa-bars" /> #{msg['common']}
</div>
<div class="widget-content">
<div class="form_wrapper">
<label>#{msg['projectname']}:<span class="required">*</span></label>
<h:inputText class="inputText"
value="#{projectBean.project.name}" label="#{msg['firstname']}"
required="true" autocomplete="off" />
<util:helptext helptext="#{msg['projectname.desc']}" show="true" />
</div>
</div>
</div>
<div class="widget box" style="width: 40%; float: left">
<div class="widget-header">
<i class="fa fa-bars" /> #{msg['workpackage']}
</div>
<div class="widget-content">
<label>#{msg['workpackagename']}:</label><br />
<span id="fooBar"><br /></span> <INPUT type="button" value="Add"
onclick="addInput()" />
<div style="clear: left;"></div>
</div>
</div>
<div style="clear: left;">
<h:commandButton id="button" class="button"
value="#{msg['button.save']}"
action="#{projectBean.createProject}" />
</div>
</h:form>
But how do I get the values of the input text in my bean?
You don't need javascript for passing value to bean. In your code already exist h:inputText which will do it. You need create proper Java class with getter and setter for property used in value attribute of h:inputText.
Related
I am showing a modal using uikit (documentation) by setting up my button:
<button class="uk-button uk-button-default uk-button-small" uk-toggle="target: #modal-category-update" aria-expanded="false" data-category-name="Foo">
<span uk-icon="pencil" class="uk-icon"></span> Rename Category
</button>
<!-- etc... -->
<div id="modal-category-update" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Rename Category</h2>
<form id="form-category-update">
<input type="hidden" name="ExistingCategoryName" />
<input class="uk-input" type="text" placeholder="Name (Required)" name="CategoryName" required />
</form>
<p class="uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
<button class="uk-button uk-button-primary" type="submit" form="form-category-update" disabled>Rename</button>
</p>
</div>
</div>
And what I need to do is pass the value in data-category-name to my hidden input in the form in the modal.
I found a Stack Overflow article (here) where the questioner claims to have answered their own answer by referencing the button in the button's click event. But I'm not satisfied with the answer.
Is there no way for the modal to reference which DOM opened it? Ideally, I would like to listen to the beforeshow event, grab the element that invoked the DOM, and then grab my data attribute.
I ran into this earlier so .. you're right about targeting beforeshow event, but you really can't get the calling button from called modal. Instead, you can attach event listener to toggle element. This way, you can access calling button (toggle) and the modal (target).
// const element = document.querySelector('button[uk-toggle]'); // not needed in this example
document.addEventListener('beforeshow', function(el) {
// get the hidden input
const hiddenInput = el.target.querySelector('input[name="ExistingCategoryName"]');
// get original category name from the button
const categoryName = el.explicitOriginalTarget.getAttribute('data-category-name');
// set new value
hiddenInput.value = categoryName;
// log new value, just to see the result somewhere
console.log(hiddenInput.value);
});
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit#3.15.14/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit#3.15.14/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit#3.15.14/dist/js/uikit-icons.min.js"></script>
<button class="uk-button uk-button-default uk-button-small" uk-toggle="target: #modal-category-update" aria-expanded="false" data-category-name="Foo">
<span uk-icon="pencil" class="uk-icon"></span> Rename Category
</button>
<!-- etc... -->
<div id="modal-category-update" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Rename Category</h2>
<form id="form-category-update">
<input type="hidden" name="ExistingCategoryName" />
<input class="uk-input" type="text" placeholder="Name (Required)" name="CategoryName" required />
</form>
<p class="uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
<button class="uk-button uk-button-primary" type="submit" form="form-category-update" disabled>Rename</button>
</p>
</div>
</div>
I am trying to build a smiley survey using only Front-End.
After hitting one of my radio buttons, the content should become visible for comments. My CSS is set up to display: none.
I have tried to do it using jQuery but nothing seems to be working.
Many thanks for your suggestions!
$("input[type='radio']").change(function(event) {
var id = $(this).data('id');
$('#' + id).addClass('face-cc').siblings().removeClass('none');
});
<div class="cc-selector row" id="moods">
<div class="col">
<input type="radio" type="radio" name="smile" value="angry" />
<label class="face-cc" for="angry">
<span class="far fa-angry" aria-hidden="div"></span>
</label>
<p>Terrible</p>
</div>
<div class="col">
<input type="radio" name="smile" value="grin-stars"/>
<label class="face-cc" for="grin-stars">
<span class="far fa-grin-stars" aria-hidden="div"></span>
</label>
<p>Excellent</p>
</div>
</div>
<div class="none" id="text">
<div class="container">
<form action="/action_page.php">
<div class="row p-5">
<div class="col-sm-12">
<div class="form-group shadow-textarea">
<label for="feedback">If you have any additional feedback,
please let us know below...
</label>
<textarea class="form-control p-2" id="comment" rows="7"
cols="20" placeholder="Comment here...">
</textarea>
</div>
<button type="submit" class="btn btn-danger">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
There are a few things incorrect with your approach. First is your use of the radio buttons in the HTML. For you to easily grab their individual click events and inspect their value, you want to add id attributes to them. I added some id's myself based on the radio button's name attribute that you already added.
Second, the jQuery which you used I changed completely to match thew use of the id attribute which I just added. This will look to see which radio button we just clicked on and if it matches the id of the radio button which will show the element, then we show the element accordingly.
You can also accomplish show/hide via CSS. I removed your CSS class of display: none; for the above to work, but you can keep it and use jQuery's toggleClass or addClass and removeClass using the above logic.
A few other comments. I simplified the logic by adding a ternary which you can read more on if you have not seen this syntax.
Last but not least is a quick search on StackOverflow can help, I found this answer which is the exact fix which you needed in your code from a jQuery perspective. I took the time to explain my approach here because you also needed HTML and CSS fixes to your approach.
If you think this answer helped, then feel free to 'accept' or 'mark up' the answer and welcome to Stack Overflow.
var text = $('#text');
var showId = 'grin-stars';
$('input[type="radio"]').click(function() {
$(this).attr('id') === showId ? text.show() : text.hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cc-selector row" id="moods">
<div class="col">
<input id="angry" type="radio" name="radioBtn" value="angry" />
<label class="face-cc" for="angry">
<span class="far fa-angry" aria-hidden="div"></span>
</label>
<p>Terrible</p>
</div>
<div class="col">
<input id="grin-stars" type="radio" name="radioBtn" value="grin-stars"/>
<label class="face-cc" for="grin-stars">
<span class="far fa-grin-stars" aria-hidden="div"></span>
</label>
<p>Excellent</p>
</div>
</div>
<div id="text">
<div class="container">
<form action="/action_page.php">
<div class="row p-5">
<div class="col-sm-12">
<div class="form-group shadow-textarea">
<label for="feedback">
If you have any additional feedback, please let us know below...
</label>
<textarea class="form-control p-2" id="comment" rows="7"
cols="20" placeholder="Comment here...">
</textarea>
</div>
<button type="submit" class="btn btn-danger">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
plunkr link
https://plnkr.co/edit/vuktW1bWSNIoV43Qp8DC?p=preview
<form name="myForm">
<div ng-repeat ="ndc in NDCarray">
<div class="col-sm-4 type7" style="font-size:14px;">
<div style="margin-bottom:5px;">NDC9</div>
<label>Number:
<input type="number" ng-model="ndc.value"
min="0" max="99" name="{{'input_'+$index}}" required>
</label>
<div role="alert">
<span class="error" ng-show="myForm.input.$dirty && myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.number">
Not valid number!</span>
</div>
<tt>value = {{example.value}}</tt><br/>
<tt>myForm['input_{{$index}}'].$valid = {{myForm['input_'+$index].$valid}}</tt><br/>
<tt>myForm['input_{{$index}}'].$error = {{myForm['input_'+$index].$error}}</tt><br/>
</div>
<div class="col-sm-4 type7 " style="font-size:14px;">
<div style="padding-top:20px; display:block">
<span class="red" id="delete" ng-class="{'disabled' : 'true'}" ng-click="NDCdelete($index)">Delete</span>
<span>Cancel </span>
<span id="addRow" style="cursor:pointer" ng-click="NDCadd()">Add </span>
</div>
</div>
</div>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
<button>Save</button>
</form>
we can enter the value in number and click add, it will create new textbox with same option (delete,cancel,add). That textbox has some validation
Required
Min and Max range
If i create 4 text-boxes dynamically by clicking add and changing the value of any textbox causes validation failed means , i want to disable the save button which is outside of ng-repeat.
if any textbox failed in validation need to disable the save button.
Can you try the following:
<button ng-disabled="!myForm.$valid">Save</button>
As far as I understand your question this is what you are trying to achieve?
I have a simple button:
<p><button class="btn btn-lg btn-success btn-parks"
onclick="search()">Get started today</a></p>
On click I want to completely replace the above code with a search field. I'm wondering what the best way is to replace the code above with the code for the search field onclick using JavaScript or JQuery.
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
Use element.outerHTML='NEW HTML'
To get the current element, pass this as argument
To replace p element as well, Use elem.parentElement.outerHTML => parentElement will return parent node of the owner node..
Try this:
var html = '<div class="box">\
<div class="container-1">\
<span class="icon"><i class="fa fa-search"></i></span>\
<input type="search" id="search" placeholder="Search..." />\
</div>\
</div>';
function search(elem) {
elem.outerHTML = html;
}
<p>
<button class="btn btn-lg btn-success btn-parks" onclick="search(this)">Get started today</button>
</p>
First of all - your code is not valid: tag starts as <button> but ends as </a>.
To hide initial search .box you can place it in <script> tag and set it's type attribute to unrecognizable (random text). After clicking button take this template inner html and replace it with your code.
Also I have passed this to function to get element you clicked, so you can have multiple same purpose elements.
function search(el) {
$(el)
.parents()
.eq(1)
.html($('#box-tpl').html())
;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>
<button class="btn btn-lg btn-success btn-parks" onclick="search(this)">Get started today</button>
</p>
</div>
On click I want to completely replace the above code with a search field. I'm wondering what the best way is to replace the code above with the code for the search field onclick using JavaScript or JQuery.
<script type="text/tmpl" id="box-tpl">
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
</script>
you can use onclick
$('#id').on('click', function(e){
$('#id').replaceWith('<input type="text" name="q" size="25" id="newelement" value=""/>');
});
if you want cursor in input field in onclick event
$("newelement").focus();
Try this:
function search(){
var button = document.getElementsByClassName('btn btn-lg btn-success btn-parks');
var button0 = button[0];
button0.outerHTML = ('<div class="box"> <div class="container-1"> <span class="icon"><i class="fa fa-search"></i></span> <input type="search" id="search" placeholder="Search..."/> </div></div>');
}
Use jQuery's hide() and show() functions:
$('button').click(function(){
$('.button').hide();
$('.box').show();
});
$('button').click(function(){
$('.button').hide();
$('.box').show();
});
.box{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="button">
<button class="btn btn-lg btn-success btn-parks" onclick="search()">Get started today</button>
</p>
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
jsFiddle with Bootstrap styles
Can you please take a look at this demo and let me know why I am not able to ONLy remove the .check-wrap classes if exist? what is happening now the .unwrap() is even removing the .well
$("#un-mask").on("click", function() {
if ($("input:checkbox").parent().is('.check-wrap'))
$("input:checkbox").unwrap("<span class='check-wrap'></div>");
});
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="well">
<input type="checkbox" />
<span class="check-wrap">
<input type="checkbox" />
</span>
<span class="check-wrap">
<input type="checkbox" />
</span>
</div>
</div>
<button class="btn btn-default" id="un-mask">Yes</button>
jQuery's .unwrap() method does not accept any arguments. It removes the parent of every matched element. Since your div.well is the parent of the first checkbox input, it is also removed.
One way to fix this would be to wrap the first checkbox input in a tag of some kind just like the others:
$('input:checkbox').unwrap();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="well">
<span class="check-wrap">
<input type="checkbox" />
</span>
<span class="check-wrap">
<input type="checkbox" />
</span>
<span class="check-wrap">
<input type="checkbox" />
</span>
</div>
</div>
<button class="btn btn-default" id="un-mask">Yes</button>
https://api.jquery.com/unwrap/