How do I select dynamic ids in this format? - javascript

I'm trying to select dynamic ids when a user types something into the input fields. My app spits out the input fields in the following format:
<input id="student_1_first_name" />
<input id="student_1_last_name" />
<input id="student_2_first_name" />
<input id="student_2_last_name" />
<input id="student_3_first_name" />
<input id="student_3_last_name" />
etc.
For example, I tried doing this to select the end of the id string:
<script type="text/javascript">
$(document).ready(
function (){
$("input[id$=_first_name]").bind("keyup", run_some_function_here);
run_some_function_here();
$("input[id$=_last_name]").bind("keyup", run_some_function_here);
run_some_function_here();
}
);
</script>
When I do that, Jquery can't seem to select the input ids, so the functions don't run. Do you have any ideas on how I can select the ids correctly?

assign class to each input e.g <input id="student_1_first_name" class="input-class" />
then try this
$(function() {
$('input.input-class').each(function() {
var id = $(this).attr('id');
});
});

$("input[id$=_first_name]") looks like it should work.
Does this give them red borders?
$("input[id$=_first_name]").css({ border: '2px solid red' });
If it does, then the function is probably not being called properly. Are you using anonymous functions or passing a reference to an existing function?
Update
Does this work as intended?
$("input[id$=_first_name]")
.bind("keyup", function() { run_some_function_here(); });

Related

How to access input:required:invalid using jQuery?

