Ok so jquery works fine when i try using hide() and stuff like that but when I try using submit() nothing happens!
Would really appreciate if someone helped me with this.
Here is my form:
<form class = "form-horizontal" action = "demo.php" method="post" id = "contactform" >
<div class = "modal-header">
<h4> Sign up for newsletter!</h4>
</div>
<div class = "modal-body">
<div class = "form-group">
<label for = "contact-name" class = "col-lg-2" control-label>Name:</label>
<div class = "col-lg-10">
<input type = "text" class = "form-control" id = "contact-name" name="contact-name" placeholder = "Full name" value = "">
</div>
</div>
<div class = "form-group">
<label for = "contact-email" class = "col-lg-2" control-label>Email:</label>
<div class = "col-lg-10">
<input type = "email" class = "form-control" id = "contact-email" name = "contact-email" placeholder = "u#example.com">
</div>
</div>
<div class = "form-group">
<label for = "contact-name" class = "col-lg-2" control-label>Name:</label>
<div class = "col-lg-10">
<textarea class = "form-control" rows = "8"> </textarea>
</div>
</div>
</div>
<div class = "modal-footer">
<a class = "btn btn-default" data-dismiss = "modal">Close</a>
<button class = "btn btn-primary" type = "button" name = "submit" id = "submit" >Submit thiscarp</button>
</div>
</form>
And here is my Jquery code
<script type = "text/javascript">
$(document).ready(
function(){
$("button#submit").click(function()
{
$("form#contactform").submit();
});
});
</script>
Also i have this in my head
<head>
<title> Bootstrap 3 </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/styles.css" rel = "stylesheet">
<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<script type = "text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
$("#contactform").submit();
});
});
</script>
change to $("#contactform").submit(); because you used bad selector and also in button selector
Solved it!
The button id can't be submit.
I changed
<button class = "btn btn-primary" type = "button" name = "submit" id = "submit" >Submit thiscarp</button>
to
<button class = "btn btn-primary" type = "button" name = "connect" id = "connect" >Submit thiscarp</button>
Related
This is a stupid question but I am getting frustrated and hoping for some help. Why won't my values output to the console after submitting? Anyone notice issues?
var todos = "";
// user clicked on the add button in the to-do field add that text into the to-do text
$('#add-todo').on('click', function(event) {
event.preventDefault();
//values per text box
todos = $("#todo-input").val().trim();
//test values from textbox
console.log(todos);
HTML
<div class ="col-4">
<form role = "form">
<div class = "form-group row">
<div class = "To-Do-List">
<label for="todo-input">Add Your To Do List Here:</label>
</div>
<input class="form-control" id="todo-input" type = "text">
<tbody id = "table_body">
</tbody>
</div>
</form>
</div>
<div class="button">
<button class ="btn btn-danger" id="add-todo" type="submit">Add</button>
</div>
You only need close whit "})"
var todos = "";
// user clicked on the add button in the to-do field add that text into the to-do text
$('#add-todo').on('click', function(event) {
event.preventDefault();
//values per text box
todos = $("#todo-input").val().trim();
//test values from textbox
console.log(todos);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="col-4">
<form role = "form">
<div class = "form-group row">
<div class = "To-Do-List">
<label for="todo-input">Add Your To Do List Here:</label>
</div>
<input class="form-control" id="todo-input" type = "text">
<tbody id = "table_body">
</tbody>
</div>
</form>
</div>
<div class="button">
<button class ="btn btn-danger" id="add-todo" type="submit">Add</button></div>
I have this form:
<div role="tabpanel" class="tab-pane" id="xcell">
<div class = "row">
<div class = "col-md-7">
<form method = "POST" action = "<?php echo base_url('Usercontroller/getXcell') ?>">
<div class="form-group">
Start: <input id ="startdate" type ="text" size = "8"/>
</div>
<div class="form-group">
Sfarsit: <input id ="enddate" type ="text" size = "8"/>
</div>
<button type="submit" class="btn btn-default btn-success">Genereaza xcell</button>
</form>
</div>
</div>
</div>
And this is the javascript calendar:
$(document).ready(function(){
$('#startdate').datepicker({
startdate : $(this).val()
});
$('#enddate').datepicker({});
});
I was trying with this startdate : $(this).val(), but it will give a empty result. This is the function where I send data:
public function getXcell() {
$data= $this->input->post();
var_dump($data);
}
I'm using codeigniter, I want to send the inputs that are selected in Start and Sfarsit to my php function to work with. Thanks
You forgot to add name attribute in your form fields
<div class="form-group">
Start: <input id ="startdate" type ="text" size = "8" name="startdate"/>
</div>
<div class="form-group">
Sfarsit: <input id ="enddate" type ="text" size = "8" name="enddate" />
</div>
It seems like my validation won't work properly if I click the submit button it just refresh the browser and won't validate my inputs or I'm not sure if the Javascript cause the validation won't work. First I will start from appending my register form from other file using empty() and append() function based on user's option.
#section ('page-script')
<script>
$(document).on("click", "#register", function ()
{
$.get("accountRegister", function (data)
{
$("#accountBottomContainer").empty();
$("#accountBottomContainer").append(data);
});
});
</script>
#endsection
As you can see below here where I append register.blade.php in my panel-body named #accountBottomContainer
Here where I append my register.blade.php if the user hit the register button after the it wil append panel-body that has an id = accountBottomContainer
#section ('content')
<div class = "row">
<div class = "col-xs-12 col-md-8">
<div class = "panel panel-default">
<div class = "panel-heading">
<h2>Account Dashboard</h2>
<hr>
</div>
<div class = "panel-body">
<button type = "button" class = "btn btn-info" id = "register">Register Employee</button>
<button type = "button" class = "btn btn-info" id = "searchEmployee">Search Employee</button>
<div class = "row">
<br>
<div class="col-md-10">
<div class = "panel panel-default">
<div class = "panel-body" style = "height: 500px" id = "accountBottomContainer">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
Form with validation
Here where I loop through each error to check where the user missed to fill up one of the textfields.
#if (count($errors) > 0)
<div class = "row">
<div class = "col-md-6">
<ul>
#foreach($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
</div>
#endif
<form class = "form-vertical" role = "form" method = "post" action = "{{ route ('account.accountRegister') }}">
<div class = "form-group">
<label for = "email" class = "control-label">Email Address</label>
<input type = "text" name = "email" class = "form-control" id = "email">
</div>
<div class = "form-group">
<label for = "username" class = "control-label">Username</label>
<input type = "text" name = "username" class = "form-control" id = "username">
</div>
<div class = "form-group">
<label for = "password" class = "control-label">Password</label>
<input type = "password" name = "password" class = "form-control" id = "password">
</div>
<div class = "form-group">
<button type = "submit" class = "btn btn-default">Sign Up</button>
</div>
<input type = "hidden" name = "_token" value = "{{ Session::token() }}">
</form>
Controller
public function postRegister(Request $request)
{
$this->validate($request, [
//This will be unique in users table
'email' => 'required|unique:users|email|max:255',
'username' => 'required|unique:users|alpha_dash|max:20',
'password' => 'required|min:6',
]);
}
routes
Route::get('/accountRegister',
[
'uses' => '\App\Http\Controllers\AccountController#getRegister',
'as' => 'account.accountRegister',
]);
Route::post('/accountRegister',
[
'uses' => '\App\Http\Controllers\AccountController#postRegister',
]);
On your javascript, you use a #register id, but i cannot see it on the html side. Is it a mistake?
You should rather use :
$(document).on("submit", "#theIdOfYourFormTag", function () {
I am not able to enter the data to the previous page using ng-model. I moved to the next page after filling some data in textbox,after come to same page i want my data to be entered same as i entered previously, i write the code but its not working please tell me what i am doing wrong and thanks in advance
js code:-
$scope.notesPage = function() {
$rootScope.data = {
Name: $scope.prospectName,
};
$location.path('/prospectNotes');
};
$scope.addProspect = function() {
$rootScope.data.ProspectNotes = $scope.notes;
$scope.ProspectNotes = "";
};
function fillFormData() {
$scope.prospectName = $rootScope.data.Name;
}
$scope.addProspectForm = function() {
$location.path('/create');
fillFormData();
}
first html page
<div class = "container" id = "form-container">
<div class = "form-group">
<label for = "prospectName"> Prospect Name:
<img src = "images/required.gif" alt = "Required" class = "required-star">
</label>
<input type = "text" id = "prospectName" name = "prospectName" ng-model = "prospectName"
class = "form-control" required>
</div>
<div class = "form-group">
<button type="submit" class="col-sm-2 btn btn-primary" ng-click="notesPage()"
style="margin-left:10px;"> Next </button>
</div>
</div>
second html page
<div class = "container" id = "form-container">
<div class = "form-group">
<label for = "notes"> Notes for Prospect {{data.Name}}</label>
<textarea rows="20" id = "notes" name = "notes" ng-model = "notes" class = "form-control"></textarea>
</div>
<div class = "form-group">
<input type="button" id="cancel-button" value="Back" class="col-sm-2 btn btn-primary"
ng-click="addProspectForm()">
<button type="submit" class="col-sm-2 btn btn-primary" ng-click="addProspect()"
style="margin-left:10px;"> Add </button>
</div>
</div>
I'm trying to get the next div with class comment-replies after the current form and prepend data. There are more divs with the same class on the page and forms.
<div class="hide">
<br>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"],ENT_QUOTES,"utf-8")?>" method="post">
<div class="form-group">
<textarea class="form-control comment" rows="6" name="comment"></textarea>
</div>
<div class="form-group">
<div class="col-sm-3" style="padding-left: 0px;">
<input hidden class="reply-comment-id" value="23">
<input class="form-control btn-xs add-reply" type="submit" name="reply" value="REPLY">
</div>
</div>
</form>
</div>
<div class="comment-replies">
<!--replies-->
<?php $this->get_replies($comment['comment_id']); ?>
</div>
jQuery code for the button.
$('.add-reply').on('click', function (e) {
e.preventDefault();
var upId = $('#upload-id').val();
var usId = $('#user-id').val();
var cId = $(this).prev('input').val();
var the_form = $(this).closest("form");
var textComment = the_form.find('textarea[name="comment"]');
var com = textComment.val();
$.post('add_comment.php',{cid:cId,upId:upId,usId:usId,reply:com},function(data){
the_form.nextUntil('div').prepend(data);
//$('.comment-replies').prepend(data); this append to every div with the current class.
the_form.addClass('hide');
});
});
example on jsfiddle
Here is the code that worked for me.
$('.add-reply').on('click', function (e) {
e.preventDefault();
var upId = $('#upload-id').val();
var usId = $('#user-id').val();
var cId = $(this).prev('input').val();
var the_form = $(this).closest(".myDiv");
var textComment = the_form.find('textarea[name="comment"]');
var com = textComment.val();
//$.post('add_comment.php',{cid:cId,upId:upId,usId:usId,reply:com},function(data){
var data = 'Dummy data';
the_form.next('.comment-replies').prepend(data);
//$('.comment-replies').prepend(data); this append to every div with the current class.
// the_form.addClass('hide');
//});
});
https://jsfiddle.net/bhdk9s28/4/