Avoid default warnings in form -Angular js - javascript

While validating a user form am getting a default form validation pop up like this:
Here's the form with code:
<form name="myForm">
<input type="text" class="form-control" required
data-ng-model="entity.name" name="name"
placeholder="Pit Name">
</form>
<button type="button" ng-click="save()" ng-disabled="myForm.$invalid">Save</button>
There is a save button which on click am getting the above pop up.How can I disable that pop up?

You can use novalidate like
<form action="demo_form.asp" novalidate>
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

Related

How i can add onsubmit attribute to <form> in contact form 7 and onclick attribute to the submit button in contact form 7

This is my HTML code:
<form id="form" onsubmit="return false;">
<input type="text" id="userInput" />
<input type="email" id="emailId" />
<input type ="number" id="phoneNumber" />
<input type="submit" onclick="userdetails();" />
</form>
How i can implement this in contact form 7 of my wordpress website. Also i have multiple forms on same page so please help how i can target a specific form with the above mentioned attributes..???
Here is how you can achieve it :
<form id="form1">
<input type="text" id="userInput">
<input type="email" id="emailId" />
<input type ="number" id="phoneNumber" />
<input type="button" onclick="userdetails();" value="Details"/>
</form>
<form id="form2">
<input type="button" onclick="form1.submit()" value="Send" />
</form>
Explanation :
I have replace type="submit" by type=button so that it doesn't submit the form.
If you need to submit a form you can proceed this way onclick="form_id.submit()".

how to display a value(in text field) from one form(after submitting it) to another form (both are on the same page)

So, I have the form1 where i am giving values in two fields and submitting it,
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
I want these values to automatically be written and visible in the two textinput and numberinput fields in form2.
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
how do i use javascript to automatically set values visible and ready to submit
to the fields in form2 ???
Note: i'm using two forms because they both have different actions after clicking submit and both the forms are on the same page.
Here is one small example using id hashes, with this idea, I think you can start, object hash will have pair list,
You can restrict specific form by mentioning id of it, in place of $('form :input').on():
var hash = {
aadhar_r : 'a_number',
cand_r : 'cid'
}
$('form :input').on('keyup',function(){
if(this.id in hash){
$('#'+hash[this.id]).val($(this).val())
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
If you use jQuery, you can serialize your first form and send it directly to the server. Then you get the value from the input field and set it to the other input field.
Form 1:
<form id="form1">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="idOfInput1" required/>
<button id="submit" />
</form>
Script:
$("#submit").click(function () {
$.post("new_cand.php", $("#form1").serializeArray(), function () { /* Nothing to do with new_cand.php data */});
$("#idOfInput2").val($("#idOfInput1").val());
});
Form 2:
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="idOfInput2" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
Attention: this is not tested, requires jQuery and is for a post method

How to join input to form

Hi I have a little problem
I have 3 forms that send different parameters via GET to another page and i have 3 inputs outside all forms that I want to send with form that user chooses to submit.
Inputs with names one, two and three must be send with 1 of that forms.
This is my code:
<input type="text" name="one">
<input type="text" name="two">
<input type="text" name="three">
<form action="process.php" method="get">
<input type="text" name="name">
<input type="submit" value"Process by name">
</form>
<form action="process.php" method="get">
<input type="text" name="adress">
<input type="submit" value"Process by address">
</form>
<form action="process.php" method="get">
<input type="text" name="number">
<input type="submit" value"Process by number">
</form>
All I want to is, when someone submit any form, that three inputs name="(one,two,three)" are send with rest param of form.
EDIT: Just 1 form is submitted!
If you put everything into one form, and use a hidden type value, you can ensure that all values are passed on submit.
<form action="process.php" method="get" id="form1">
<input type="text" name="one">
<input type="text" name="two">
<input type="text" name="three">
<input type="text" name="name">
<input type="submit" name="btnName" value="Process by name">
<input type="text" name="adress">
<input type="submit" name="btnAddress" value="Process by address">
<input type="text" name="number">
<input type="submit" name="btnNumber" value="Process by number">
</form>
Since you are submitting to a PHP page, you can check which of the buttons was pressed with the following code...
if (isset($_POST['btnName'])) {
//do something with name
} else if (isset($_POST['btnAddress'])) {
//do something with adress
} else if (isset($_POST['btnNumber'])) {
//do something with number
}

two button in bootstrap form validation

I am doing the form validation using bootstrap form validation. I have two button in the particular form, one is confirm button and another one is submit button. I want to prevent the confirm button from the submission and use it as the validation button. The other button use for only submission if the form was filled correctly. If the form was accepted the confirm button is going to fade out.
<form method="post" action="">
<input type="text" name="name">
<input type="text" name="name">
<input type="submit" name="confirm" value="Confirm">
<input type="submit" name="submit" value="Submit">
</form>
If I use type "button" on Confirm button it will not validate the form. If anyone has any idea please answer. Thank you so much for your answer.
I changed the first button's element from an input into a button.
<form method="post" action="">
<input type="text" name="name">
<input type="text" name="name">
<button name="confirm" type="button">Confirm</button>
<input type="submit" name="submit" value="Submit">
</form>
Give an id to confirm button and to form. I have tested this and it's working.
<form method="post" action="" id="myform">
<input type="text" name="name">
<input type="text" name="name">
<input type="submit" name="confirm" value="Confirm" id="confirmbutton">
<input type="submit" name="submit" value="Submit">
</form>
and in jQuery
<script>
$( document ).ready(function() {
$('#myform').submit(function(event){
var btn = $(this).find("input[type=submit]:focus" ).attr("id");
console.log(btn);
if(btn=="confirmbutton")
event.preventDefault();
});
});
</script>

Get datepicker value to prepopulate a field after redirect

I have a form with a datepicker field and I want when I submit this form to redirect me to another page and pre-populate an input-field in another form.
To be more specific.
I have the form with the jquery datepicker field:
<form id="form" action="form.php" method="post">
<input type="text" name="datepicker-field" id="datepicker"/>
<input type="submit" id="btn" value="check"/>
</form>
And the form.php page has another form
<form id="another-form" action="mail.php" method="post">
<input type="text" name="input-field" id="input-field"/>
<input type="submit" id="btn" value="check"/>
</form>
I suppose I have to initialise the datepicker value somehow But I haven't got any javascript knowledge.
I appreciate any help!
Something like
<form id="another-form" action="mail.php" method="post">
<input type="text" name="input-field" id="input-field" value="<?php echo htmlspecialchars($_POST['datepicker-field']) ?>"/>
<input type="submit" id="btn" value="check"/>
</form>

Categories