two button in bootstrap form validation - javascript

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>

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()".

required not working inside form in HTML when text box left empty

<form method="get">
<input type="text" name="StudentID" placeholder="Ex: ZX12345"
id="StudentID" pattern="[A-Z]{2}[0-9]{4}" required><br> <br>
<button name="submit" type="button" value="submit"
onclick="studentId()">Submit</button>
</form>
Here even if i am not providing studentID then also its not showing any error even required is used and other problem i am facing is pattern not working here.
Use this code-
<form method="post">
<input type="text" name="StudentID" placeholder="Ex: ZX12345"
id="StudentID" pattern="[A-Z]{2}[0-9]{4}" required="required"><br> <br>
<button name="submit" type="submit" value="submit"
onclick="studentId()">Submit</button>
</form>
The button type should be submit for checking the input fields.
Refer this.
Update the type of button to submit.
<button name="submit" type="submit" value="submit"
onclick="studentId()">Submit</button>
Because form tag always checks the required field is empty or not on submit only.
you should add ending slash in ur input
and remove type attribute from the button
<form method="post">
<input type="text" name="StudentID" placeholder="Ex: ZX12345"
id="StudentID" pattern="[A-Z]{2}[0-9]{4}" required/>
<button name="submit" onclick="studentId()">Submit</button>
</form>
here is a demo https://codepen.io/kjagannathreddy/pen/wRYpOm
Solution to the problem is using in javascript method.
event.preventDefault();

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

Avoid default warnings in form -Angular js

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>

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