I have a form that use submit button. My submit button always refer to mypages.com/pages/save, but my save function can appear with mypages.com/save. are there any ways to make my submit button refer to /save not /pages/save?
I put this in my route, but not work
$routes->get('/save', 'pages::save');
this is what happend when I try /pages/save
and this what happen when I try /save, its error cause it suppose open when I hit submit button
this is my save function
public function save()
{
$beli = $this->request->getvar('berasbeli');
$this->zakatModel->save(
[
'nama' => $this->request->getVar('nama'),
'alamat' => $this->request->getVar('alamat'),
'telp' => $this->request->getvar('telp'),
'jmlhjiwa' => $this->request->getVar('jmlhjiwa'),
'berasbeli' => $this->request->getVar('berasbeli'),
'ttlbeli' => (int)$beli * 38000,
'berasbawa' => $this->request->getvar('berasbawa'),
'ttlberas' => $this->request->getvar('berasbawa') + $this->request->getVar('berasbeli'),
'maal' => $this->request->getVar('maal'),
'berasinfaq' => $this->request->getVar('berasinfaq'),
'infaq' => $this->request->getvar('infaq'),
'fidyah' => $this->request->getVar('fidyah'),
'penerima' => $this->request->getVar('penerima'),
]
);
session()->setFlashdata('pesan', 'Upload Berhasil');
return redirect()->to('/');
This is the submit button
<button type="submit" class="btn btn-primary">Submit</button>
First make sure that you have added nama allow field into model and 2nd check that you are receiving data into getVar you can use return var_dump($beli); to check which data your are recieved. Cos nama is compulsory field in database.
Your /save url working properly
Related
i have this checkbox in my form
type="checkbox"
value={wpp}
name="wpp"
onChange={(e) => setWpp(e.target.value)}
/>
and i defined like
const [wpp, setWpp] = useState(false);
how do I do when someone selects this checkbox to be sent to my database as true?
In the case of the checkbox you need to watch for the checked property
type="checkbox"
checked={wpp}
name="wpp"
onChange={(e) => setWpp(e.target.checked)}
/>
instead of calling setWpp onChange, you could create a function, in your component, like:
async function fetchRemote(){
let newval = !wpp;
// fetch remote server to send your new value
setWpp(!wpp);
}
It should call your server, sending the opposite of actual "wpp".
Than in your code you should edit your
onChange={() => fetchRemote()}
I have 3 sets of button here, I want to disable 'cancel button' after clicking once, and vice versa.
However when I disable the 'cancel' button from first set, the 'cancel' button from other sets will be disabled too.
In this case I want to disable the 'cancel' button from first set only.
How do I solve this issue or is there any approach to do so.
any help and suggestions will be appreciated
note ** I am using Mapping function to render the buttons
my client side:
function App() {
const [taskNumber, setTaskNumber] = useState('')
const [disable, setDisable] = useState(true)
const onChange = (e) => {
setTaskNumber(e.target.value)
}
const onClick = () => {
console.log('world')
setDisable(!disable)
}
const button = (index) => {
return (
< div >
<button onClick={() => onClick()} disabled={!disable}>hello</button>
<button onClick={() => onClick()} disabled={disable}>cancel</button>
</div >
)
}
let items = []
for (let i = 0; i < taskNumber; i++) {
// items.push(button(i))
items.push(i)
}
<Form>
<Form.Group as={Col}>
<Form.Label>Number of Task</Form.Label>
<Form.Control
type="number"
min='1'
placeholder="Enter number of task"
name='taskNumber'
value={taskNumber}
onChange={onChange}
/>
</Form.Group>
</Form>
{items.map((number) => {
return button(number)
})}
My React user Interface
You were close, you can use an array in disable to control which element is enabled.
*** edit ***
I didn't have access to the form components you were using so I just made a more basic example for you to refer to. See my codesandbox:
https://codesandbox.io/s/prod-fast-0zneb?file=/src/App.js
I am having difficulties in wiring up a custom EditorTemplate to a grid within an MVC 5 application. I have an integer field that only accepts a 1 or 2 as a value. Rather than using a standard numeric text box or slider control, I'd like to wire this up using buttons (via Bootstrap's group buttons). If the user clicks on the first button, the value should be set to 1, otherwise it should be set to 2.
The problem that I'm experiencing is that when the user clicks on the "edit" button, the "Level" value never gets applied to the editor template. The template displays as I'd like, but I cannot figure out how to bind the selected value back to the Kendo grid. When the user clicks on the "save" button on the grid, the controller action is never invoked.
If I replace the editor template with a standard Kendo control such as a numeric text box or Kendo slider, it works fine.
ViewModel
public class LotViewModel
{
public int LotId { get; set; }
[Display(Name = "Level")]
[Range(1, 2)]
[UIHint("LotLevel")]
public int Level { get; set; }
}
View
#(Html.Kendo().Grid<LotViewModel>()
.Name("lotGrid")
.Columns(columns =>
{
columns.Bound(x => x.LotId).Visible(false);
columns.Bound(x => x.Level);
columns.Command(command =>
{
command.Edit();
}).Width(100);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.AutoBind(true)
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(m => m.LotId);
model.Field(m => m.Level).DefaultValue(1);
})
.Read(update => update.Action("GetLots", "Lot"))
.Create(update => update.Action("CreateLot", "Lot"))
.Update(update => update.Action("UpdateLot", "Lot"))
)
)
EditorTemplate: LotLevel
#model int
#{
var levelOne = Model.Equals(1) ? "active btn-primary" : null;
var levelTwo = Model.Equals(2) ? "active btn-primary" : null;
var htmlField = ViewData.TemplateInfo.HtmlFieldPrefix;
}
#Html.HiddenFor(model => model)
<div class="btn-group btn-group-#htmlField">
<button type="button"
class="btn btn-default #levelOne bool-#htmlField"
onclick="javascript: setValue(this, 1);">
Level 1
</button>
<button type="button"
class="btn btn-default #levelTwo bool-#htmlField"
onclick="javascript:setValue(this, 2);">
Level 2
</button>
</div>
<script>
function setValue(button, level) {
$('.btn-group-#htmlField button.active').removeClass('active btn-primary');
$(button).addClass('active btn-primary');
$('##htmlField').val(level); // TODO: Set the value of the model here
}
</script>
It comes down to binding. The editor template is instantiated once (with an empty model object) when the grid is created and then hidden. When you click "Edit" the editor is placed into the DOM, replacing the display row, and the values in the dataSource object are bound to the inputs in the editor template (by name, I think). With standard or kendo inputs this causes the editor to update and display the correct value. With a complex editor (or a complex object) the binding essentially fails and goes no further.
In your case, you can add an event handler to the Grid's edit event that will force the button to update to the input value when the editor is shown.
I have a form with a textfield element which when a user starts typing into I want to pre-populate a different element.
I've been using the #ahah attribute which works fine with the event property set to 'keyup' however I lose focus on the textfield element because the moment the 'keyup' event is fired the whole form is rebuilt due to ahah's behaviour.
I tried setting the event property to 'change' and that works nicely however in order for the 'change' event to fire I need to click away from the textfield - so from UI point of view I cannot expect users to click away from field just to get the results to display.
I'm not sure if it's possible to achieve what I want with AHAH which is fine but I'd like to stick with it if possible.
Happy to provide code if required and sorry if it's not clear, quite difficult to explain.
Thanks
Steve
The whole form shouldn't be re-rendered by the browser. That's precisely the idea AHAH, that you can update just part of a form. Make sure to set the "wrapper" attribute (of the #ahah attribute) to the ID (as in: the HTML attribute) of the DOM element that you want Drupal's JS functionality to update asynchronously.
For example:
<?php
function MYMODULE_some_ahah_enabled_form(&$form_state) {
$initial_markup = '<div>' . t('This content will be replaced') . '</div>';
$form['dynamic_thing'] = array(
'#type' => 'markup',
'#prefix' => '<div id="dynamic-thing">', // Set Drupal's AHAH wrapper to this ID
'#suffix' => '</div>',
'#value' => $initial_markup,
);
$form['field_which_will_trigger_ahah_behavior'] = array(
'#type' => 'textfield',
'#ahah' => array(
'path' => 'MYMODULE/path/to/ahah/callback',
'wrapper' => 'dynamic-thing',
'event' => 'keyup',
),
'#default_value' => 'Change me',
);
return $form;
}
/**
* Your menu callback (which is declared in your hook_menu()) which returns only the HTML that will replace the existing markup in $form['dynamic_thing'].
*/
function MYMODULE_ahah_callback() {
$output = '<div>New content for the dynamic thing</div>';
drupal_json(array('status' => TRUE, 'data' => $output));
exit();
}
Your "field_which_will_trigger_ahah_behavior" DOM element in the browser shouldn't lose focus, or be re-rendered in any way, unless there's something else causing some bug.
I have one button and onclick i want javascript function to be called which contains alert message...............in drupal
i tried many things like...........
1)i created button using
$form['click'] = array(
'#type' => 'button',
'#attributes' => array('onclick' =>_____________),//dnt know what to give for onclick
'#value' => t('click'),
);
2)used drupal_add_js(drupal_get_path('module', 'document').'/eg.js', 'module');in hook_form_alter()
3).js file is as follows
function message()
{
alert("Catch ->This alert box was called");
} -->
want alert message to be displayed on button click.
Kindly help................
Thanks in advance
$form['search_something'] = array(
'#type' => 'button',
'#value' => t('Search'),
'#attributes' => array('onclick' => 'searchsomething()),
);
this is the piece of code to call javascript on button click.
Javascript function
function searchsomething(){
alert("hello");
}