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("");
Related
I have a form on the page and displayed it as none. And there is a button in the page I want when clicking on the button the form to display.
How can I do that?
<button type="button" class="btn btn-primary add-city">اضافه مدينة جديدة +</button>
and form code is this
<div id="forma">
<div class="form-head">
<p id="add-city">+اضافة المدينة</p>
<i class="fa fa-times-circle close" aria-hidden="true"></i>
</div>
<form class="">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>الدولة<span>*</span></label>
<select class="form-control">
<option>اختر الدوله </option>
</select>
</div>
<div class="form-group">
<label>اسم المدينه(عربي)<span>*</span></label>
<input type="text" class="form-control" id="email">
</div>
</div>
<div class="col-md-6">
<div class="form-group ">
<label>المحافظة<span>*</span></label>
<select class="form-control">
<option>اختر المحافظه </option>
</select>
</div>
<div class="form-group">
<label>اسم المدينه(انجليزي)</label>
<input type="text" class="form-control" id="email">
</div>
</div>
</div>
</div>
</form>
<div class="form-footer">
<button type="button" class="btn btn-primary">ارسال</button>
<button type="button" class="btn btn-secondary">الغاء</button>
</div>
</div>
I made a div with an id called forma so that I can call it in javascript. But I don't know the right way.
You can add an onclick attribute to the button that changes the display to block.
onclick="document.getElementById('forma').style.display = 'block'"
Just use the jQuery click property and show property
$( "#idbutton" ).click(function() {
$("#idform").show();
});
If you are using Bootstrap.js, you can safely use jQuery because it's required. Assuming you should click #add-city button to display the form, simply add to your app.js or inside your <script> tags
$('#add-city').click(function() {
$('#forma').show();
});
In order to toggle the form (show/hide) on every click, you could do something like
$('#add-city').click(function() {
$('#forma').toggleClass('hidden');
});
Here is my form and I tried to take all the values from the form when submit button is clicked
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<fieldset>
<!-- Form Name -->
<legend>User Form</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">User Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-cloud"></i></span>
<input name="name" placeholder="Enter User Name" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Age</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-cloud"></i></span>
<input name="age" placeholder="Enter Age " class="form-control" type="text">
</div>
</div>
</div><div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button name="submitbutton" type="submit" class="btn btn-success" >Submit <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
Then I write the script to take all values when submit
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var name = $("#name").val();
var age= $("#age").val();
console.log(name);
console.log(age);
});
});
</script>
But it is logging the values when submitting.Any help is appreciated
$("#submit").click(function(){
You are assigin a click event handler to an element with id submit. There is no such element in you code.
What you could rather do is assign a handler to the form's submit event. Also, there are no elements with id name and age. You can use the query selector with the input's name attribute.
$('#contact_form').submit(function(e) {
var name = $('#contact_form input[name="name"]').val();
var age = $('#contact_form input[name="age"]').val();
console.log(name);
console.log(age);
});
You can get all the form input values by using $('#formId').serialize() function. But as per your code:
<button name="submitbutton" type="submit" class="btn btn-success" >Submit <span class="glyphicon glyphicon-send"></span></button>
you are using a button of type submit, which submits the form and you did not get any value in your ajax code. So change it it:
<button name="submitbutton" type="button" class="btn btn-success" >Submit <span class="glyphicon glyphicon-send"></span></button>
and try again. To get the individual value you can use
var name = $("#name").val();
with the above mentioned change.
I need to delete the last textarea in a div.
<div id="container">
<!-- question 1st box starts here -->
<div class="col-md-4">
<div class="questionparts">
<div class="form-group">
<label for="title">Questions</label>
<textarea class="form-control" name="questions0" id="questions0" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea>
</div>
<div class="clear"></div>
<div class="questionshowp">
<h4 class="page-title">Multiple Choice</h4>
<h6>Your audience can select from these answers:</h6>
<div class="form-group">
<input name="questions1" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text">
<div class="secondsec">
<button type="button" class="btn btn-sm btn-success" style="line-height:12px;"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-danger" style="line-height:12px;"><i class="fa fa-minus" aria-hidden="true"></i></button>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- question 1st box end here -->
<!-- question 2nd box starts here -->
<div class="col-md-4">
<div class="questionparts">
<div class="form-group">
<label for="title">Questions</label>
<textarea class="form-control" name="questions0" id="questions0" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea>
</div>
<div class="clear"></div>
<div class="questionshowp">
<h4 class="page-title">Multiple Choice</h4>
<h6>Your audience can select from these answers:</h6>
<div class="form-group">
<input name="questions1" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text">
<div class="secondsec">
<button type="button" class="btn btn-sm btn-success" style="line-height:12px;"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-danger" style="line-height:12px;"><i class="fa fa-minus" aria-hidden="true"></i></button>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- question 2nd box end here -->
</div>
Here I need to delete the last textarea ('in this case 2nd box') always. Check javascript below.
function deleteQuestionField(){
var textareas = $('#container textarea');
console.log('hii',textareas);
if (textareas.length !== 0) {
textareas.last().remove();
}
}
This function is called from a button click event but its not deleting the last textarea.
Simply use jQuery's .remove() (see here for more info):
Give your div that you want to remove a unique id and then call it:
HTML:
....
<!-- question 2nd box starts here -->
<div class="col-md-4" id="someUniqueId">
....
Javascript:
function deleteQuestionField(){
var textareas = $('#container textarea');
console.log('hii',textareas);
if (textareas.length !== 0) {
$("#someUniqueId").remove(); //This will remove the unique id element
}
}
You have the html() function in jQuery
http://api.jquery.com/html/ to remove all codes between an element
The remove() function you used delete the selected element
If you want to delete the content of the textarea, try to use the val() function instead.http://api.jquery.com/val/
$('textarea').val('');
If I understand it correctly if the first textarea is not empty you want to remove the second 'box' . If this is the case you should select the first textarea and not textarea in general (I assume)
firstly add an ID to the second div <div class="col-md-4" id="remove_this"> and call the ID in the remove function
So probably it would be something like:
function deleteQuestionField(){
var textareas = $('#questions0'); //if you want general just use textarea ( `$('#container textarea');`)
console.log('hii',textareas);
if (textareas.length !== 0) {
$("#remove_this").remove();
}
}
Documentation about the .remove function HERE
You want to delete total div ,but you are making delete only textarea element
textareas.last().remove();
//change above code to like below ,it will delete the whole div
$(".col-md-4").last().remove();
With Jquery
$("#item_id").empty();
It works
i am newbie.
I am Creating a button on my homepage,once clicked it shows a modal showing the signin form and i am making a separate html page for my Modal.
Here is my Main Code where the Button is placed in my homepage.
<button id="btn1"><a href="signin.html" class="btn btn-success"data-toggle="modal"data-target="#mymodal"type="button">
<span class="glyphicon glyphicon-edit">
</span> Sign In</a>
</button>
In signin.html
<div class="modal"id="mymodal" >
<h3 class="modal-header">
<h1>
We Are Glad you are Here!
</h1>
</div>
<div class="modal-body">
<div class="container">
<form class="form-signin">
<h6 class="form-signin-heading">
Please sign In</p>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-sm btn-primary" type="submit" data-toggle="modal">Sign in</button>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal"aria-hidden="true">Close</button>
</div> </div>
Issue
Modal ain't popping up on same page but it's going on next page.How should i fix it?so that my Signup form remains on the front page.
Working Example
I think the target element with the id mymodal should be in the same page with button, try to place <div class="modal"id="mymodal" ></div> after the button :
<button id="btn1">
<a href="signin.html" class="btn btn-success" data-toggle="modal"
data-target="#mymodal"type="button">
<span class="glyphicon glyphicon-edit"></span> Sign In
</a>
</button>
<div class="modal"id="mymodal" ></div> //place the target div after button
Hope this helps.
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
}