querySelectorAll doesn't select select boxes with name - javascript

I have a form that has multiple select boxes and inputs with a array like name.
So I have multiple select boxes with a name personroom[]. I would like to get these using this
var personroom=document.querySelectorAll("input[name='personsroom[]']");
alert(personroom.length)
it gives me null ("0"). But with the same way I can select all input (text) fields. Strange. Can anyone help me?

The issue seemed to have been related to the exact target of the selector.
the original selector "input[name='personsroom[]']" didn't work but according to OP comments dropping the input worked "[name='personsroom[]']"
A note on escaping [] characters. In this specific case, that was not the issue as the query string used inline single quotes ► "[name='personsroom[]']"
Using this "input[name=personsroom[]]" , with no single quotes, you need to escape the [] like this "input[name=personsroom\\[\\]]"
// The below will fail with "Uncaught SyntaxError..." during execution
//var personroom = document.querySelectorAll("[name=personsroom[]]");
//The below works as we are escaping the special characters
var personroom = document.querySelectorAll("[name=personsroom\\[\\]]");
console.log("1.) personroom.length", personroom.length);
//Also, when using inline quotes, you do not need to escape any characters
var personroom = document.querySelectorAll("[name='personsroom[]']");
console.log("2.) personroom.length", personroom.length);
<input type='textbox' name='personsroom[]' />
<input type='textbox' name='personsroom[]' />
<input type='textbox' name='personsroom[]' />
<input type='textbox' name='personsroom[]' />

If you are using select boxes, then you are using <select></select>, correct? Change input to select in your query:
var personroom=document.querySelectorAll("select[name='personsroom[]']");
alert(personroom.length)

Related

Dynamically adding pattern and title attributes to input control

I have a HTML input control as follows:
<input type="text" value="<%= this.CustomerAcctNumber %>" name="CustomerAcctNumber" id="CustomerAcctNumber" maxlength="19" onkeyup="CustomerAcctNumberChange()" required >
on body onload I am adding a pattern and title attributes to this input control
var CustomerAcctNumber = document.getElementById("CustomerAcctNumber");
CustomerAcctNumber.setAttribute("pattern","\d{2}-(?:\d{4}-){3}\d{1}");
CustomerAcctNumber.setAttribute("title","xx-xxxx-xxxx-xxxx-x");
When i submit this web page, with valid pattern, it gives me error :
Input control was rendered as expected as follows :
<input type="text" value="" name="CustomerAcctNumber" id="CustomerAcctNumber" maxlength="19" onkeyup="CustomerAcctNumberChange()" pattern="d{2}-(?:d{4}-){3}d{1}" title="xx-xxxx-xxxx-xxxx-x" required="">
Any suggestions or comments will be appreciated!!
I figured out the problem. You are passing the pattern value from JavaScript, so it escapes all your \ symbols which is needed to be generated in HTML. currently you're HTML generates pattern="d{2}-(?:d{4}-){3}d{1}" which is incorrect. So you need to provide another escape character next to each of the existing \ which will result to double \\ so you're HTML generates pattern="\d{2}-(?:\d{4}-){3}\d{1}". So the line in your JS would become as shown below:
CustomerAcctNumber.setAttribute("pattern","\\d{2}-(?:\\d{4}-){3}\\d{1}"); //renders to '\d{2}-(?:\d{4}-){3}\d{1}' in HTML
Rest all are fine. Let me know if this worked.

Repeated values VS document.querySelector

On the same page, I'm using Play repeated values and a document.querySelector.
To give a minimal example:
#helper.form(action = routes.MyController.myAction()) {
<input type="search" id="input[0]" />
<input type="search" id="input[1]" />
<input type="search" id="input[2]" />
}
<script language="JavaScript">
var input = document.querySelector('#input[1]');
something(input);
</script>
The issue is that Play uses that format input[i] to map repeated fields but the JavaScript engine does not accept it:
SyntaxError: An invalid or illegal string was specified
Is there a simple workaround on one side or the other?
In a CSS selector, square brackets are used to select an attribute. If you want to match it literally, you have to escape them.
var input = document.querySelector('#input\\[1\\]');
You could also use getElementById, which doesn't parse the ID.
var input = document.getElementById('input[1]');

Regex to strip html tag with certain attribute

