CODEWITHSUNDEEP
javascriptjqueryhtmlforms
DANIEL
DANIEL

Reputation: 547

JQuery - How to send a form and call a anchor?

I have a issue with a form - the form makes a validation without reload the page and print on screen the error only after I click the send button.

The issue occurs because the error message appears only on top of the form.

then if you are using small devices and small screens - the top and the send button does not appears in the same screen.

if the form has an error - and you click send - you cannot see the message and the form doesn't go anywhere.

for correct this I need to leave the screen at the top of the form again, after click the submit button

I tried putting a anchor id on the top, and create a 

<a href="#topform"><button type="submit"></a>

or 

<button type="submit" onclick="document.href:#topform">

but this doesn't Works. any idea?

Upvotes: 2

Views: 72

Answers (2)

Elentriel
Elentriel

Reputation: 1237

< a > and < button > do not mix well together, never put them on top of each other. you could do the simpler and not so elegant solution

<button type="submit" onclick="jQuery('#after_submit').click();">
<a id="after_submit" style="display:none;" href="#topform"></a>

or do the right thing and go for a scroll function using animate as mentioned above

Upvotes: 1

Daebak
Daebak

Reputation: 419

Check this example you can put to top of your form id element.

function toTop() {
    
	$('html, body').animate({scrollTop: $( $('body') ).offset().top}, 500, 'swing');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<html>
  <body>
<form id="contactForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Full name</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="firstName" placeholder="First name" />
        </div>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="lastName" placeholder="Last name" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Phone number</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="phoneNumber" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Email address</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Message</label>
        <div class="col-xs-9">
            <textarea class="form-control" name="message" rows="7"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label" id="captchaOperation"></label>
        <div class="col-xs-3">
            <input type="text" class="form-control" name="captcha" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-primary" onclick='toTop()'>Submit</button>
        </div>
    </div>
</form>
    </body>
  </html>

Make a function that scroll to top and than call from your html button element I don't know if you have the form in main page or where so you have to check the element, but this is the idea:

javascript

function toTop() {
    $('html, body').animate({scrollTop: $( $('body') ).offset().top}, 500, 'swing');
}

html

<button onclick="toTop()">Click me</button>

Cheers!!!

Upvotes: 1

Related Questions