I have a DIV that contains many input text.
I need a way in jQuery 1.3.2 to clear all the values inside the inputs onclick.
So when I click on a specific link all the values of the inputs inside that DIV will be cleared.
I do not have any sample code, I just need to know if there is a way to clear all the values of inputs that are inside a specific DIV (not in a FORM, but in a DIV).
yes there is
html like this
<div id="div_id">
<input type="text" value="foo" />
<input type="text" value="foo" />
<input type="text" value="foo" />
<input type="text" value="foo" />
</div>
then jQuery
$('#div_id input[type="text"]').val('');
working demo
What are those inputs? Textboxes? May be this
$("#DivID input:text").val("");
Demo
To clear form element values inside the div use below
function clear_form_elements(id_name) {
jQuery("#"+id_name).find(':input').each(function() {
switch(this.type) {
case 'password':
case 'text':
case 'textarea':
case 'file':
case 'select-one':
jQuery(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}
Try using val proerpty of the input text elements to blank.
Something like:
$("input[type='text']", "#<YOUR_DIV_ID>").val("");
e.g:
<div id="textDiv">
<input type="text" Value="1"/> <br/>
<input type="text" Value="2"/> <br/>
<input type="text" Value="3"/> <br/>
<input type="text" Value="4"/> <br/>
<input type="text" Value="5"/> <br/>
<input type="text" Value="6"/> <br/>
<a name="clickMe" href="javascript:void(0)">Empty Boxes</a>
</div>
<script type="text/javascript">
$(function(){
$("a[name='clickMe']").click(function(){
$("input[type='text']", "#textDiv").val("");
});
});
</script>
Check live example #: http://jsfiddle.net/DKwy8/
$('linkselector').onClick(function() {
$('#DivId input').val('');
});
try
HTML
<div id="myDiv">
<input type="text" value="One">
<input type="text" value="Two">
<input type="text" value="Three">
</div>
Clear
jQuery
$('a#clearDiv').bind('click', function() {
var $div = $('div#myDiv');
$('input[type="text"]', $div).each(function() {
$(this).val('');
});
});
working DEMO
Related
Let's say I click on an element. I'm trying to get the next element with the attribute "for", then return its content (so for="Content I want").
I don't know in advance what the type of element with that attribute will be. Sometimes it's an input, sometimes a label, etc.
In my example, it's a label, but it could be an input. The clicked element would be the div.
This is my HTML:
<div class="styled-placeholder quarter InputText" data-test="">
<label class="input-label" for="Year">Year</label>
<input id="Year" type="number" name="Year" class="input-control required" placeholder="Year" required="" minlength="0" maxlength="4" value="">
<p class="errors-input">Type Your Birth Year</p>
</div>
This is what I have now:
function() {
var attr = jQuery({{Click Element}}).next('[for]').attr('for');
return attr;
}
Your mistake is that you are looking for the next element. Based on your HTML that you have provided, there is no next element. So the element with the for attribute is a child element.
This is how you could get the first child element with attribute for:
$('div').on('click', function(e) {
const el = $(this).children('[for]')[0];
console.log('Attribute value: ' + $(el).attr('for'));
console.log('Content: ' + $(el).html());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="styled-placeholder quarter InputText" data-test="">
<label class="input-label" for="Year">The Year</label>
<input id="Year" type="number" name="Year" class="input-control required" placeholder="Year" required="" minlength="0" maxlength="4" value="">
<p class="errors-input">Type Your Birth Year</p>
</div>
You can do this with simple javascript, no library needed:
document.querySelectorAll('[data-foo="value"]');
let element = document.querySelectorAll('[foo="value"]');
console.log(element[0]);
<button foo="value">Submit</button>
You can use Attribute Equals Selector with jQuery
https://api.jquery.com/attribute-equals-selector/
$("[value='Test value']").click(function() {
console.log($(this).nextAll("label[for]:first").attr('for'));
});
$("[data-test]").click(function() {
//console.log($(this).data('test'));
console.log($(this).nextAll("label[for]:first").attr('for'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Test value"><br>
<label for="test1">Test Data</label>
<button data-test="test">test data</button>
<label for="test2">Test Data</label>
I would like all text input to be required after selecting the appropriate checkbox.
I try this code:
$('#some_checkbox').change(function () {
if (this.checked) {
$('.some-div input[type="text"]').prop('required', true);
} else {
$('.some-div input[type="text"]').prop('required', false);
}
});
<div class="some-div">
<input type="text" name"foo" placeholder="foo">
<input type="text" name"foo2" placeholder="foo">
</div>
But not working
First of all, the = sign is missing on the name attribute of your text inputs.
Next just for testing and demonstrating I've added a formular with a submit button and your desired checkbox. The function onChangeSomeCheckbox() will change the required property of all inputs with the type text in the class given of the data-required from the checkbox.
$('#some_checkbox').on('change', onChangeSomeCheckbox);
function onChangeSomeCheckbox(event) {
var $checkbox = $(event.target);
$($checkbox.data('required') + ' input[type="text"]').prop('required', $checkbox.prop('checked'));
}
input {
margin-bottom: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="some_checkbox">
require texts
<input type="checkbox" id="some_checkbox" data-required=".some-div" />
</label>
<form>
<div class="some-div">
<input type="text" name="foo" placeholder="foo" />
<input type="text" name="foo2" placeholder="foo" />
</div>
<input type="submit" />
</form>
is there any way in angular 2 to pick name/id of input inside divs?
html:
<div class="form-pages" (click)='function()'>//if it's possible then what should I put into function param?
<fieldset>
<input type="text" name="firstName"/>
<input type="text" name="firstName"/>
</fieldset>
</div>
component:
function(str){this.var=str}
Not sure if template variables of child elements can be accessed
<div class="form-pages" (click)='function(input1.value, input2.value)'>//if it's possible then what should I put into function param?
<fieldset>
<input #input1 type="text" name="firstName"/>
<input #input2 type="text" name="firstName"/>
</fieldset>
</div>
If this doesn't work you can use
<div class="form-pages" (click)='function()'>//if it's possible then what should I put into function param?
<fieldset>
<input #myinput type="text" name="firstName"/>
<input #myinput type="text" name="firstName"/>
</fieldset>
</div>
#ViewChildren('input') inputs:QueryList<ElementRef>;
myFunction() {
let inputs = this.inputs.toArray();
console.log(inputs[0].value;
console.log(inputs[1].value;
}
Ok, I did it alone, thanks for previous answer, but for me it works well, It's needed to call $event.target.name method which will return name of clicked target.
<div (click)="setFocus($event.target.name)">
<input type='text' name='input1 />
<input type='text' name='input2 />
</div>
in componentsetFocus(str){this.var = str)
I'm in the process of converting an existing website to use MVC and Entity Framework.
The layout / styling is all supposed to stay the same, and in order to follow that guideline I need to submit my login form using an <a> tag, because it has a custom image for the button.
Here's my form:
#using (Html.BeginForm("Login", "Login", FormMethod.Post, new { id = "login", action = "Login" }))
{
<label>
<span>Username
</span>
<input type="text" name="UserName" id="UserName" class="input-text required" />
</label>
<label>
<span>Password
</span>
<input type="password" name="Password" id="Password" class="input-text required" />
</label>
<label>
<input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
<span class="checkboxlabel">Remember Me</span>
</label>
<div class="spacer">
</div>
}
As you can see, the <a> tag formerly submitted login info using javascript. This is not what I'm looking to accomplish.
How can I change that tag to submit my form to my controller action?
I've made small changes
HTML
<form action="test.aspx" type="POST">
<label>
<span>Username</span>
<input type="text" name="UserName" id="UserName" class="input-text required" />
</label>
<label>
<span>Password</span>
<input type="password" name="Password" id="Password" class="input-text required" />
</label>
<label>
<input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
<span class="checkboxlabel">Remember Me</span>
</label>
<div class="spacer">
Login
</div>
</form>
jquery
$(document).ready(function(){
$(document).on("click",".login-button",function(){
var form = $(this).closest("form");
//console.log(form);
form.submit();
});
});
JSFiddle
Typically you do not want to put a lot of javascript inside html tags, but if this only occurs once in your solution it will be fine. If however, there are anchor tags all over that need to post using Gokan's solution would work better with a marker class and some javascript in a common place.
Change your anchor tag to look more like this:
Just need to change Single line, For Optimization I think this one is a best way.
#using (Html.BeginForm("Login", "Login", FormMethod.Post, new { id = "login", action = "Login" }))
{
// your HTML code
<div class="spacer">
</div>
}
dear i have 2 text and 2 checkbox:
<input type="checkbox" id="class1">
<input type="checkbox" id="class2">
<div id="hidden">
<input type="text" id="valclass1">
<input type="text" id="valclass2">
</div>
i want if i checked at "class1" then click show button "valclass1" can show. but if not checked, it hidden.how do i do that?
I would do it like this:
<script type="javascript/text" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="javascript/text">
$(function()
{
$('#ShowButton').click(function()
{
if($('#class1').is(':checked')) $('#valclass1').show();
if($('#class2').is(':checked')) $('#valclass2').show();
});
});
</script>
<input type="checkbox" id="class1">
<input type="checkbox" id="class2">
<input type="button" id="ShowButton" />
<input type="text" id="valclass1" style="display: none">
<input type="text" id="valclass2" style="display: none">
It would work, but probably doesn't answer your question. You need to learn more about JavaScript to be able to roll your own solution.
Check out W3C's JavaScript tutorial