I have a problem submitting a form in laravel 7. I can explain the situation:
My form label is
<form action="/boards/{{$data->id}}/send"
id="submit_form_all"
method="post" enctype=multipart/form-data>
#csrf
And inside the form, I have 3 div (It is a tab pane, I have done it with materializeCSS):
<div id="configPrincipalipal" class="col s12 ">
...
</div>
<div id="controAcceso" class="col s12 controAccesoDiv">
...
</div>
<div id="agendaConf" class="col s12 agendaConfDiv " style="margin-bottom:10%">
...
</div>
And after that, I have 2 buttons:
<button class="btn waves-effect waves-light offset-s6 red" href="#" name="action">
{{Lang ::get('agendaContactos.backButt')}}
<i class="material-icons left">arrow_back</i>
</button>
<button onclick="submit_form()" class="btn waves-effect waves-light offset-s6 blue" name="action" >
{{Lang ::get('agendaContactos.subButt')}}
<i class="material-icons right">send</i>
</button>
I tried with input type="submit" / button type="submit" and this example is with a function submit_form() ->
function submit_form() {
console.log("sending");
$("#submit_form_all").submit();
}
I can see the sending text, so the button arrives to the function.
If I put the button just after the 1st div with id configPrincipal, then I arrive to controller, but if I put the button after that (for example 1 line after opening the second div), the form is not submitted and it do not anything, I got no response on the console either.
This is an image of the website:
Related
Im trying to fix a strange error with my code with the Bootstrap 4 Modal code. I've simply just copied and pasted the code from here: https://getbootstrap.com/docs/4.0/components/modal/#events
This is for an automotive website and Im trying to pass stock and VIN via the data attribute as requested. The question is how this works with a foreach loop. It works on a single Wordpress page or post but won't pull the data from each section of the loop.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-stock="<?php echo $vehicle['stock_number'];?>">Check Availability</button>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Stock</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
And my Jquery code
(function($) {
$('#exampleModal').on('modal.fade.show', function (event) {
alert( "clicked" );
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('stock') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use $ here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})})( jQuery );```
Functionality wise this works, just not within the dynamic pages that are being generated in the foreach loop. The buttons have the proper data-attribute applied but the data doesn't seem to pass to the modal from the loop. I have a development page up where you can take a live look here, the button in question is the "Check Availability" http://windsor.sixomedia.ca/inventory/New/
Try this
var recipient = button.data('data-stock');
Hope that helps.
My submit button suddenly stopped working. It submits data into a MySQL database.
While I was doing some design changes, it suddenly stopped working.
Are there any apparent errors/mistakes in the code below?
I'm a noob who's currently trying to learn some PHP and so on, so any help would be much appreciated. :)
<section id="moviesearch">
<!-- Section -->
<div class="subcribe2">
<div class="container">
<!-- Container -->
<div class="row">
<!-- Row -->
<div class="col-md-4">
</div>
<body ng-app="myApp">
<div ng-controller="MyCtrl" class="col-md-4">
<form class="form-watch-list-create">
<input required="required" placeholder="Movie title" type="text" class="form-control" typeahead="item.Title for item in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-min-length="2" typeahead-wait-ms="1000" typeahead-on-select="onSelected($item)"
typeahead-template-url="customTemplate.html" ng-model="asyncSelected">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-block btn-sm btn-dark">Add to watchlist</button>
</div>
</body>
</div>
<!-- End Row -->
</div>
<!-- End Container -->
</div>
<script type="text/ng-template" id="customTemplate.html">
<a>
<span bind-html-unsafe="match.label | typeaheadHighlight:query" style="width: auto;"></span>
({{match.model.Year}})
<!-- <img ng-src="{{match.model.Poster}}" width="120"> -->
</a>
</script>
<div ng-controller="MyCtrl">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
</div>
</section>
Edit
Here's the code that sends data into the MYSQL database:
function addWatchList() {
if (isset($_GET['addtowatchlist'])) {
$name = $_GET['name'];
$conn = dbmysql();
$query ="INSERT INTO watch_list values(null,'{$name}','{$_SESSION['user_id']}','NOW()')";
if (mysqli_query($conn,$query)) {
$last = "SELECT * FROM watch_list WHERE created_by = '{$_SESSION['user_id']}' order by id desc limit 1";
$data = mysqli_query($conn,$last);
while ($row = mysqli_fetch_assoc($data)) {
include "_view.php";
}
}else {
echo "An error occurred. Please try again.";
}
exit;
}
}
I am looking to your code, missing attribute action="somefile.php" and method="get" if you are planning on submitting it using the form, you should put it or if you are planning on submitting your code using javascript you can use <form onsubmit="myFunction()"> That is what you are missing. I am not seeing you addtowatchlist name from your input so that php can catch it to your isset.
The submit button isn't inside the form.
You're missing the </form> tag to end the <form>. But you have </div> that matches the <div> just before </form>, so it's implicitly closing the <form> tag as well. Then you have <input type="submit"> after it. Since the submit button isn't inside the form, and has no form tag associating it with the form, it doesn't know which form it should submit when you click on it.
Try this:
<form class="form-watch-list-create">
<div ng-controller="MyCtrl" class="col-md-4">
<input
required="required"
placeholder="Movie title"
type="text"
class="form-control"
typeahead="item.Title for item in getLocation($viewValue)"
typeahead-loading="loadingLocations"
typeahead-min-length="2"
typeahead-wait-ms="1000"
typeahead-on-select="onSelected($item)"
typeahead-template-url="customTemplate.html"
ng-model="asyncSelected">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-block btn-sm btn-dark">Add to watchlist</button>
</div>
</form>
This puts the form around both columns.
Use the method attribute in form tag and end the form tag properly
<form role="form" method="get" class="form-watch-list-create">
<div ng-controller="MyCtrl" class="col-md-4">
<input
required="required"
placeholder="Movie title"
type="text"
class="form-control"
typeahead="item.Title for item in getLocation($viewValue)"
typeahead-loading="loadingLocations"
typeahead-min-length="2"
typeahead-wait-ms="1000"
typeahead-on-select="onSelected($item)"
typeahead-template-url="customTemplate.html"
ng-model="asyncSelected">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-block btn-sm btn-dark">Add to watchlist</button>
</div>
</form>
I have a button and I am trying to pass value to a model.Inside button I have name="className" value="CPS210-CompSci-I (4)" button is type submit.
<button type="submit" data-toggle="modal" data-target="#myModal"
class="btn btn-info btn-md" name="className" value="CPS210-CompSci-I (4)">
<span class="glyphicon glyphicon-comment"></span> Comment
</button>
I have a model. Inside model I have php $className =$POST['className'];
echo "$className";
<div ng-app class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><?php echo "Note for $firstname $lastname" ?></h4>
</div>
<div class="modal-body">
<div class="form-group">
<textarea class="form-control" ng-model="note"
placeholder="Here you can write a a note for the student. " id="message"
required data-validation-required-message="Please enter a Goal"></textarea>
<p class="help-block text-danger"></p>
<label class="light">
</div>
<hr>
<?php $className = $_POST['className'];
echo "$className";
?>
<h4>Note Regarding:{{note}} </h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Variables are only added to the $_POST array after a form has been submitted. You're page must "refresh" before the array is filled. When the modal triggers and opens a new modal box on the scree, this is not considered a page refresh, therefore the value of the button you clicked is not added to the array.
You either need to put your button inside a form tag, which will trigger the modal to open when the page "refreshes" and the value in that key exists. This would be annoying and defeat the whole purpose of bootstrap modals.
You're other, more likely option, is to use javascript to move the value in the button to the spot in the modal when the button is clicked.
$('button[name="className"]').click(function(){
var className = $(this).val();
$('#class-name').html(className);
});
And edit your modal where you want the class name to this:
<hr>
<p id="class-name"></p>
<h4>Note Regarding:{{note}} </h4>
I am making a Modal Form that pops up on Click of a button and opens up a input field.
On Save it pushes the values to webpage URL that it is poping up from.
I am trying to capture that value and update on the database.
Which is happening perfectly fine.
But I want to refresh the page as the URL still holds the value for from the Modal form.
<div id="custom-modal" class="modal-demo">
<button type="button" class="close" onclick="Custombox.close()"><span>×</span><span class="sr-only">Close</span></button>
<h4 class="custom-modal-title">Add New Category</h4>
<div class="custom-modal-text text-left">
<form role="form">
<div class="form-group" method="post">
<label for="name">Category Name</label>
<input type="text" class="form-control" id="cat_name" name="cat_name" placeholder="Enter category name">
</div>
<button type="submit" class="btn btn-default waves-effect waves-light" name="btn-savecat" id="btn-savecat">Save</button>
<button type="button" class="btn btn-danger waves-effect waves-light m-l-10">Cancel</button>
<?php
if(isset($_GET['cat_name']))
{
try
{
$id=$_GET['cat_name'];
$result = $DB_con->prepare("INSERT INTO category(cat_name,cat_status)
VALUES(:userid,'Active')");
$result->bindParam(':userid', $id);
$result->execute();
}
catch(PDOException $e)
{
echo $e->getMessage();
}
}
?>
</form>
</div>
I think you should be able to do it with new HTML5. There is an option for rewriting url without reloading the page. You cannot however change the domain name for security reasons. Look up history api.
I think it would be something like the following:
history.replaceState("object or string", "title", "/another-new-url");
Check this one out.
<input type="button" class="btn btn-primary btn-lg btn-block" value="(AAP)" data-toggle="modal" href="#teklif{$foo}">
I want to send foo value.
foo == number
like 0,1,2..
<div id="teklif" class="chat_modal modal fade hide">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<section class="welly form_align">
<br/>
<br/>
<span id="status"> {$foo}</span>
<br/>
</section>
</div>
<div class="modal-footer">
<span id="statusteklifc"></span>
</div>
</div>
How to send value to modal ? and i sended value smarty variable.
i want to equal value:
<span id="status"> {$foo} == 2</span>
i wan to make it.
modal is simply part of your DOM so You can change it simply:
$('#status').html(any_variable);
But You need add some information when do You want to send this value.
If You want to read value from button when modal is displayed You can:
$('#teklif').on('shown.bs.modal', function (e) {
$('#status').html($('#button_ID').html());
});