I have some invalidly-nested HTML like:
<form class="form1" method="get">
<div>
<input name="field1">
</form>
<form class="form2" method="get">
<input name="field1">
</form>
</div>
Yeah, it's a mess, don't ask. The invalid nesting is causing problems somewhere else. jQuery I think is expecting a closing </div>, and only finding it at the last one. It's then treating the second <form> tag as invalid, and also discarding the closing </form> immediately above it, and assuming everything between lines 1 and 9 are one form.
If I output these to the console:
$('.form1).html() - all of line 1 - 9
$('.form2).html() - undefined
So what I'm trying to do is treat the whole thing as a string, and use regex to strip out form2. I'm expecting a regex something like:
formText.replace(/(<form\b[^>]*>)[^<>]*(<\/form>)/gi, "");
but I'm not sure how to reference the specific form with class=form2.
There's also a problem with it being a multi-line string.
Update: added more detail, outlining why jQuery's remove() method isn't working. jQuery only thinks there's one form unfortunately.
Don't use regex to parse HTML. Since you're using jQuery, just use .remove():
$(function() {
$(".form2").remove();
});
JSFiddle
I ended up using:
formText = formText.replace(/(<form\b[^>]*form2+.*>[\s\S]+<\/form>)/gi, "");
The [\s\S] matches all characters including \n and \r to cover the newlines.
I could probably have made the part of the regex dealing with the class name more specific so I knew it was the class and not some other random form with a similar, but in practice it didn't matter (there was only one instance of the 2nd form, with a very specific class name).

How to erase the text input that the user typed using JavaScript

<div class = "search ui-widget">
<label for = "keyword"></label>
<input type="text" id="keyword" onkeypress="searchKeyPress(event)" placeholder="Search here" required>
<input type="button" id="btnSearch" onclick="loadDeals('search', keyword.value,'')" />
</div>
$('.search input#keyword').Value('');
Basically what I want is to remove the user's input in the text box after the user clicks another menu tab. I tried $('.search input#keyword').Value(''); and $('.search input#keyword').css("value", ''); but it didn't work.
.val() is the right name of the jQUery method, not Value().
You can use jQuery like this:
$('#keyword').val('');
Or you can use plain javascript like this:
document.getElementById('keyword').value = '';
If there are more input fields beside the ones you posted and you want to clear all inputs you can use:
$('.search input').val('');
Here's a pure javascript solution:
document.getElementById('keyword').value = '';
Since HTML id attributes are supposed to be unique I would recommend not using the '#keyword' id in your jquery selector. The solution does work if there's only one text field, but it isn't scalable to multiple text fields. Instead, I would make 'keyword' a class for the input element and use the selector:
$('.search input.keyword').val('');
This is very similar to the solution Sergio gave except it allows you to control, via the 'keyword' class, which input elements have their values cleared.
Use this
$("the_class_or_id").val("");
Link for this: jQuery Documentation
This is introduced in jQuery API. You can use .value in JavaScript, but in jQuery its val(). It gets the value of the object and to clear the value, just add quotes!
JavaScript code would be:
document.getElementById("id_name").value = "";

Accessing an array of HTML input text boxes using jQuery or plain Javascript

I'm looking to create a form which contains a dynamic number of input text boxes. I would like each text box to form part of an array (this would in theory make it easier for me to loop through them, especially as I won't know the number of text fields that will eventually exist). The HTML code would like something like:
<p>Field 1: <input type="text" name="field[1]" id="field[1]"></p>
<p>Field 2: <input type="text" name="field[2]" id="field[2]"></p>
<p>Field 3: <input type="text" name="field[3]" id="field[3]"></p>
<p>Field 4: <input type="text" name="field[4]" id="field[4]"></p>
<p>Field 5: <input type="text" name="field[5]" id="field[5]"></p>
This data would then be sent to a PHP script and would be represented as an array - or at least, that's the theory.
So my first question is, is this achievable using HTML? Are forms designed to work that way?
If the answer to that is "yes", how would I then go about accessing each of those using jQuery or failing that, plain old JavaScript?
I've attempted to achieve this using the following jQuery code:
someval = $('#field[1]').val();
and
someval = $('#field')[1].val();
and the following JavaScript:
someval = document.getElementById('related_link_url')[1].value;
But I've not had any luck.
Thanks in advance.
Edit:
I should note that from a Javascript point of view, I've had it working where the ID of each element is something like field_1, field_2 etc. However, I feel that if I can achieve it by placing each text box into an array, it would make for tidier and easier to manage code.
Give each element a class and access the group using jQuery:
<p>Field 1: <input type="text" name="field[1]" class="fields"></p>
<p>Field 2: <input type="text" name="field[2]" class="fields"></p>
<!-- etc... -->
jQuery:
$("input.fields").each(function (index)
{
// Your code here
});
This will run the anonymous function on each input element with a classname of "fields", with the this keyword pointing to the current element. See http://api.jquery.com/each/ for more info.
First of all, id attribute cannot contains [ or ] character.
There is lots of ways to get jQuery/plain JavaScript references to these elements. You can use descendant selector:
<fieldset id="list-of-fields">
<!-- your inputs here -->
</fieldset>
$("#list-of-fields input");
document.getElementById("list....").getElementsByTagName("input");
You can also use attribute selector:
$("input[name^=field]");
I'm not sure whether that's the only way but I think in plain JavaScript you'll have to fetch all input elements (document.getElementsByTagName) and then loop through array of these elements and check each element (whether it has name attribute which value starts with field).

Categories

Resources