When using a Bootstrap 4 modal with several forms separately displayed or hidden, the form field names are changed to random values.
From Google Chrome Devtools - Form Source:
<div>
<label for="YoB">Birth Year</label>
<input type="text" class="form-control" name="YoB" placeholder="YoB (approx)">
</div>
From Google Chrome Devtools - Elements:
<form id="AWForm2" class="form" role="form" autocomplete="off" style="display:none;">
<div>
<label for="YoB">Birth Year</label>
<input type="text" class="form-control" name="ryfdlthwhsn" placeholder="YoB (approx)">
</div>
<button class="btn btn-lg btn-block" type="button" onclick="process()"><i class="fa fa-search"></i> SEARCH NAMES</button>
function process() {
var saveDat = $("#AWForm2").serialize();
}
When entering 1985 into the form input element and clicking the button, the result is:
"ryfdlthwhsn=1985"
It appears that the DOM has changed with the input name being altered.
Can anyone explain what is happening and how I can programatically obtain the value of the input with name 'YoB'.
Note that the DOM is visible in the modal when the button is clicked.
Related
I'm building a form consisted of button. I want to get value from a highlighted button being sent to a parameter when submit button is clicked, but the problem is I only found a way to sent value from a radio button. Is there any equivalent way to do this?
I know this is only applicable for radio button, so I'm searching an equivalent queryselector that will give exact action like code below but for button
document.querySelector('input[name=customButton]:checked').value
<button type="button" class="btn" id="customButton1" name="customButton" value="1">
<label for="customButton1">Excellent</label>
<button type="button" class="btn" id="customButton2" name="customButton" value="2">
<label for="customButton2">Not good</label>
You cannot convert a radio directly to a button like you did. The HTML is not valid
You can style a radio like a button or do this
document.getElementById("myForm").addEventListener("click",function(e) {
const tgt = e.target.closest("button")
if (tgt.matches(".customButton")) document.getElementById("customButton").value = tgt.value
})
<form id="myForm">
<input type="hidden" name="customButton" id="customButton" value="" />
<button type="button" class="btn customButton" value="1">Excellent</button>
<button type="button" class="btn customButton" value="2">Not good</button>
</form>
I have this form:
<form method="post">
<input type="tel" name=phone_no required>
<input type="password" name=password required>
<button type="submit">Sign In</button>
</form>
How can I automatically submit this form when browser auto-fills these input fields in form ?
You can do this using Javascript :
(1) Get html elements with selector :
document.getElementsByName(..)
(2) Check if the elements contains any value.
element.value
(3) In that case, trigger an event which click on the submit button :
button.click();
We have built a site with a login page - login page is a simple form in field sets - annoyingly when using an iPad the keyboard is triggered whenever pressing the button - it stays active as the next page is loaded - i can understand why - following is the form code - is there any way to disable this functionality?
<section>
<h3>Login</h3>
<form method="post" action="/Login" novalidate="novalidate" _lpchecked="1"> <fieldset>
<label class="ui-front legend icon-img-inside">
<label for="FormModel_UserName">User Name</label>
<input type="text" value="" name="FormModel.UserName" id="FormModel_UserName" data-val-required="Please provide your User Name" data-val="true" aria-required="true" aria-describedby="FormModel_UserName-error" class="input-validation-error" aria-invalid="true">
<span data-valmsg-replace="true" data-valmsg-for="FormModel.UserName" class="field-validation-error"><span id="FormModel_UserName-error" class="">Please provide your User Name</span></span>
<img alt="Icon: Person" src="/css/img/icons/icon-user.svg">
</label>
</fieldset>
<fieldset>
<label class="ui-front legend icon-img-inside">
<label for="FormModel_Password">Password</label>
<input type="password" name="FormModel.Password" id="FormModel_Password" data-val-required="Please provide your Password" data-val="true" aria-required="true" class="input-validation-error" aria-describedby="FormModel_Password-error">
<span data-valmsg-replace="true" data-valmsg-for="FormModel.Password" class="field-validation-error"><span id="FormModel_Password-error" class="">Please provide your Password</span></span>
<img alt="Icon: Pencil" src="/css/img/icons/icon-pencil.svg">
</label>
</fieldset>
<div data-valmsg-summary="true" class="validation-summary-errors"><ul> <li>Please provide your User Name</li><li>Please provide your Password</li> </ul></div> <fieldset>
<button class="button" name="submit" type="submit">
<i class="key"></i>
<span>Login</span>
</button>
</fieldset>
<!-- Javascript detection -->
<span class="result-login" id="result"></span>
You could try to disable native, default submit process and do submiting with js,, something like this:
document.getElementsByClassName('button')[0].onclick = function(e){
e.preventDefault();
document.getElementById('frm1').submit();
}
see the code here, I changed some tag names, look the html pane also..: http://codepen.io/mkdizajn/pen/EgmPQR?editors=1010
I can't see this live and test but I hope that helps..
jsfiddle demo: https://jsfiddle.net/zpufky7u/1/
I have many forms on the site, which was working fine, but just suddenly angular is binding all the forms with class="ng-pristine ng-valid"
Is this a setting or what can cause angular to auto-bind forms?
I'm using angular version: angular#1.4.7
Following is my form, as you can see there is no model inside form
<form name="app_bundle_notification_type" method="post">
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<div class="checkbox">
<label class="required">
<input type="checkbox" id="app_bundle_notification_type_isNewsletter" name="app_bundle_notification_type[isNewsletter]" required="required" value="1" checked="checked">
Yes, I would like to receive email newsletter for new deals, coupons and news.
</label>
</div>
</div>
</div>
</div>
<div class="row m-y-1">
<div class="col-sm-12">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
<input type="hidden" id="app_bundle_notification_type__token" name="app_bundle_notification_type[_token]" class="form-control" value="b-_qAF6LHFy_GtPlsFG3iguhVXfGsj38TXm22Ke8j0k">
</form>
Angular app.js
define(['angular'], function() {
var app = angular.module("myApp", []);
app.init = function () {
angular.bootstrap(document, [app.name]);
};
return app;
});
So far I found the issue, if you do angular.bootstrap(document, [app.name]); then it is binding the form. it was not causing this issue before.
Presuming you are using a form tag around your form, Angular automatically adds those classes to each ng-model inside your form.
This allows you much more control over the elements inside your form to perform any validation or logic you want your form to capture or enforce before submitting.
Much of it is listed in the docs here
https://docs.angularjs.org/api/ng/directive/form
For this reason, Angular prevents the default action (form submission
to the server) unless the <form> element has an action attribute
specified.
New version accepts empty action="", check release version at https://github.com/angular/angular.js/pull/3776
I have two forms on my page. They are popups and through javascript they are shown/hidden. Both forms go to wrong controller. The action name is taken from form parameters, but the controller is taken from somewhere else.
<!-- create queue form -->
<div id="popupCreateQueue" style="display: none;">
<div id="queuePopupBody">
<form controller="queueAAA" action="createAAA" name='createQueueForm'>
<input id='popupQueueNameInput' name="queueName" type="text">
<input type="submit" value="Create">
<input type="button" onclick="createQueueForm_hide()" value="Cancel">
</form>
</div>
</div>
<!-- create activity form -->
<div id='popupCreateActivity' style="display: none;">
<div id='activityPopupBody'>
<form controller="activityBBB" action="createBBB" name='createActivityForm'>
<input id='popupActivityNameInput' name="activityName" type="text">
<input type="submit" value="Create">
<input type="button" onclick="createActivityForm_hide()" value="Cancel">
</form>
</div>
</div>
First submit goes to queue/createAAA?queueName=asd
Second submit goes to queue/createBBB?activityName=asd
What happens here? Why some other controller is being called?
upd: i tried to renaming every "queue" in the page to some other name and still the controller called was "queue"
p.s. the buttons to show popups are inside , don't know if that matters.