I have the following code:
<section id="about" class="home-section color-dark bg-white">
<form id="contact-form" class="wow bounceInUp" data-wow-offset="10" data-wow-delay="0.2s" action="load_event.php" method="post">
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="wow flipInY" data-wow-offset="0" data-wow-delay="0.4s">
<div class="section-heading text-center">
<h4 class="h-bold">Encuentra un evento</h4>
<input type="text" class="form-control input-lg" required placeholder="ID del evento" oninvalid="this.setCustomValidity('Este campo es requerido')" id="event_id" name="event_id"></input>
<input type="submit" class="btn btn-skin btn-lg btn-block" value="Buscar" ></input>
</div>
</div>
</div>
</div>
</div>
</form>
</section>
but the required validation on the text input tag works only the first time, if I click on the submit button the first time with the text field empty, the following attempts will say that the field is empty even if it is not. This behavior is the same on Firefox and Internet Explorer. Any ideas?
Related
I am very confused that my html form action doesn't redirect me to another page, because this has always worked.
Here's my code
<section class="contact section-padding" data-scroll-index="6">
<div class="container">
<div class="row">
<div class="section-head text-center col-sm-12">
<h4>Neem contact op</h4>
<h6>Vul formulier in</h6>
</div>
<div class="offset-lg-2 col-lg-8 offset-md-1 col-md-10">
<form method="post" class="form" id="contact-form" action="verstuurd.php">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input id="form_name" type="text" name="volledige_naam" placeholder="Volledige naam">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="form_email" type="email" name="email" placeholder="E-mailadres" >
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input id="form_subject" type="text" name="subject" placeholder="Onderwerp">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea id="form_message" name="message" placeholder="Bericht" rows="4" ></textarea>
</div>
</div>
<div class="col-md-12 text-center">
<button type="submit"><span>Verstuur</span></button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
What is wrong with this? I thought it might has to do something with the div classes, but is this possible?
Edit
Verstuurd.php
<section class="contact section-padding" data-scroll-index="6">
<div class="container">
<div class="row">
<div class="section-head text-center col-sm-12">
<h4>Succesvol verstuurd</h4>
<h6>We nemen zo snel mogelijk contact met u op</h6>
</div>
</div>
</div>
</section>
At the moment I do not have any php code in verstuurd.php. I thought that aciton only redirects to PHP files and not HTML files.
I'm guessing there's some javascript that is blocking the form submission. Look out for anything similar to e.preventDefault(); in relation to form submission.
Change your button from
<button type="submit"><span>Verstuur</span></button>
to
<input id="submit" name="submit" type="submit" value="Verstuur">
I have this form
<div class="row">
<div class="col-lg-8 offset-2">
<form class="form-signin" method="POST">
{{ csrf_field() }}
<div class="form-label-group mt-1">
<label class="text-dark-orange" for="name">Naam</label>
<input type="text" id="name" name="name" class="form-control sentje-inputfield-payment" placeholder="Vul hier uw naam in" required>
</div>
<div class="form-label-group mt-1">
<label class="text-dark-orange" for="note">Notitie</label>
<textarea type="text" id="note" name="note" class="form-control sentje-inputfield-payment" placeholder="Vul hier eventueel een notitie in"></textarea>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-8 offset-2">
<button type="submit" class="btn btn-block btn-lg sentje-button">Betalen</button>
</form>
</div>
</div>
When I click the button it sends the $paymentrequest with it. (I already sent that parameter to the view) How would I also pass on the data that has been putted in the form?
Give your form an ID and make the action that of the <a> URL:
<form action="{{ route('paymentrequest.preparePayment', [$paymentrequest->unique_link, $paymentrequest]) }}" id="my-form" class="form-signin" method="POST">
Change your <a> to just button with the type="submit" and a form="<form-id>"
<button type="submit" form="my-form" class="btn btn-block btn-lg sentje-button">Betalen</button>
Using the form property allows you to close your form tag and keep the button outside and allows you to still submit it and keep your code neater.
I am trying to embed a Contact Form 7 form in a custom theme page in Wordpress.
My custom theme page is located in /wordpress/wp-content/themes/theme-name/.
All of the HTML markup in the Contact Form 7 form is outputting correctly, including the form tag and all of the hidden inputs generated by CF7. The only elements that are not displaying are the form fields themselves. Is there some setting or something else I need to do to get this to work?
PHP code in theme file:
<?php echo do_shortcode( '[contact-form-7 id="503" title="landing-page-1"]' ); ?>
Contact Form 7 form template:
<div class="container">
<h5 class="modal-title text-white">Get your free quote</h5>
<div class="form-group">
[text* requester-name placeholder "Your name" class:form-control class:form-control-lg class:py-3]
</div>
<div class="form-group">
[email* requester-email placeholder "Your email" class:form-control class:form-control-lg class:py-3]
</div>
<div class="form-group">
[tel requester-phone placeholder "Phone (optional but helpful)" class:form-control class:form-control-lg class:py-3]
</div>
<div class="form-group">
[text* property-address placeholder "Property address + zip code" class:form-control class:form-control-lg class:py-3]
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center">
[submit class:btn class:btn-primary class:green-btn class:py-3 "Click here"]
</div>
</div>
</div>
</div>
Here is the resulting output (note that the inputs are missing):
<div role="form" class="wpcf7" id="wpcf7-f503-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/493-2#wpcf7-f503-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="503" />
<input type="hidden" name="_wpcf7_version" value="5.1" />
<input type="hidden" name="_wpcf7_locale" value="en_US" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f503-o1" />
<input type="hidden" name="_wpcf7_container_post" value="0" />
<input type="hidden" name="g-recaptcha-response" value="" />
</div>
<div class="container">
<h5 class="modal-title text-white">Get your free lawn care quote</h5>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center">
<input type="submit" value="Click here" class="wpcf7-form-control wpcf7-submit btn btn-primary green-btn py-3" />
</div>
</div>
</div>
</div><div class="wpcf7-response-output wpcf7-display-none"></div></form>
The answer is... the order of the class attributes matters.
I moved the class attributes to before the placeholder attribute and it worked.
My HTML form is not submitting. I am trying to collect data from form to an API but the form is not submitting.
<div class="col-lg-12">
<div class="card">
<div class="panel panel-primary">
<div class="panel-header">
<h4 class="text-center">Investment Preview</h4>
</div>
<div class="panel-body">
<h5 class="text-center"> Credit your account </h5>
<?php $classObj->funding(); ?>
<form action="google.com" method="POST">
<p class="form-control-static text-center"> Enter amount in dollar </p>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" name="amount" min="300" max="4999" class="form-control" required />
</div>
</div>
<div class="panel-footer">
<button type="submit" name="fund" class="btn btn-primary btn-block btn-flat"> Invest </button>
</div>
</form>
</div>
</div>
</div>
This is the php code for funding method
function funding(){
echo "testing";
if(isset($_POST["fund"])) {
$amount = mysqli_real_escape_string($this->conn, trim($_POST['amount']));
echo $amount;
}
}
Its not submitting because you have your form action as google.com
<form action="google.com" method="POST">
This needs to be changed to the correct file path that contains the processing code.
This is form opening and closing are wrong please set like this after form submit done:
<div class="col-lg-12">
<div class="card">
<div class="panel panel-primary">
<div class="panel-header">
<h4 class="text-center">Investment Preview</h4>
</div>
<form action="https://www.google.com" method="POST">
<div class="panel-body">
<h5 class="text-center"> Credit your account </h5>
<?php $classObj->funding(); ?>
<p class="form-control-static text-center"> Enter amount in dollar </p>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" name="amount" min="300" max="4999" class="form-control" required />
</div>
</div>
<div class="panel-footer">
<button type="submit" name="fund" class="btn btn-primary btn-block btn-flat"> Invest </button>
</div>
</form>
</div>
</div>
Your HTML tags are not properly nested. The second </div> in the form matches the <div> before <form>, so it's ending the form as well. As a result, the submit button is not inside the form.
Move that </div> down, after </form>.
Any decent editor or IDE should have warned you about unbalanced tags. You also should have noticed that the button wasn't inside the form when you opened the browser's console and checked the DOM inspector.
<div class="col-lg-12">
<div class="card">
<div class="panel panel-primary">
<div class="panel-header">
<h4 class="text-center">Investment Preview</h4>
</div>
<div class="panel-body">
<h5 class="text-center"> Credit your account </h5>
<?php $classObj->funding(); ?>
<form action="yourscript.php" method="POST">
<p class="form-control-static text-center"> Enter amount in dollar </p>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" name="amount" min="300" max="4999" class="form-control" required />
</div>
<div class="panel-footer">
<button type="submit" name="fund" class="btn btn-primary btn-block btn-flat"> Invest </button>
</div>
</form>
</div>
</div>
</div>
</div>
I need to save data of a form into database..It is simple for me with a submit button..But now here I need to save data at its different stages..Or I'm having different tabs for each stage.. How could I save data.? I'm using a next button in order to navigate from one tab to other and at last there is a submit button..How it is possible to save data while clicking the next button.?
Here is my form:
<div class="stepwizard col-md-offset-3">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
1
<p>Step 1</p>
</div>
<div class="stepwizard-step">
2
<p>Step 2</p>
</div>
<div class="stepwizard-step">
3
<p>Step 3</p>
</div>
</div>
</div>
<?php
$this->load->helper('form');
$attributes=array('method'=>'post','id'=>'myform','class'=>'form-horizontal','role'=>'form');
echo form_open("form_controller/insert",$attributes);
?>
<div class="row setup-content" id="step-1">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">Name</label>
<input type="text" required="required" class="form-control" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label class="control-label">Age</label>
<input maxlength="200" type="text" required="required" class="form-control" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 3</h3>
<div class="form-group">
<label class="control-label">Location</label>
<input maxlength="200" type="text" required="required" class="form-control" />
</div>
<button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
</div>
</div>
</div>
<?php echo form_close(); ?>
There are several ways of creating multi step forms. Here are some of the useful posts:
How to Create a Multi-Step Form Using RhinoSlider
session-based PHP-multistep-form with mvc-pattern
Multi step/page form in PHP & CodeIgniter
Multiple step form ragistration in codeigniter
Multi-Step Forms and Data Submission in CodeIgniter