Develop Reference

Pass html5 form custom attributes to JSON

This is the HTML that i created for the registration page
<form role="form" action="" method="post" id="register_form">
<input type="text" id="facebook-autocomplete" name="facebook" class="form-control mdb-autocomplete GJ-search">
<input type="text" id="beatport-autocomplete" name="beatport" class="form-control mdb-autocomplete GJ-search" required>
<input type="email" id="inputValidationEmail" name="email" class="form-control" >
<input type="password" id="inputValidationPass" name="password" class="form-control" >
<input type="checkbox" class="custom-control-input" name="termsAndConditions" id="termsAndConditions" >
<input type="checkbox" class="custom-control-input" name="gdprAccept" id="gdpr" >
<button class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0" value="Submit" type="submit">Sign up</button>
</form>
This is the JavaScript that extracts the form to JSON and console logging it and it works.
//stringify form to JSON string
const serialize_form = form => JSON.stringify(
Array.from(new FormData(form).entries())
.reduce((m, [ key, value ]) => Object.assign(m, { [key]: value }), {})
);
$('#register_form').on('submit', function(event) {
event.preventDefault();
const json = serialize_form(this);
console.log(json);
});
I add two new attributes to the beatport input by adding this jquery
$('.beatport #beatport-autocomplete').attr('data-beatport-id', "id pulled from api");
$('.beatport #beatport-autocomplete').attr('data-beatport-name', "name pulled from api");
The Json Result is after adding two new attributes is:
{"facebook":"big show","email":"dfghdfsghg#gmail.com","password":"fsdghfjgh","termsAndConditions":"on","gdprAccept":"on"}
You see that the two new attr are missing and when I add them the input looks like this:
<input type="text" id="beatport-autocomplete" name="beatport" class="form-control mdb-autocomplete GJ-search" required data-beatport-id="12345" data-beatport-name="artist name">
and the JSON result should be like this:
{"facebook":"big show","beatportId":"12345","beatportName":"artist name","email":"dfghdfsghg#gmail.com","password":"fsdghfjgh","termsAndConditions":"on","gdprAccept":"on"}

If you want to add data to your form you can use hidden input and set the value via js
HTML
<input type="hidden" name="beatportID">
JS
$('[name="beatportID"]').attr('value', 'my data');

If you are looking to extract data attributes from a html element and you are using jQuery already to set them i think the following might be what you are looking for. (Not exactly sure from your question what your desired result is) if possible perhaps you could explain a little further?
https://api.jquery.com/data/
Please check below for an example of that i mean.
Firstly lets say the following is your registration form.
<input type="text" id="name" />
<input type="text" id="email" />
<input type="text" id="phone" />
<input type="text" id="age" />
You would then add your two data attributes to let say the name input.
$('#name').attr('data-beatport-id', "id pulled from api");
$('#name').attr('data-beatport-name', "name pulled from api");
You can then serialize_form and add it to json variable.
let json = serialize_form(this);
And then use the following to get data attributes from the '#name' input.
json.beatport-name = $('#name').data("beatport-name")
json.beatport-id = $('#name').data("beatport-id")
You can then console log this json object.
console.log(json)

Get value from muti dimensional-array textbox using javascript

I have a list of textbox which is dynamically generated and and named with multi-dimensional array for posting to php later.
<input type="text" name="node['A11']['in']">
<input type="text" name="node['A11']['out']">
<input type="text" name="node['X22']['in']">
<input type="text" name="node['X22']['out']">
<input type="text" name="node['C66']['in']">
<input type="text" name="node['C66']['out']">
However, before the values get posted, i am trying to get the value of the specific textbox and do the validation.
var nodeValue = document.getElementsByName("node['X22']['in']").value;
alert(nodeValue);
Tried the above but it is not working. May i know is there a good way to parse trough the textbox list and get the specific textbox's value, let's say for 'X22' -> 'in'?

