Develop Reference

Pass value for asp-rout-data using jQuery code

I want to pass value of input tag with class "count"; I want to pass the value to asp-rout-count property in the a tag using jQuery or js. I have tried to do that with this code but I could not.
html markup:
<div class="qty col-4" style="float:left">
<h5>العدد </h5>
<span class="plus bg-info">+</span>
<input type="number" class="count" value="1" max="10">
<span class="minus bg-info">-</span><br /><br />
#if (Model.BuyingPrice <= currentUser.Balance)
{
<a asp-action="Buy" asp-route-id="#Model.Id" asp-route-count="r_id" class="btn btn-outline-info col-12">إشتري الان</a>
}
#if (Model.BuyingPrice > currentUser.Balance)
{
<a class="btn btn-outline-info col-12" href="#" onClick="alert('رصيدك الحالي غير كافي')">إشتري الان</a>
}
</div>
and jQuery part:
<script>
var r_id = getIdFromURL();
function getIdFromURL() {
var id = $(".count").val();
return id;
</script>

How to clear text id in javascript

I have a one text box search, and one button,when i add the text and click button, related data will be getting but when i click another search.that is taking same id,previous id not clearing. how to clear that id
<div class="col-lg-4 col-sm-4 col-xs-12">
<i class="glyphicon glyphicon-search"></i>
<div class="form-group">
<input type="text" class="form-control" id="isbncollegeid" data-ng-model="isbncollege" placeholder=" Search By college ISBN" name="isbncollegeid">
</div>
</div>
<div class="col-sm-4">
<br />
<div class="form-group">
<input type="hidden" id="bookcollgeIsbn" name="bookcollgeIsbn" />
<button type="button" class="btn btn-sky" id="IsbntcolDetails" data-ng-disabled="LibraryIsbnForm.$invalid" data-ng-click="DetailscolByISBN()">Get Details<i class="fa fa-exclamation"></i>
</button>
<button type="button" class="btn btn-sky" id="clear" data-ng-click="ClearISbnCollege()">Clear<i class="fa fa-exclamation"></i>
</button>
</div>
</div>

In your ClearISbnCollege just make isbncollege model empty
$scope.ClearISbnCollege = function() {
$scope.isbncollege = "";
}
When you will click the Clear button, input will be emptied.

You can use below line of code after getting results in javascript:
document.getElementById('elementid').value = "";
in Jquery:
$('#elementid').val("");

Changing HTML label in Dagre d3 using jquery

I'm trying to dynamically change the HTML in a node label in Dagre D3:
$('.unselected-node').find('.inputTemplate').css( "display", "inline-block" );
However, this doesn't work. The only way I'm able to change .unselected-node is by accessing the HTML directly:
g.node('id').label += "<div>" + inputTemplate + "</div>";
This means I have to manually code and store HTML as a string somewhere in a javascript file, which is very unideal. Is there anyway to dynamically change the label?
This is the HTML in question, though the problem is more generic than simply this example, since it happens whenever I try to use jQuery to change dagre d3 html:
<div>
<div class="<%= templateData.class %>" data-params=<%= templateData.jsonData %>>
<span class ="control glyphicon glyphicon-pawn test" style="color:<%= templateData.responseTypeColor %>"></span>
<span class="pull-right"><i><%= templateData.response._id %></i></span>
<span> <%= templateData.response.created_by %></span>
<h3 class="templateData.response.responseTitle"><%= templateData.response.title %></h3>
<p class="templateData.response.responseText"><%= templateData.response.text %></p>
<button type="button" class="btn btn-link btn-sm reply-button">Reply</button>
</div>
<div class="inputTemplate" style="display:none">
<hr style="border: none; height:1px; background-color: black ">
<form id="responseForm">
<div id="newResponseTitleDiv" class="form-group row">
<div id="suggestedTitles">
Response title:
<input class="typeahead form-control" style="width: 50%; display:inline-block;" type="text" data-toggle="popover" data-trigger="focus" data-content="Describe a specific position that you will defend." id="newResponseTitle" name="responseTitle">
<button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#responseModal">Browse</button>
</div>
</div>
<div class="form-group row">
<textarea rows="10" style="width:90%; border:solid .33px gray; resize: none;"></textarea>
</div>
<div class="form-group row">
<button type="button" id="test" class="btn btn-sm submit-reply-button">Submit</button>
</div>
</form>
</div>
</div>
I also tried doing d3.select(...) on inputTemplate and using
attr.('visibility', 'hidden')
but it doesn't seem to work either.

HTML Javascript - Replace a button with a search field onclick

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

want to reset only the last newly inserted dynamically block on the click of button

var qBlock='<form id="resetblock"><div class="newqandaBlock"><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-question"></i></span><input type="text" class="form-control" placeholder="Question Asked "><button type="button" class="btn btn-purple closequest" style="position: absolute;top: 3px;"><span> <i class="fa fa-close"></i></span></button></div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-comments"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div></div></form>';
$("#addQuestion").on("click",function(){
$(qBlock).insertAfter(".qandaBlock");
});
$("#resetblock").on("click",'.closequest', function(){
alert("Do you really want to remove the question?!?");
$(this).closest(".newqandaBlock").remove();
});
$("#resetblock").on("click",'.resetlatest', function(){
alert("Do you really want to reset the question?!?");
$(this).closest('form').find("input[type=text], textarea").val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<form id="resetblock" name="resetblock" >
<div class="qandaBlock">
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-question"></i></span>
<input type="text" class="form-control" placeholder="Question Asked ">
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-reply"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea>
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-comments"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div>
</div>
<button type="button" class="btn btn-default resetlatest" id="resetlatest" ">Reset</button>
<button type="button" class="btn btn-purple" id="addQuestion"><i class="fa fa-plus-square-o"></i> Add Another Question</button>
</div>
</form>
</body>
</html>
The above line of code will reset the whole form. But , How to reset only the last newly inserted block of question , answer and comment. I dont want on the click of the reset button, the whole form to be reset. I only want to reset the last newly inserted block to be clear its fields with blanks on the click of reset button.

something like this: http://jsfiddle.net/swm53ran/25/
to achieve getting the last or newly inserted element, i used jquery's :last-child selector as seen below.
its also better (and more maintainable) to use .clone() than it is to build html with javascript if you have a template.
<div class="content">
<div id="template" class="section">
<input class="question" type="text" />
<br/>
<textarea class="answer"></textarea>
<br/>
<textarea class="comments"></textarea>
</div>
</div>
<br/>
<br/>
Reset Last Question
Add Another Question
$('.add').on('click', function() {
var clone = $('#template').clone(true).attr('id', '');
clone.find('.question').val('');
clone.find('.answer').val('');
clone.find('.comments').val('');
clone.appendTo('.content');
});
$('.reset').on('click', function() {
console.log($('.section').length);
var last = $('.content .section:last-child');
last.find('.question').val('');
last.find('.answer').val('');
last.find('.comments').val('');
});

A few things to change, other than the sh**ty markup:
1) Stop the forms from nesting each other and put the new form at the bottom after other forms:
$("#addQuestion").on("click",function(){
$(qBlock).insertAfter(".qandaBlock");
});
to
$("#addQuestion").on("click",function(){
$('body').append(qBlock); // Append the form to the body, so it will sit after the last form
});
2) Remove all id="resetblock", from markup and from the JS
3) Change all $("#resetblock").on("click" to $(document).on("click"
4) Change the alert's to confirm's:
var blnReset = confirm("Do you want to reset the question?");
if (blnReset == true) {
//Reset the question
}