I have 2 separate forms in HTML and want to send them via a single button. How can I do that? When I try to make them into one form by removing the start and end in the middle, the div tags and CSS messes up. Here is my code.
<div class="contact-bottom">
<div class="col-md-6 contact-left">
<form>
<input type="text" placeholder="Name" required="">
<input type="text" placeholder="E-mail" required="">
<input type="text" placeholder="Phone" required="">
</form>
</div>
<div class="col-md-6 contact-left">
<form>
<textarea placeholder="Message"></textarea>
<input type="submit" value="SEND">
</form>
</div>
<div class="clearfix"> </div>
</div>
Use ajax to post values !
Exemple:
<script>
$(document).ready(function(){
$("#submit").click(function(){
$.ajax({
type: 'post',
url: "mail.php",
data: { "name" : $("#mail-name").val() ,"email" : $("#mail-email").val() },
success: function($response) {
alert($response);
}
});
});
});
Related
I am doing the following:
<form action="https://www.google.com/search">
<div>
<input type="text" name="q" id="corners">
</div>
<div>
<input type="submit" value="Google Image Search">
</div>
</form>
However, I want to add additional default text to the URL after the user's input like this:
https://www.google.com/search?q=searchterm&some-additional-text
How can I do this?
The following code uses JavaScript to concatenate https://www.google.com/search?q=, the input value and any additional text, then assigns that string to the action attribute of the form, before submitting the form.
function submitForm() {
var form = document.getElementById("form");
var search = document.getElementById("corners").value;
var additional = "&";
form.setAttribute("action", "https://www.google.com/search?q=" + search + additional);
form.submit();
}
<form action="https://www.google.com/search" id="form">
<div>
<input type="text" name="q" id="corners">
</div>
<div>
<input type="button" value="Google Image Search" onclick="submitForm()">
</div>
</form>
I ended up just using the following:
<div>
<input type="hidden" name="test" value="test" style="display: none;">
<input type="text" name="test">
</div>
is there any way in angular 2 to pick name/id of input inside divs?
html:
<div class="form-pages" (click)='function()'>//if it's possible then what should I put into function param?
<fieldset>
<input type="text" name="firstName"/>
<input type="text" name="firstName"/>
</fieldset>
</div>
component:
function(str){this.var=str}
Not sure if template variables of child elements can be accessed
<div class="form-pages" (click)='function(input1.value, input2.value)'>//if it's possible then what should I put into function param?
<fieldset>
<input #input1 type="text" name="firstName"/>
<input #input2 type="text" name="firstName"/>
</fieldset>
</div>
If this doesn't work you can use
<div class="form-pages" (click)='function()'>//if it's possible then what should I put into function param?
<fieldset>
<input #myinput type="text" name="firstName"/>
<input #myinput type="text" name="firstName"/>
</fieldset>
</div>
#ViewChildren('input') inputs:QueryList<ElementRef>;
myFunction() {
let inputs = this.inputs.toArray();
console.log(inputs[0].value;
console.log(inputs[1].value;
}
Ok, I did it alone, thanks for previous answer, but for me it works well, It's needed to call $event.target.name method which will return name of clicked target.
<div (click)="setFocus($event.target.name)">
<input type='text' name='input1 />
<input type='text' name='input2 />
</div>
in componentsetFocus(str){this.var = str)
I am using anuglar.js form validation.
I want to check validation without form submit button.
This is my html.
<form name="userForm">
<input type="hidden" ng-model="StandardID" />
<div class="form-group">
<label for="email">Name:</label>
<input type="text" class="form-control" ng-model="Name" placeholder="Name" maxlength="50" required>
<span ng-show="userForm.Name.$dirty && !userForm.Name.$valid">Name is required.</span>
</div>
<div class="form-group">
<label for="pwd">Alias:</label>
<input type="text" class="form-control" ng-model="Alias" placeholder="Alias" maxlength="50" required>
</div>
<button type="submit" class="btn btn-info" ng-click="update()">Submit</button>
<button type="submit" class="btn btn-info" data-dismiss="modal">Cancel</button>
</form>
My controller js is.
$scope.update= function () {
alert($scope.userForm.Name.$valid);
if ($scope.userForm.Name.$valid) {
alert("Entry added");
}
}
It shows small dialog that says this field is required. I don't want this popup . Why span section does not show?
To do it, the key is use the name attribute in your <form> and in all of your inputs.
Following this way, angularjs will create a form instance where you can access all fields like myForm.myInput.$invalid
For example:
<form name="myForm" novalidate>
<label>My Input:</label>
<input type="text" name="myInput" ng-model="myInput" required>
<span ng-show="myForm.myInput.$dirty && myForm.myInput.$invalid">My Input is invalid.</span>
</form>
Check angular docs
HTML
<div ng-app="myApp">
<form name="cutome_form" ng-submit="submitForm()" novalidate>
<input type="text" name="name" class="form-control" ng-model="Name" placeholder="Name" maxlength="50" required>
<div ng-show="cutome_form.name.$dirty && cutome_form.name.$invalid">
<span class="error" ng-show="cutome_form.name.$error.required">The field is required.</span>
</div>
<div class="form-group">
<label for="pwd">Alias:</label>
<input type="text" name="alias" class="form-control" ng-model="Alias" placeholder="Alias" maxlength="50" required>
</div>
<div ng-show="cutome_form.alias.$dirty && cutome_form.alias.$invalid">
<span class="error" ng-show="cutome_form.alias.$error.required">The field is required.</span>
</div>
<button type="submit" ng-disabled="cutome_form.$invalid">Submit All</button>
</form>
</div>
directive
.directive('ngModel', function() {
return {
require: 'ngModel',
link: function(scope, elem, attr, ngModel) {
elem.on('blur', function() {
ngModel.$dirty = true;
scope.$apply();
});
ngModel.$viewChangeListeners.push(function() {
ngModel.$dirty = false;
});
scope.$on('$destroy', function() {
elem.off('blur');
});
}
}
});
I have simple html form on my site:
<form action="mailer.php" method="post">
<fieldset>
<div class="column-50">
<div>
<label for="name">Name <span>*</span></label>
<input type="text" id="name" name="name" required>
<span class="mf-error-message">Error! </span>
</div>
<div>
<label for="email">Email <span>*</span></label>
<input type="text" id="email" name="email" required>
<span class="mf-error-message">Error! </span>
</div>
.... // some more fields
<input type="submit" id="submit" name="submit" value="Enter your Information">
</form>
The problem is that on iOS devices ( phone, tablet .. ) form it can be submitted without user to populate required fields.
Why is that? Is there a way to fix it on client side?
This should work. But it will be for all not only for iOS
<form action="mailer.php" method="post" id="myForm">
Then this
var form = document.getElementById('myForm');
form.noValidate = true;
form.addEventListener('submit', function(event) {
if (!event.target.checkValidity()) {
event.preventDefault();
alert('Error! You must fill all required fields.');
}
}, false);
Ok, so this is the problem. I have a password input form that looks like this:
<form class="form1" action="WEBSITE.HTML" onsubmit="return (this.pass.value==='1234')?true:false;">
<div class="row uniform half collapse-at-2">
<div class="8u">
<input type="password" name="pass" id="password" placeholder="Input password"/>
</div>
<div class="4u">
<input class="fit" type="submit" value="Go" onclick="if (document.getElementById('password').value == '1234');" />
</div>
</div>
</form>
It works great, the only problem is that when I submit the right password, it redirects me to the website, for example, google, with this URL: google.com?pass=1234. So it basically reveals the password when someone inputs it correctly. Is there any way to avoid this? Hope I was clear enough.
Put method attribute in your form:
<form method="post" class="form1" action="WEBSITE.HTML" onsubmit="return (this.pass.value==='1234')?true:false;">
And I think you don't need to use ===, use simple == instead.
UPDATE:
if your site doesn't like some hidden post values, use redirect without sending any of values:
<form class="form1" onsubmit="validateForm(); return false;">
<div class="row uniform half collapse-at-2">
<div class="8u">
<input type="password" name="pass" id="password" placeholder="Input password"/>
</div>
<div class="4u">
<input class="fit" type="submit" value="Go" />
</div>
</div>
</form>
<script type="text/javascript">
function validateForm()
{
var pass = document.getElementById('password').value;
if(pass == '1234') //here 1234 is your password
window.location = 'https://www.google.com';
}
</script>