Please see my code below and help me correct what I'm doing wrong:
$scope.more_work_counter=0;
$scope.appendWork = function(){
$scope.more_work=$sce.trustAsHtml($scope.more_work+'<input type="text" class="form-control more-work-fields" id="{{more_work_counter}}"><button class="btn btn-danger del-more-work-btn">-</button>'+'</br>');
$scope.more_work_counter++;
}
Below is the image of my DOM along with IDs I want to add in the input fields:
Judging by your sample code, you may want to add more fields to display in your html. You can use ng-repeat directive, check this plunk I've made
controller code:
$scope.fields = [
{id: 1}
];
$scope.addField = function(){
$scope.fields.push({
id : $scope.fields.length
});
}
html
<div ng-repeat="field in fields">
<input type="text" class="form-control more-work-fields" id="{{$index}}">
<button class="btn btn-danger del-more-work-btn">-</button>
</div>
<button ng-click="addField()">add field</button>
ok i did this and it worked... the old technique used in php so many times
$scope.appendWork = function(){
$scope.more_work=$sce.trustAsHtml($scope.more_work+'<input type="text" class="form-control more-work-fields" id="'+$scope.more_work_counter+'"><button class="btn btn-danger del-more-work-btn">-</button>'+'</br>');
$scope.more_work_counter++;
}
Related
I'm making a website to edit a special image faster, and I want to change the text from the <text> thing when clicking the button insert from the input type "creatorcode".
input type creatorcode and insert
<input type="text" id="entercolor" placeholder="Creator Code" onkeydown="submitOnEnter(event)" onfocus="clearWrongInput();" style="z-index:0;">
<button class="btn" type="button" style="z-index:0;" onclick="myFunction"();>Insert</button>
script
<script type="text/javascript">
function myFunction() {
document.getElementByTagName("text").innerHTML=document.getElementByTagName("text");
}
</script>
text
<b><text>creator-code</text></b>
anyone?
There are few mistakes in code which were fixed in below code snippet. Try this I hope it'll help you out. Thanks
Mistake 1 - Change input type="creatorcode" to input type="text" there is no creatorcode input type in HTML.
Mistake 2 - Change onclick="myFunction" to onclick="myFunction()" you need to add () after your method name.
function myFunction() {
var code = document.getElementById('entercolor').value;
document.getElementById("newCode").textContent = code;
}
<input type="text" id="entercolor" placeholder="Creator Code" onkeydown="submitOnEnter(event)" onfocus="clearWrongInput();" style="z-index:0;">
<button class="btn" type="button" style="z-index:0;" onclick="myFunction()">Insert</button>
<b><text id="newCode">creator-code</text></b>
Link for jsfiddle:
<input type="text" id="entercolor" placeholder="Creator Code" style="z-index:0;">
<button class="btn" type="button" style="z-index:0;" name="insert_button">Insert</button>
<div>
Some text here...
</div>
</div>
document.getElementsByName("insert_button")[0].onclick = function(){
document.getElementsByTagName("div")[0].innerHTML = document.getElementById("entercolor").value
}
https://jsfiddle.net/6drvcbz0/
Hope that helps.
Is there a way to grab text from input area and put it to the end of "href" link and to "download=''" area? I added example below:
Code:
<input id="username" type="text" value="">
<a class="btn btn-block btn-lg btn-primary" href="http://mypage.com/test/(textarea text here)" download="(textarea text here).png">Download Image</a>
Result when user enter text:
<input id="username" type="text" value="Monster">
<a class="btn btn-block btn-lg btn-primary" href="http://mypage.com/test/Monster" download="Monster.png">Download Image</a>
Thanks for suggestions.
I've created a fiddle with a possible solution. might be minimized if you want to get rid of the variables declarations, but I like my code clean. https://jsfiddle.net/sctvdL0h/1/
Html
<input id="username" type="text" value="">
<a class="btn btn-block btn-lg btn-primary" href="" download="(textarea text here).png" id="download_link">Download Image</a>
JS
var input = document.getElementById("username");
var downloadLink = document.getElementById("download_link");
var baseLink = 'http://mypage.com/test/';
var baseFormat = '.png';
var updateLink = function() {
var currentValue = input.value;
downloadLink.href = baseLink + currentValue.toString();
downloadLink.setAttribute('download', currentValue.toString() + baseFormat);
};
input.addEventListener("keyup", function() {
updateLink();
});
input.addEventListener("change", function() {
updateLink();
});
In this way you can do it configurable (change url and file extension also). This is just a possible solution not the only one.
Add id of 'mylink' to your anchor tag.
<a id="mylink" class="btn btn-block btn-lg btn-primary" href="http://mypage.com/test/Monster" download="Monster.png">Download Image</a>
Then this code will set it. You will need to decide which event you want to trigger the setting of the href. onblur is a common one.
document.getElementById("mylink").href=document.getElementById("username").value;
You can use Javascript code. i give u an exemple.
<script>
(function ready() {
var input = document.getElementById('username'),
link = document.getElementById('getLink');
link.onclick = function() {
link.download = input.value + ".png";
window.open('http://mypage.com/test/' + input.value,'_blank');
}
})();
</script>
<input id="username" type="text" value="">
<a id="getLink" class="btn btn-block btn-lg btn-primary" href="">Download Image</a>
I have form, with two buttons:
<form action="/Book/Crud" method="post">
<input type="text" name="bookInput" />
<button type="submit">Save</button>
<button type="submit">Save and exit</button>
</form>
How can I pass to my controller, or, whatever, additional value, which depends on button?
<button type="submit" ?????? >Save</button> What should be here?
I am using Asp.Net Core, with this controller:
public IActionResult Crud(string bookInput)
{
//removed code for brevity
}
You can use jquery to solve the issue:
cshtml
<form action="/Book/Crud" method="post">
<input type="text" name="bookInput" />
<button type="submit" name="Submit">Save</button>
<button type="submit" name="SubmitAndExit">Save and exit</button>
</form>
jquery
$("form").submit(function () {
var btn = $(this).find("input[type=submit]:focus" );
var btnName = btn.attr('name');
var input = $("<input>")
.attr("name", "btnName").val(btnName);
$(this).append(input);
return true;
});
The answer of Bobby Jack is correct. I will elaborate on this answer in order to show how to access this input from within the controller. If you would use the following HTML:
<form action="/Book/Crud" method="post">
<input type="text" name="bookInput" />
<button name="action" value="save" type="submit">Save</button>
<button name="action" value="save-exit" type="submit">Save and exit</button>
</form>
You could reach the values: 'save' and 'save-exit' by defining another parameter in the controller like this:
// The parameter 'action' is what will contain the values specified in the button.
public IActionResult Crud(string bookInput, string action)
{
// Implementation
}
The name of the parameter needs to correspond to the value in the 'name' attribute of the form button (in this case 'action'). When the button is clicked, ASP.net will automatically assign the value of the 'value' attribute to the controller parameter. Or more specifically the controller parameter 'action' will have a value of 'save' or 'save-exit' retrieved from the attribute 'value'.
<form action="/Book/Crud" method="post">
<input type="text" name="bookInput" />
<button name="action" value="save" type="submit">Save</button>
<button name="action" value="save-exit" type="submit">Save and exit</button>
</form>
Like other inputs, the button can have a name and value attribute which will be submitted to your backend on submit. Only the button that was clicked will send its value. You need to use whatever mechanism you're using to access the POSTed variable named action (in this example). Then just switch on whether it's equal to save or save-exit and perform the relevant function.
add different names
<button type="submit" name="save">Save</button>
<button type="submit" name="saveExit">Save and exit</button>
Example from VB.net:
<asp:Button id="cmdKeyphraseAdd" runat="server" Text="Add Keyphrase" onclick="cmdKeyphraseAdd_Click"></asp:Button>
I have an Angular Dart component with the following html:
EDIT: For some reason some of my html did not copy properly. outside of the label tag I have:
<div class="btn-group btn-group-vertical" data-toggle="buttons">
`
<label ng-repeat="item in items" class="btn btn-primary btn-sm btn-block" ng-show="isItemVisible(item)">
<input type="radio" name="options" value="{{item}}" ng-model="selected">{{item}}
<span class="badge pull-right"><span class="glyphicon glyphicon-ok"></span></span>
</label>
</div>`
However, this never updates the model. I have also tried using onclick, ng-click, and ng-change with the same result- the functions never get called. Is there some directive that I'm using incorrectly?
Use Future in your ng-click so it will allow your model to get updated.
<input type="radio" name="options" value="{{item}}"
ng-model="selected" ng-click="radioButtonClicked();">{{item}}</input>
//Component Code:
void radioButtonClicked(){
new Future((){
//Use your selected model here.
});
}
$parent should do the trick. Here is working example:
HTML
<div>
<div ng-repeat="item in items">
<label for="{{item.name}}">{{item.name}}:</label>
<input id="{{item.name}}" type="radio" ng-model="$parent.$parent.selected" ng-value="item.value" />
</div>
<strong>Selected value:</strong> {{$parent.selected}} <br/>
</div>
Controller
$scope.items = [{
name:'Item1',
value: 'value1'
}, {
name:'Item2',
value: 'value2'
}, {
name:'Item3',
value: 'value3'
}];
$scope.selected = null;
I am using Parsley.js for validating my Bootstrap formatted HTML forms. It works pretty fine. What I want to do now is to change the color for the submit button if validation fails.
I read the documentation from Parsley.js, but I could not find something like adding a class to the submit button, depending on validation.
Example:
<form>
<input type="text" id="fehler" name="fehler" required>
<button type="submit" class="btn btn-default">Submit</button>
</form>
After click (and validation) should it change to something like this:
<button type="submit" class="btn btn-default novalid"></button>
or this:
<button type="submit" class="btn btn-danger"></button>
Try this :
Put an ID on your button like "validateFormButton" and create this method to call after sending your form :
function change_class(formIsValid) {
var btn = document.getElementById("validateFormButton");
if(formIsValid)
btn.className= "btn btn-default novalid";
else
btn.className= "btn btn-danger";
}