Add data to Shadow Dom elements automatically - javascript

I need to add password and username automatically and then click "Enter" to Shadow DOM elements:
<input type="text" class="_y" aria-required="true" autocapitalize="off" autocorrect="off" maxlength="30" name="username" placeholder="username" value="">
#shadow-root (user-agent)
<div id="inner-editor"></div>
<div pseudo="-webkit-input-placeholder" id="placeholder" style="visibility: visible; text-overflow: clip;">Username</div>
</input>
</div>
The second field is the same.
I have the code for adding:
document.querySelector('input').value = "username";
document.querySelectorAll('input')[1].value ="password";
It's works, I see my username and password in the necessary fields. But when I click the button using the next code:
document.querySelector('button').click()
I see the process starts and then nothing and the fields become empty.
The button code:
<span class="_r ">
<button class="_a">Enter</button>
</span>
If I do this manually, everything works without problems. Why does not automatic mode work?

I's because when you click on the <button> your form is sent.
If you didn't specify where to send the form, the current page is requested again, and the content of the <input> tags is reset.
You should set the onsubmit attribute like this:
<form onsubmit="return false">
...or call a JavaScript function that will process the form (and return false if you don't want to navigate to a page).
<form onsubmit="process()">
Or specify the URL where to send the form in the action attribute:
<form action="/form">

Related

My login passwords won't autocomplete when I enter my email in polymer 2

In my polymer 2 app I have something like this:
<form class="styling" autocomplete="on">
<div class="styling" >
<label>email</label>
<input name="email" autocomplete="email">
</div>
<div class="styling" >
<label>email</label>
<input name="password" autocomplete="current-password">
</div>
<div class="styling">
<a class="styling" on-tap="doRequestFunction">Login<a>
</div>
</form>
My issue is there are a lot of sources saying what works and what doesn't and I've tried removing the outer div, I've tried changing the email to a username, I've tried to change the <a> to an <input type="submit">. I've also tried to add an invisible username input below the email input. I have a database element that does my ajax calls so ideally I'd like to just call the request function on a form submit, but there doesn't appear to be a way to do this because it wants me to perform the action with a file or something like that.
TL;DR is there a way to do this:
<form class="styling" onSubmit="doTheRequestFunction" autocomplete="on">
<div class="styling" >
<label>email</label>
<input name="email" autocomplete="email"/>
</div>
<div class="styling" >
<label>email</label>
<input name="password" autocomplete="current-password"/>
</div>
<div class="styling">
<input class="styling" type="submit">Login</input>
</div>
</form>
There doesn't appear to be a way to do this in polymer and the ways that do don't request for the users password and are depreciated anyways. Using Chrome primarily.
EDIT: Please, no JQuery, only Javascript. I don't know what JQuery is doing half the time and it's sloppy.
autocomplete is an HTML attribute (https://www.w3schools.com/tags/att_input_autocomplete.asp). It's either on or off. It's designed to tell the browser whether it should attempt to autocomplete a field or not. The default is on so you shouldn't have to set it unless you're trying to prevent the browser from autocompleting.
Try to remove all your autocomplete attributes, and submit your form. The browser should ask you if you want to save your username and password at which point it should be populated next time you come to your form.
Also, you have an bad tag on the end of your submit button: </inoput>
<input type="submit" value="Send Request"> should be fine.
Boys, I found it.
paper-input autocomplete fails to fill
This is a polymer specific issue I was having. Currently polymer requested support for their auto-fill apparently and it's still not there. This is the solution for now. Pop that bad boy into you index.html and weep tears of joy.
Just make it
<input name="password" type="password"/>
So if input field has attribute type as password it will trigger browser to remember.

Submit form with Javascript then handle with PHP

Not sure how I did this last time or else I wouldnt asking here but here is what I'm trying to do.
I have the usual basic form with a javascript function that will submit the form. Question is that after the form is submitted, I have an if statement in PHP that echos a that the form has been submitted. Any help would be greatly appreciated.
//PHP
if($_POST['submitDelete']){
echo "welcome, You form has been submitted";
}
//HTML
<form id="form_id" action="" method="POST">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="hidden" name="submitDelete" TYPE="submit">
</form>
<button type="button" onclick="myFunction()">Submit</button>
//JAVASCRIPT
<script>
function myFunction() {
document.getElementById("form_id").submit();
}
</script>
I can't seem to trigger the if statement in PHP. I also tried using the form name in the if statement and that didnt work either.
A form element must be told where to submit its data to when the submit event takes place. This is accomplished by setting the action attribute value for the form. Leaving that attribute empty does not implicitly set the form to post back to the current page. So, if you want to have a single page form/form processor, you need the action to be set to the current page file name:
<form action="currentPageFileName.php" method="post">
Next, there's no reason a single page can't have multiple forms on it. In that case you would need multiple submit buttons, each tied to a specific form. For this reason, you can't just drop a submit button anywhere on the page that you like unless you add the form attribute to the button to tie it back to the form it is supposed to trigger the submit for. Also, if you simply place the submit button within the form element it "belongs" to, you don't have to worry about this.
Also, you have some invalid HTML with:
<input type="hidden" name="submitDelete" TYPE="submit">
An element may not have the same attribute repeated within it (the case that you type the attribute in makes no difference since HTML is not case-sensitive). So, that code would wind up simply creating a submit button.
Lastly, if all you want to do with your submit button is cause its related form to be submitted, there is no need for JavaScript at all. That is what submit buttons do by default.
So, in the end, you can get rid of the JavaScript in your code completely and change your HTML to this:
<form id="form_id" action="currentFileName.php" method="POST">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="hidden" name="submitDelete" value="true">
</form>
<button type="submit" form="form_id">Submit</button>

How do you get the value of an input inside a form?

I'm simply trying to get the value of an input box embedded in a form tag.
For example, this works just fine.
<div>
<label>First Name</label>
<input id="firstName" type="text" required />
</div>
<button type="submit" onclick="getName()">Submit</button>
<script type="text/javascript">
function getName() {
var name = document.getElementById('fistName').value;
console.log(name);
}
</script>
This outputs whatever value is enter in the console when the submit button is clicked. However if I put it in a form like below it doesn't return anything.
<form>
<div>
<label>First Name</label>
<input id="firstName" type="text" required />
</div>
<button type="submit" onclick="getName()">Submit</button>
</form>
Does the form tag add some protection? How can I get the value out of an input tag inside a form?
it doesn't return anything
Yes it does.
However, since you're submitting a form, the page is also immediately refreshing and you're starting over from scratch.
The form isn't "protecting" anything. The code is doing exactly the same thing in both cases. But in the second case the form is also doing something else (loading the page) before you've physically had time to see the result.
Button of type submit refreshes the page. Also the console gets cleared. So it does output but gets immediately cleared. Try changing the button type to "button". Then it will not refresh the page and you will see the output.

Trigger parsley validation without submit form?

Given this code, it never works and always returns true whatsoever ?
<form id="my-form" data-validate="parsley">
<p>
<label for="username">Username * :</label>
<input type="text" id="username" name="username" data-required="true" >
</p>
<p>
<label for="email">Email Address * :</label>
<input type="text" id="email" name="email" data-required="true" >
</p>
<br/>
<!-- Validate all the form fields by clicking this button -->
<a class="btn btn-danger" id="validate" >Validate All</a>
</form>
<script>
var $form = $('#my-form');
$('#validate').click (function () {
if ( $form.parsley('validate') )
console.log ( 'valid' ); <-- always goes here
else
console.log ('invalid');
});
</script>
So my question is if there is a way to trigger parsley validation without adding a submit button ?
$form.parsley('validate') is 1.x API. It was deprecated in 2.x versions you might use.
Try $form.parsley().validate() instead.
Best
I've been searching high and low to try and make the form validation work with a non-form tag.
I guess my biggest gripe with the framework is that it doesn't work out-of-the-box with non-form elements.
I would be ok using a form element if it didn't scroll to the top of the page every time it tries to validate. Because this behavior is inherent in how form works, there is only this hack to fix it.
Just as a side note, using data-parsley-validate attribute on the div tag also works. You can also initialise the form as normal (meaning you can subscribe to the validation).
example html:
<div id="signupForm" data-parsley-validate>
... put form inputs here ...
<button id="signupBtn">Sign me up</button>
</div>
Just make sure to put js in:
var $selector = $('#signupForm'),
form = $selector.parsley();
form.subscribe('parsley:form:success', function (e) {
...
});
$selector.find('button').click(function () {
form.validate();
});
if you put type="button" on the button, it won't refresh and scroll to top of page when clicked.

html form trying to http get when a button is pressed

Ive got a html form with a few select lists and a text box in it. I also have a submit button which is outside of the form. The reason for this is I want to construct the parameters myself, as I dont want the content of all of the select lists. The problem I am having is, that when I press my submit button,The form automaticly trys to redirect to the same page, but with a ? at the end with all the contents of the form. I am also having problems where window.location.href is not working inside the submit() javascript method, but I am not sure if this is caused by the form issue or not. Example code:
<form>
<input name="cName" type="text" class="input-xlarge" id="input01" placeholder=
"Enter title" />
<div class="control-group">
<hr />
<label class="control-label" for="select01">Select box 1</label>
<div class="controls">
<select id="select01" name="type" onChange="reportModification(this.value)">
<option>One</option>
</select>
</div>
</div>
</form>
<button class="btn btn-primary" onClick="next()">Next</button>
This is not the exact code from the page, just a replica.So it might not be valid html in some places. Thanks for the help :)
The reason you get parameters in the url is that a get request is used instead of a post request. you should use:
<form method="POST" action="">
Also why is your button outside the form? you could have this instead:
</div>
<input class="btn btn-primary" type="submit" value="Next" onClick="next()" />
</form>
I think your button has to be inside the form element. You could use an onsubmit in the form element to intercept the form before it gets sent to the server. Here you could manipulate the values before they go. You would also need an action attribute in the form. If your function returns true, the data will be submitted, false and it won't.

Categories

Resources