I'm serializing some forms to JSON in dart:html
Map jsonifyForm(String formQuery){
FormElement form = querySelector(formQuery);
Map<String, String> data = {};
List<InputElement> inputs = form.querySelectorAll("input.json");
for (InputElement input in inputs) {
if (input is CheckboxInputElement){
print("checkbox: " + input.name + "|" + input.checked.toString());
data.putIfAbsent(input.name, () => input.checked);
} else {
print("text: " + input.name + "|" + input.value);
data.putIfAbsent(input.name, () => input.value);
}
}
print(data);
return data;
}
I have about a 100 input fields on the page, followed by only one checkbox:
<label>First Name</label>
<input type="text" class="form-control tip json" placeholder="First Name" name="firstName" value="" data-toggle="tooltip" data-placement="top" title="First Name"/>
<label>Last Name</label>
<input type="text" class="form-control tip json" placeholder="Last Name" name="lastName" value="" data-toggle="tooltip" data-placement="top" title="Last Name"/>
...
<label class="form-control tip" data-placement="top" title="VAT On Goods" data-toggle="tooltip">
<input class="json" type="checkbox" name="vatOnGoods">
VAT on goods
</label>
When I call jsonifyForm, I'm seeing that all inputs are being treated as checkboxes:
checkbox: firstName|false
checkbox: lastName|false
...
checkbox: vatOnGoods|false
{firstName: false, lastName: false, ..., vatOnGoods: false}
Is this a bug or am I doing something wrong here?
The class CheckboxInputElement only provides the value and checked attributes. I am still wondering why it says that those are all checkboxes. But you can just check the type attribute:
if(input.type == 'checkbox')
to check the type of the checkbox.
Related
I am trying to enter data inside database table via form. I have created an instance of Model and accessed the columns of that table and assigned the input names of form but when I enter data an submit it says Attempt to read property "name" on array. Can anyone guide me if there is anything wrong.
Code of Controller where im inserting datas to database
class UserController extends Controller
{
function registerUser(Request $req)
{
$data = $req->input();
$user_model = new User;
$user_model->fullname = $data->name;
$user_model->mobile = $data->mobile;
$user_model->email = $data->email;
$user_model->password = $data->password;
$user_model->save();
return "registered successfully";
}
}
Code of Form
<div class="register-form">
<h4>Sign Up</h4>
<form method="post" action="register">
#csrf
<input type="text" name="name" placeholder="Full Name" size="40">
<br>
<input type="tel" name="mobile" placeholder="Mobile number" size="40">
<br>
<input type="email" name="email" placeholder="Email" size="40">
<br>
<input type="password" name="password" placeholder="Password" size="40">
<br>
<input id="submit_btn" type="submit" placeholder="Sign Up" size="40">
<hr>
<p>Already, have an account <span href="#" id="sign-in-link">Log In</span></p>
</form>
</div>
function registerUser(Request $req)
{
$user_model = new User;
$user_model->fullname = $req->name;
$user_model->mobile = $req->mobile;
$user_model->email = $req->email;
$user_model->password = bcrypt($req->password); //laravel hashed password
$user_model->save();
return "registered successfully";
}
$req->input is an array. Access it like so.
$user_model->fullname = $data['name'];
$user_model->mobile = $data['mobile'];
$user_model->email = $data['email'];
$user_model->password = $data['password'];
I am trying to send user form data to partner endpoint like this:
$('#registrationFrm').on('submit', function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "https://pixel.plexop.com/?country="+countryid+"&_v=6&name="+firstName+"&lastname="+lastName+"&phone="+phone
+"&email="+emailid+"&ud=&e=2&adv=1&a=4&f=221161&FormId=1807&SerialId=1210053",
data: $("#registrationFrm").serialize(),
success: function() {
alert('success');
}
});
});
I get 200 "OK" back, but as of data I get this sent when I inspect it on "network":
Query string: country "[object HTMLSelectElement]
Query string: name "[object HTMLInputElement]
Query string: lastname "[object HTMLInputElement]"
My form looks like this:
<form id="registrationFrm" >
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="First Name" name="firstName" id="firstName" required />
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Last Name" name="lastName" id="lastName" required />
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="tel" class="form-control" placeholder="Phone No" name="phone" id="phone" required />
<span class="glyphicon glyphicon-earphone form-control-feedback"></span>
What am I doing wrong here?
Probably, you define your variables like:
const firstName = document.getElementById('firstName');
/*and so*/
But you should do this like:
const firstName = document.getElementById('firstName').value;
UPD:
$('#registrationFrm').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url:
'https://pixel.plexop.com/?country=' +
countryid.value +
'&_v=6&name=' +
firstName.value +
'&lastname=' +
lastName.value +
'&phone=' +
phone.value +
'&email=' +
emailid.value +
'&ud=&e=2&adv=1&a=4&f=221161&FormId=1807&SerialId=1210053',
data: $('#registrationFrm').serialize(),
success: function () {
alert('success');
}
});
});
I am trying to combine 3 inputs of input text and binding the data to another input text.
<input type="text" class="textbox" name="country" id="loc_country" value="Gershon" ng-model="location.country"/>
<input type="text" class="textbox" name="city" id="loc_city" ng-model="location.city"/>
<input type="text" class="textbox" name="street" id="loc_street" autocomplete="off" ng-model="location.street"/>
<input type="text" class="textbox" name="result" id="result"/>
Here the first 3 inputs need to added to the 4 input automatically with binding
You should set the value HTML attribute of the text box. You can do it inline like so:
<input type="text" class="textbox" name="result" id="result" value="{{location.street + ' ' + location.city + ' ' + location.country}}"/>
Or you can use a computed property. Here is an example:
HTML:
<div ng-app>
<div ng-controller="SomeCtrl">
<input ng-model="textProperty"/>
<input value="{{getCalculatedText()}}"/>
</div>
</div>
JS:
function SomeCtrl($scope) {
$scope.textProperty = "some text";
$scope.getCalculatedText = function() {
return $scope.textProperty+ " is now calculated";};
}
Please see my example answer here: https://jsfiddle.net/em0ney/bc3chrog/2/
function ExampleController($scope) {
$scope.location = {country: 'Australia', city: 'Sydney', street: 'Pitt St'};
$scope.concatLocationComponents = function() {
return $scope.location.street + ' ' + $scope.location.city + ', ' + $scope.location.country;
};
}
Good luck with formatting the result.
Thanks,
Elliott
This question already has answers here:
Show box or input box on checked box
(2 answers)
Closed 8 years ago.
I have a form like this
<form >
<input type="text" placeholder="First Name" required id="fname" name="fname"/>
<input type="text" placeholder="Last Name" required id="lname" name="lname"/>
<input type="checkbox" placeholder="Maiden Name" id="Maiden Name" name="chkname"/>
<input type="hidden" placeholder="Maiden Name" id="mname" name="mname"/>
...
</form>
and if the checkbox is checked then the maiden name input box should be visible, can anyone help me with this.
In this instance, it's possible to do this without JavaScript, just use the :checked pseudo class:
EXAMPLE HERE
#mname {
display:none;
}
#maidenname:checked ~ #mname {
display:block;
}
Use either the general sibling combinator, ~, or the adjacent sibling combinator +, to change the display of the input element when the checkbox element is toggled. This of course assumes that the checkbox precedes the input element in the DOM.
If you would rather use JavaScript, you could use the following:
JS EXAMPLE HERE
var checkbox = document.getElementById('maidenname');
var input = document.getElementById('mname');
checkbox.addEventListener('click', function () {
if (input.style.display != 'block') {
input.style.display = 'block';
} else {
input.style.display = '';
}
});
Alternatively, if you would rather add an input element to the DOM (as your title implies), rather than changing the visibility of it, you could use something like this:
ALTERNATIVE JS EXAMPLE HERE
var checkbox = document.getElementById('maidenname');
checkbox.addEventListener('click', function () {
if (document.getElementById('mn')) {
document.getElementById('mn').remove();
} else {
var input = document.createElement("input");
input.id = 'mn';
input.type = 'text';
input.placeholder = 'Maiden Name';
document.body.appendChild(input);
}
});
you should not use maiden name input box as type="hidden". Use it as below:
<input type="text" style=" display:none" placeholder="Maiden Name" id="mname" name="mname"/>
Call function to toggle display on click of checkbox:
<input onchange="showHideControl();" type="checkbox" placeholder="Maiden Name" id="Maiden Name" name="chkname"/>
Toggle maiden name input box:
function showHideControl()
{
$('#mname').toggle();
}
You can do it using pure javascript, like so:
<form id=frmMain name=frmMain>
<input type="text" placeholder="First Name" required id="fname" name="fname"/>
<input type="text" placeholder="Last Name" required id="lname" name="lname"/>
<input type="checkbox" placeholder="Maiden Name" id="chkname" name="chkname" onclick=javascript:document.frmMain.mname.hidden=!document.frmMain.chkname.checked; />
<input type="input" hidden=true placeholder="Maiden Name" id="mname" name="mname"/>
...
</form>
<b>Gebruikersnaam:</b><br>
<input id="textbox" type="text" value="" size="25" required>
<a id="googleLink" href="##klik nu om member te kopen##"
onclick="this.href='https://websitelink.com?naam=' + encodeURIComponent(document.getElementById('textbox').value);">
<button>Koop: MEMBER</button>
</a>
I want: <input id="textbox" type="text" value="" size="25" required>
to be required when i click: <button>Koop: MEMBER</button>
like: if <input id="textbox" type="text" value="" size="25" required> value=""
its shows an alert like: "No username entered"
Fixed, Thx Lepanto
You need to cleanup your code first. not sure why you're using <a>. Anyway It would be pretty good to validate using onblur()
HTML code:
<input id="textbox" type="text" value="" size="25" required onblur="validateTextBox()">
JavaScript:
function validateTextBox() {
if (document.getElementById("textbox").value != "") {} else {
alert("Please enter a value");
}
}
Check this out in JSFiddle.
Of course, there is no such thing as required attribute in HTML tag textarea.
You have to create your own validation methods using Javascript. One of them is Validation plugin (which requires jQuery).
You have to write a JavaScript function to validation the textbox. Something like below
<script>
function doclick(){
if(document.getElementById('textbox').value != ''){
this.href='https://websitelink.com?naam=' + encodeURIComponent(document.getElementById('textbox').value);
}
else{
alert('No username entered');
}
}
</script>
And call this function in your HTML tag onclick
<b>Gebruikersnaam:</b><br>
<input id="textbox" type="text" value="" size="25" required>
<a id="googleLink" href="##klik nu om member te kopen##" onclick="doclick()">
<button>Koop: MEMBER</button>
</a>