No matter what I try I cannot get this to submit my search form
<div id="search_bar_container" style="z-index:99999">
<div class="container">
<form action="tour-list-search-results.php" method="post" name="search_2" id="search_2">
<div class="search_bar">
<div class="nav-searchfield-outer">
<input type="text" autocomplete="off" name="field-keywords" placeholder="Type your search terms ...." id="twotabsearchtextbox">
</div>
<div class="nav-submit-button">
<input type="submit" onclick="this.form.submit();" name="button" id="button" class="nav-submit-input" value="Submit">
</div>
</div>
<!-- End search bar-->
</div>
</div>
<!-- /search_bar-->
</form>
</div>
This seems to work fine, BUT your HTML looks invalid. The form is not nested correctly and you have an extra tag.
Apparently, you just need to tidy up your HTML and the form will submit when you click the button.
$("form").submit(function( event ) {
alert( "Form submitted" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search_bar_container" style="z-index:99999">
<div class="container">
<form action="tour-list-search-results.php" method="post" name="search_2" id="search_2">
<div class="search_bar">
<div class="nav-searchfield-outer">
<input type="text" autocomplete="off" name="field-keywords" placeholder="Type your search terms ...." id="twotabsearchtextbox" />
</div>
<div class="nav-submit-button">
<input type="submit" onclick="this.form.submit();" name="button" id="button" class="nav-submit-input" value="Submit" />
</div>
</div>
<!-- End search bar-->
</form>
</div>
<!-- /search_bar-->
</div>
I have formatted your HTML correctly and as you can se, the form submits on click of the button.
Fiddle
Related
Is it possible to automatically submit a tinymce form after a certain name of words written in the textarea field? I tried this but it doesn't work.
Here's my code:
<body>
<div class="container mt-5">
<form method="post" id="form" action="getform.php">
<div class="form-group">
<label>Title</label>
<input type="text" name="title" class="form-control">
</div>
<div class="form-group mt-4">
<label>Content</label>
<textarea name="dopamine" id="tinymce"></textarea>
</div>
<button class="btn btn-primary mt-4">Submit</button>
</form>
</div>
<script>
$('#tinymce').keyup(function(){
if(this.value.length ==10){
$('#Form').submit();
}
});
</script>
</body>
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
I created a form and when I submitted it, it was not saving data in chrome autofill database. I inspected html page of amazon.com and I have come up with a bare minimum form that helps saving data in auto fill database. Following is the code.
<BODY>
<form action="" method="post">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-lg-6">
<div >
<label for="address-ui-widgets-enterAddressLine1" >First Nadme</label>
<input name="address-ui-widgets-enterAddressLine1" id="address-ui-widgets-enterAddressLine1" maxlength="30" type="text">
</div>
<div >
<label >Lastaaa </label>
<input id="address-ui-widgets-enterAddressCity" maxlength="30" type="text">
</div>
<div >
<label >username</label>
<input id="address-ui-widgets-enterAddressStateOrRegion" maxlength="150" type="text" >
</div>
<div >
<label >dfkdfk</label>
<input id="address-ui-widgets-enterAddressPostalCode" maxlength="254" type="text">
</div>
</div>
</div> <!-- panel-body -->
<div class="panel-footer">
<input class="btn btn-success btn-sm" type="submit" value="Register">
</div> <!-- panel-footer -->
</div> <!-- panel -->
</form>
</BODY>
I have just added random labels. The only thing that i am not getting is that if I change name of any id then auto fill does not save any data. I am unable to get the logic.
I was using a foundation for apps button in a form. But ng-disabled isn't working with it.
HTML:
<form name="loginForm" novalidate>
<div class="grid-block">
<div class="grid-content">
<input type="text" placeholder="Username" ng-model="formData.username" required/>
</div>
</div>
<div class="grid-block">
<div class="grid-content">
<input type="password" placeholder="Password" ng-model="formData.password"/>
</div>
</div>
<div class="grid-block">
<div class="grid-content">
<a class="button" type="button" href="#" ng-disabled="loginForm.$invalid" ng-click="userLogin()">Login</a>
</div>
</div>
{{loginForm.$invalid}}
</form>
When I use a normal HTML button it is working.
That's not a button it's a link href, if you use a button tag it works fine.
<button class="button" type="submit" ng-disabled="loginForm.$invalid" ng-click="userLogin()">Login</button>
I have problem when using my ajax form inside the lightbox div .
the form worked outside the lightbox .
after submit the form , I cannot recieve the variable from the form , I see it empty .
I am using lightbox from here:
http://www.aerowebstudio.net/codecanyon/jquery.lightbox/
the html example "
<html>
<head>
<script type="text/javascript">
function send_ajax_data() {
var reg_user = document.getElementById('reg_user').value;
reg_user2 = document.getElementById('reg_user2').value;
reg_pass = document.getElementById('reg_pass').value;
reg_pass2 = document.getElementById('reg_pass2').value;
reg_email = document.getElementById('reg_email').value;
alert(reg_user);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('div.lightbox').lightbox();
});
</script>
</head>
<body>
<div id="signup" style="width:756px; margin-right:auto;margin-left:auto;">
<div class="light-box">
<div class="center">
<div class="welcome">
<h1>Hello</h1>
</div>
<div id="reg_stats"></div>
<div class="login-form">
<div class="form-container">
<label class="label">xxx</label>
<input id="reg_user" type="text" />
<label class="label">xxx</label>
<input id="reg_user2" type="text" />
<label class="label">xxx</label>
<input id="reg_email" type="text" />
<label class="label">xxx</label>
<input id="reg_pass" type="text" />
<label class="label">xxx</label>
<input id="reg_pass2" type="text" />
<input type="submit" onclick="send_ajax_data();" class="login-btn" value="Done" />
</div>
</div>
</div>
</div>
</div>
new user
</body>
</html>
Try adding in a form tag?
Without a form wrapping the inputs, there is nothing to submit.