Let's say I am validating forms using HTML5. So, if my input field is required, and invalid, I can change the CSS styles to reflect that using the following code:
input:required:invalid, input:focus:invalid {
color: red;
}
Now, how can I determine if an input element is required:invalid or focus:invalid using jQuery?
Something like this:
if ( $('#myInput') has the attribute invalid) { Do something }
Obviously, the condition in the if statement needs to be a condition. How can I figure this out? Thanks!
Could use native checkValidity() inside a filter. There is no jQuery selector for invalid
var invalidInputs = $('#myForm :input').filter(function() {
return !this.checkValidity();
}).each(function() {
console.log(this.name, ' error message is ', this.validationMessage)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input name="noValidation">
<input name="required_w_value" value="test" required>
<input name="required_no_value" required>
</form>

Combine url with multiple same args from submitted form

I have a form with multiple checkboxes, all called filter. When the form gets submitted, they get added to the URL, "example.com/?filter=var", as expected.
When there are multiple checkboxes selected, they get added to the url like so: "example.com/?filter=var&filter=var2".
Is it possible to change this somehow? I need them in the url as "example.com/?filter=var+var2".
Is this possible to achieve somehow? Using Javascript is no problem.
Add a function call to your Submit button and leave your form tag like this <form>.
$(function () {
$('#target').click(function () {
var checkValues = $('input[name=checkboxlist]:checked').map(function() {
return $(this).parent().text();
}).get().join('+');
window.location.href = "http://example.com/?filter="+checkValues;
});
});​
You can use a hidden field for that, and in the submit event you set it's value with the filters. The hidden will get the name as filter and the checkboxes' values will be ignored:
//$("form").on("submit", function() {
$('input[type="submit"]').on("click", function() {
var filter = [];
$('input[type="checkbox"]:checked').each(function() {
filter.push(this.value);
});
$("#filter").val(filter.join("+"));
console.log("filters", filter.join("+"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="hidden" name="filter" id="filter" />
<input type="checkbox" value="val1" />
<input type="checkbox" value="val2" />
<input type="checkbox" value="val3" />
<input type="submit" />
</form>
Use $("form").on("submit", function() { instead of the event in the button. I just commented it because you can't submit in StackOverflow snippet.
Fiddle Version

How do I reverse the process of the following form element disabling function

I am trying to achieve the reverse of the following form function. This is working in the reverse to how I want it to function. I would like to have the form elements disabled by default and then enabled when the "clicker" is pressed. I am experimenting with the following code without success. I have no problems with the HTML, my problem is getting the script to function the way that I want it to.
SAMPLE HTML FORM ELEMENTS
<input type='text'></input>
<input type='text'></input>
<input type='text'></input>
<div id='clicker' style='background-color:#FF0000; height:40px; width:100px;'></div>
This is the JavaScript I am trying:
$().ready(function() {
$('#clicker').click(function() {
$('input').each(function() {
if ($(this).attr('disabled')) {
$(this).removeAttr('disabled');
}
else {
$(this).attr({
'disabled': 'disabled'
});
}
});
});
});
Should use prop() not attr() for disabled.
You can also use prop(propertyName, fn) to create the loop and isolate instances
$(function () {
inputs_toggle_disable();//disable on page load, assumes none have disabled in markup
$('button').click(inputs_toggle_disable);
});
function inputs_toggle_disable() {
$('input').prop('disabled', function () {
return !this.disabled
});
}
DEMO
It looks like you're missing the disabled attribute from your HTML inputs, simply add the attribute as shown below:
<input type='text' disabled />
<input type='text' disabled />
<input type='text' disabled />
Your clicker button then will remove this attribute (See JSFiddle).
http://jsfiddle.net/xredrdur/

how to check a specific image with input checkbox

I have this code that I'm still modifying. But I'm still having a hard time. I'm new in jquery . I'm planning to make a multiple checkbox with image. please check my code. It's not working. my sample code is two checkbox. Im planning to put it on array so that I could put more than two checkboxes with image. instead of making jquery code in each of checkbox.
here is my code
html
<form id="form1">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr" class="" />
<input type="checkbox" id="imgCheck[]" name="imgCheck" value="barney" />
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr" class="" />
<input type="checkbox" id="imgCheck[]" name="imgCheck" value="barney2" />
<input type="submit" value="Submit" />
</form>
jquery
$('img').on('click', function(){
var $$ = $(this)
if( !$$.is('.checked')){
$$.addClass('checked');
$('input[id=imgCheck]').prop('checked', true);
} else {
$$.removeClass('checked');
$('input[id=imgCheck]').prop('checked', false);
}
})
style
.checked {border:solid 2px red}
Try
$('img').on('click', function () {
var $$ = $(this)
//toggle the checked state
$$.toggleClass('checked');
//set the next checkbox's state in synch with the checked state of the image
//from the given markup we can assume that an image will always be related to the next sibling element which will be checkbox
$$.next('input').prop('checked', $$.hasClass('checked'));
})
Demo: Fiddle
toggleClass()
hasClass()
next()

select particular input field name of particular form

i have some html code like this
<form name="first"><input name="firstText" type="text" value="General" />
<input name="secondText" type="text" value="General" />
<input name="ThirdText" type="text" value="General" />
<input name="FourthText" type="text" value="General" />
<input name="FifthText" type="text" value="General" />
</form>
<form name="second"><input name="firstText" type="text" value="General" />
<input name="secondText" type="text" value="General" />
<input name="ThirdText" type="text" value="General" />
<input name="FourthText" type="text" value="General" />
<input name="FifthText" type="text" value="General" />
</form>
i want to select "secondText" of form "second" using jquery or javascript and i want to change value of it using jquery.
Using jQuery:
var element = $("form[name='second'] input[name='secondText']");
Using vanilla JS:
var element = document.querySelector("form[name='second'] input[name='secondText']");
Changing the value: element.val(value) or element.value = value, depending of what you are using.
To the point with pure JS:
document.querySelector('form[name=particular-form] input[name=particular-input]')
Update:
This selector will return the input named "particular-input" inside form named "particular-form" if exists, otherwise returns null.
The selector filter "form[name=particular-form]" will look for all forms with name equals "particular-form":
<form name="particular-form">
The selector filter "input[name=particular-input]" will look for all input elements with name equals "particular-input":
<input name="particular-input">
Combining both filters with a white space, I mean:
"form[name=particular-name] input[name=particular-input]"
We are asking for querySelector(): Hey, find all inputs with name equals "particular-input" nested in all forms with name equals "particular-form".
Consider:
<form name="particular-form">
<input name="generic-input">
<input name="particular-input">
</form>
<form name="another-form">
<input name="particular-input">
</form>
<script>
document.querySelector('form[name=particular-form] input[name=particular-input]').style.background = "#f00"
</script>
This code will change the background color only of the second input, no matter the third input have same name. It is because we are selecting only inputs named "particular-input" nested in form named "particular form"
I hope it's more clear now.
;)
By the way, unfortunately I didn't found good/simple documentation about querySelector filters, if you know any reference, please post here.
// Define the target element
elem = jQuery( 'form[name="second"] input[name="secondText"]' );
// Set the new value
elem.val( 'test' );
Try
$("form[name='second'] input[name='secondText']").val("ENTER-YOUR-VALUE");
You can do it like this:
jQuery
$("form[name='second'] input[name='secondText']").val("yourNewValue");
Demo: http://jsfiddle.net/YLgcC/
Or:
Native Javascript
Old browsers:
var myInput = [];
myInput = document.getElementsByTagName("input");
for (var i = 0; i < myInput.length; i++) {
if (myInput[i].parentNode.name === "second" &&
myInput[i].name === "secondText") {
myInput[i].value = "yourNewValue";
}
}
Demo: http://jsfiddle.net/YLgcC/1/
New browsers:
document.querySelector("form[name='second'] input[name='secondText']").value = "yourNewValue";
Demo: http://jsfiddle.net/YLgcC/2/
You can try this line too:
$('input[name="elements[174ec04d-a9e1-406a-8b17-36fadf79afdf][0][value]"').mask("999.999.999-99",{placeholder:" "});
Add button in both forms. On Button click find nearest form using closest() function of jquery. then using find()(jquery function) get all input values. closest() goes in upward direction in dom tree for search and find() goes in downward direction in dom tree for search. Read here
Another way is to use sibling() (jquery function). On button click get sibling input field values.

Categories