For the following simple Alpine.js switch component:
<div x-data="{on : true}">
<form action="https://jsonplaceholder.typicode.com/todos/1">
Enabled : <span x-text="on ? '[$]' : '[ ]'" #click="on = !on" name="enabled"></span><br>
<input type="submit" value="Submit" />
</form>
</div>
When on = true, how to make the form submit "https://jsonplaceholder.typicode.com/todos/1?enabled=on"?
You could embed a hidden input
<div x-data="{on : true}">
<form action="https://jsonplaceholder.typicode.com/todos/1">
Enabled : <span x-text="on ? '[$]' : '[ ]'" #click="on = !on" >
<template x-if="on">
<input type="hidden" name="enabled" value="on">
</template>
</span><br>
<input type="submit" value="Submit" />
</form>
</div>
Related
The problem is to redirect URL for submit button in Codeigniter. I want to fetch data from the database by submitting a query in the form and can't do it as there is a redirection problem.
this is a xampp server.
WELCOMe
<!-- <form action="submit.php" > -->
<form action="submit.php" id="#form" name="#form" >
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="s_id">Student ID:</label>
<input type="int" class="form-control" id="s_id" placeholder="Student ID" name="s_id" >
</div>
<div class="form-group">
<label for="s_name">Student Name:</label>
<input type="int" class="form-control" id="s_name" placeholder="Student Name" name="s_name" >
</div>
<div class="form-group">
<label for="training">Training:</label>
<input type="int" class="form-control" id="training" placeholder="Training" name="training" >
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="int" class="form-control" id="phone" placeholder="Phone" name="phone" >
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<!-- <input type="submit" calss="form-control btn btn-success" value="Search" name="submitbtn"> -->
<input id='btn' name="submitbtn" type='submit' value='Submit'>
</div>
</div>
</form>
Expected: I want to fetch data from the database by submitting a query in the form and can't do it as there is a redirection problem.
Actual:
404 Page Not Found
The page you requested was not found.
I think you have to use AJAX
<script>
function submitForms(){
//getting values from your form
formData = $("#Form").serialize();
$.ajax({
type:"POST",
url:"<?php echo base_url(); ?>super/user/add",
data:formData ,
success:function(data) {
//response
}
}
});
event.preventDefault();
};
</script>`
In your form
<form method="post" id="Form" name="Form" action="javascript:submitForms();">
i started work with Neabular and i'm struggling with the documentation…
I've created a nebular popover with a form and i would like to close it when the form is validated and don't close it when the form is not validated. How can i do this ?
Here is the code :
<button [nbPopover]="addMenunItem" nbButton status="success">AJOUTER</button>
<ng-template #addMenunItem>
<div class="p-4">
<div class="w-100 pb-4">
<h5>Créer un menu</h5>
</div>
<form [formGroup]="createMenuForm" (ngSubmit)="onSubmit()" novalidate>
<div class="form-group">
<input type="text" placeholder="Titre" formControlName="title" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.title.errors }">
<div *ngIf="submitted && f.title.errors" class="invalid-feedback">
<div *ngIf="f.title.errors.required">Le titre est obligatoire</div>
</div>
</div>
<div class="form-group">
<nb-checkbox id="private" class="private"></nb-checkbox>
<label for="private">Privé</label>
</div>
<button type="submit" [disabled]="loading" class="btn btn-success w-100">Enregistrer</button>
</form>
</div>
</ng-template>
For one popover (source):
#ViewChild(NbPopoverDirective) popover;
[…]
this.popover.hide();
For multiple:
#ViewChildren(NbPopoverDirective) popovers: QueryList<NbPopoverDirective>;
[…]
this.popovers.forEach(pop => {
pop.hide();
});
Found it :
#ViewChild(NbPopoverDirective) popover;
[…]
this.popover.hide();
an interrogation remains : what if there are multiple popover in a component… ?
i want to set value and retrieved value in the checkbox field when submitting a value from another form hidden filed.
<form action="store" method="post">
<div class="form-group">
<div class="row">
<label class="control-label col-lg-3"><b>Enable/Disable App</b>
</label>
<label class="Sg-switch">
<input type="checkbox" name="is_active" value="<?php $_POST['enable']; ?>"<?php if (isset($setting['is_active'])==1) { ?> checked="checked" <?php } ?>><span class="Sg-slider round"></span>
</label>
</div>
<div class="clearfix"></div>
<div class="form-group">
<button type="submit" class="sg-main-btn sg-primary-tn">Save</button>
My submit form is:-
<div class="modal-body">
<form class="form-horizontal" method="post" action="#" name="enable">
<div class="modal-footer" style="text-align:center;">
<input type="text" name="is_active" value="1" hidden>
<button type="submit" name="enable" class="sg-main-btn sg-success-btn dis_btn"><i class="fa fa-check"></i><i class="fa fa-spin fa-spinner" style="display: none;"></i>Yes</button>
<i class="fa fa-times"></i>No
</div>
</form>
you can use jquery.
Give your input id like id = "input".
<input type="text" name="is_active" value="1" hidden id = 'input'>
<input type="checkbox" id="input_new" name="is_active" value="<?php $_POST['enable']; ?>"<?php if (isset($setting['is_active'])==1) { ?> checked="checked" <?php } ?>>
<span class="Sg-slider round"></span>
<button id="button1">also add yourclass and type etc</button>
$('#button1').click( function() {
var active = $('#input').val();
if(active == 1){
$('#input_new').attr('checked');
}});
I'm trying to edit some database record based on an ID that I'm saving into a button value.
#foreach ($employment as $empl)
<button data-toggle="modal" data-target="#edit-empl" href="#edit-empl" class="btn btn-default editbtn-modal" value="{{ $empl->id }}" type="button" name="editbtn">Edit</button>
<h3 class="profile-subtitle">{{ $empl->company }}</h3>
<p class="profile-text subtitle-desc">{{ $empl->parseDate($empl->from) }} - {{ $empl->parseDate($empl->to) }}</p>
#endforeach
As you can see here, I have an edit button with an id attached.
When I click edit I open a modal window to edit the fields and later on submit the form.
The thing is, I'm not sure how to get that id from the button into the modal window so I can compare the values and display the correct fields..
<form class="app-form" action="/profile/employment/edit/{id}" method="POST">
{{ csrf_field() }}
<input class="editID" type="hidden" name="editID" value="">
#foreach ($employment as $empl)
#if ($empl->id == buttonidhere)
<div class="form-group">
<label for="company">Company:</label>
<input type="text" name="company" value="{{ $empl->company }}">
</div>
<div class="form-group">
<label for="month">From:</label>
<input type="date" name="from" value="{{ $empl->from }}">
</div>
<div class="form-group">
<label for="to">To:</label>
<input type="date" name="to" value="{{ $empl->to }}">
</div>
#endif
#endforeach
<div class="row">
<div class="col-sm-6">
<input type="submit" class="btn btn-primary profile-form-btn" value="Save Changes">
</div>
</div>
</form>
I was able to pass the button value into the modal using javascript.. I put it into a hidden input but that doesn't help me at all because I can't get the input value in order to compare the values..
Solution 1: Using ajax
Step 1: Create a route in laravel which will return a JSON object containing employing data of requested employee.
For e.g,
/profile/employment/data/{empl_id}
Will get you employement data of id empl_id.
Step 2: Change your form as below
<form class="app-form" action="/profile/employment/edit/{id}" method="POST">
<input class="editID" type="hidden" name="editID" value="">
<div class="form-group">
<label for="company">Company:</label>
<input type="text" name="company" value="">
</div>
<div class="form-group">
<label for="month">From:</label>
<input type="date" name="from" value="">
</div>
<div class="form-group">
<label for="to">To:</label>
<input type="date" name="to" value="">
</div>
<div class="row">
<div class="col-sm-6">
<input type="submit" class="btn btn-primary profile-form-btn" value="Save Changes">
</div>
</div>
</form>
Step 3: Use javascript(jQuery) to get the data using ajax and load it into the form in modal.
jQuery code:
$(document).on("click", ".editbtn-modal", function() {
var id = $(this).val();
url = "/profile/employment/data/"+id;
$.ajax({
url: url,
method: "get"
}).done(function(response) {
//Setting input values
$("input[name='editID']").val(id);
$("input[name='company']").val(response.company);
$("input[name='to']").val(response.to);
$("input[name='from']").val(response.from);
//Setting submit url
$("modal-form").attr("action","/profile/employment/edit/"+id)
});
});
Solution 2: Using remote modal
Step 1:
Create another blade file for eg. editEmployee.blade.php and add the above form in it.
<form class="app-form" id="modal-form" action="/profile/employment/edit/{{ $empl->id }}" method="POST">
{{ csrf_field() }}
<input class="editID" type="hidden" name="editID" value="{{ $empl->id }}">
<div class="form-group">
<label for="company">Company:</label>
<input type="text" name="company" value="{{ $empl->company }}">
</div>
<div class="form-group">
<label for="month">From:</label>
<input type="date" name="from" value="{{ $empl->from }}">
</div>
<div class="form-group">
<label for="to">To:</label>
<input type="date" name="to" value="{{ $empl->to }}">
</div>
<div class="row">
<div class="col-sm-6">
<input type="submit" class="btn btn-primary profile-form-btn" value="Save Changes">
</div>
</div>
</form>
Step 2: Create a controller which would return the above form as HTML.
Tip: use render() function. example
Step 3: load the form into modal window before showing using javascript(jQuery)
considering your modal id is "emp-modal"
$(document).on("click", ".editbtn-modal", function() {
var id = $(this).val();
url = "/profile/employment/data/"+id;
$('#emp-modal').modal('show').find('.modal-body').load(url);
});
One solution would be to send the details you want the same way you send the id to the modal.
and the proper way to send variables to modal is to include this in the button that opens modal:
data-variablename="{{$your-variable}}"
use this jQuery to get the values of your variables to modal. where edit-empl is the id of your modal and data-target of your button
$('#edit-empl').on('show.bs.modal',function (e) {
var variablename= $(e.relatedTarget).data('variablename');
$(e.currentTarget).find('input[id="yourinputID"]').val(variablename);
I want to fill this form, but i dont know how to do it since it only have a classname.
All the examples i saw have an id or a name, to fill the form and submit it, please help.
<form class="header_form" method="post" action="">
<div class="lgn-items">
<div class="login_item">
<label>Email</label>
<input type="text" name="email" tabindex="1" class="inputtext" id="email" />
</div>
<div class="login_item" >
<label>Password</label>
<input type="password" name="password" tabindex="2" class="inputtext" id="pass" />
</div>
<div class="lgn-add">
Registration <span>|</span>
Forgot your password ?
<div class="rembo">
<input type="checkbox" name="remember" value="1" /> Remember me
</div>
</div>
</div>
<div class="login_item lgn-btn" >
<input type="submit" name="login_button" value="Login" tabindex="3" class="login" />
</div>
</form>
You can access to your form using any selector. In your case you to it like this.
casper.then(function () {
casper.fill('form.header_form', {
/** Your parameters here **/
}, true);
});