getElementsByName returns not a single element, but array-like object. Access the [0] indexed element of the result.
If you have unique elements, it will be better to get them by id (getElementById) which returns a single element.
var nodeValue = document.getElementsByName("node['X22']['in']")[0].value
// ----^^^----
alert(nodeValue);
<input type="text" name="node['A11']['in']">
<input type="text" name="node['A11']['out']">
<input type="text" name="node['X22']['in']" value='SomeValue'>
<input type="text" name="node['X22']['out']">
<input type="text" name="node['C66']['in']">
<input type="text" name="node['C66']['out']">

you need a value to get one
<html>
<head></head>
<body>
<input type="text" name="node['A11']['in']">
<input type="text" name="node['A11']['out']">
<input type="text" name="node['X22']['in']">
<input type="text" name="node['X22']['out']">
<input type="text" name="node['C66']['in']">
<input type="text" name="node['C66']['out']">
</body>
<script>
parse = function(){
var nodeValue = document.getElementsByName("node['X22']['in']");
console.log(nodeValue[0]);//to demonstrate that a nodelist is indeed returned.
}
parse()
</script>
</html>

You could use the id attribute and give it an identifier.
var nodeValue = document.getElementById("X22in").value;
console.log(nodeValue);
<input type="text" id="X22in" name="node['X22']['in']" value="foo">
<!-- ^^^^^^^^^^ -->

On change event triggers additional event

I have created some input fields and bound their value to a javascript variable. However, for some reason the drinkInput value is always an empty string. And when the typeInput event is called it's value is correctly printed to the console followed by a blank string which I presume is drinkInput's value.
created here
<input type="text" class="form-control" id="drinkInput" placeholder="Drink Name">
<input type="text" class="form-control" id="typeInput" placeholder="Drink Type">
and bound here
$("#drinkInput").on("change", function() {
newDrink = $(this).val();
console.log($(this).val());
});
$("#typeInput").on("change", function() {
newType = $(this).val();
console.log($(this).val());
});
To be clear it seems that I have two different issues. One is that when typeInput's event is triggered it seems that drinkInput's is also. My other issue is that $(this).val() returns an empty string for drinkInput.

It's doing that because you aren't properly closing the tags.
Try this:
<input type="text" class="form-control" id="drinkInput" placeholder="Drink Name" />
<input type="text" class="form-control" id="typeInput" placeholder="Drink Type" />

var val() undefined javascript

<form>
<p>
<label>Username</label>
<input name="username" placeholder="Username" required="" type="text">
</p>
</form>
<script language="JavaScript" type="text/javascript">
var username=$("#username").val();
</script>
I have read a lot of posts related to this problem, but I have not found solution.
I tried with Firebug and give me this:
username undefined
Where is the problem?

Because you don't have an element with the id "username". You have one with the name "username". So jQuery returns an empty set when you do $("#username") (as there are no matching elements). When you call val() on an empty set, it returns undefined.
You can either change your field to have an id:
<input id="username" name="username" placeholder="Username" required="" type="text">
Or change your selector to use the name:
var username = $("input[name=username]").val();

# is selector for ID, but you don't have ID on your input.
So you could add an ID:
<input name="username" placeholder="Username" id="username" required="" type="text">
Loot at this : Id Selector

try accessing element by name attribute:
$('input[name=username]').val()
or if you need to access by id, then add id attribute:
<input name="username" placeholder="Username" id="username" required="" type="text">

How to check if the required attribute is set on a field

I have a simple form that has some required fields in it.
<form name="form" method="post">
<pre>
<label> Name: </label><input type="text" name="name" required>
<label> Address: </label><input type="text" name="add" required>
<label>Telephone: </label><input type="text" name="tel">
<input type="submit" value="Submit Form">
</pre>
</form>
I know you can set the required attribute using document.forms['form']['name'].required = false. But is there a way where you can just check if the required attribute is set or not? I tried using getattribute() but it just returns blank. I also tried using the code below, but it always executes the statement, even if the required attribute isn't set (e.g. on the telephone field).
if( document.forms['form']['name'].required = true)
label.innerHTML += " (required)"
Does anyone know of a way I can do this?
Update: Both setting the if statement to == instead of = and using hasAttribute work, thanks.

Try this :
var elem = document.getElementsByTagName('input')[0];
if(elem.hasAttribute('required')){
//do your stuff
}