I have a form that contains gender input in the form of a radio button, but when I try to submit with an empty value, the radio button element doesn't get into the Request object which in the example below the input name is jenis_kelamin. But if jenis_kelamin has a value, then the jenis_kelamin element will be entered into the Request Object.
I need the element in the Request object because if the radio element is empty, there will be an error with the input message required. So, what I'm hoping for is how the radio input gets into the Request object when the value is empty and why this is happening.
Routes
Route::get('/mahasiswas/create', 'MahasiswaController#create')->name('mahasiswas.create');
Route::post('/mahasiswas', 'MahasiswaController#store')->name('mahasiswas.store');
Controller
public function create(){
return view('form-pendaftaran');
}
public function store(Request $request){
dump($request);
}
View
<form action="{{route('mahasiswas.store')}}" method="post">
#csrf
<div class="form-group">
<label>Jenis Kelamin</label>
<input type="radio" name="jenis_kelamin" id="laki-laki" value="L">
<label for="laki-laki">Laki-laki</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Daftar</button>
</form>
Radio Input if the value is null
Radio Input if there a value
Notes : I'm using Laravel 7
You can solve it by putting a hidden input with the same name before the radio inputs
<form action="{{route('mahasiswas.store')}}" method="post">
#csrf
<div class="form-group">
<label>Jenis Kelamin</label>
<input type="hidden" name="jenis_kelamin" value="" />
<input type="radio" name="jenis_kelamin" id="laki-laki" value="L">
<label for="laki-laki">Laki-laki</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Daftar</button>
</form>
If the user checks the radio input, then it will override the hidden input you set.
PS: The same fix applies for checkboxes too
PPS: Probably the fix written in the comments works too, but this one works regardless of the framework used
PPPS: This fix may become a problem if a query selection by the name attribute is done, but the developer must be aware of that.
Related
I have a text form that uses a radio button of two options. For example, the 'exact match' is checked by default. However, whenever the 'submit' is clicked, the option reverts back to the default section, which is undesired. I want to retain the radio option currently selected by users, not the default one.
<form class="search" action="{{ url_for('nlp.wbkg') }}" method="post">
<input name="query" type="text" id="query" value="{{query}}" autocomplete="on" required>
<button type="submit"><i class="fa fa-search"></i></button>
<div>
</div>
<div>
<input type="radio" name="options" id="exact" value="exact" checked="checked"> Exact match </input>
<input type="radio" name="options" id="fuzzy" value="fuzzy"> Fuzzy Match </input>
</div>
</form>
How to achieve that effect?
EDIT: add my server-side code in flask:
#bp.route('/wbkg', methods=('GET', 'POST'))
def wbkg():
if request.method == 'POST':
query = request.form['query']
search_type = request.form['options']
results, terms = search(query, search_type)
return render_template('nlp/wbkg.html', items=results, terms=terms, query=query)
flash(error)
return render_template('nlp/wbkg.html')
How to handle it in server side?
Since you are wrapping your element in a form tag you should be sure to have your submit handler run event.preventDefault() to prevent the resetting of the form after the submit is fired. You may be witnessing the reset of the form after the API call was sent. You can confirm this by looking at your REQ body to see if the data sent is correct.
I have a form as follows:
<form name="dummyform" id="dummyform">
<input type="text" name="dummyname">
<input type="submit" name="save_as_draft" id`="save_as_draft">
<input type="submit" name="send" id="send" hidden>
<button name="Dummysend" id="Dummysend">SEND DUMMY</button>
</form>
I want to trigger only the button with id send automatically when I click on the button with id Dummysend. I can do this by doing this JavaScript code:
document.getElementById("dummyform").submit();
The problem is that there are two submit buttons in this form. How can I only trigger the submit button with id send?
By input name, ID, context...
For example:
document.getElementById("send").click();
Watch out for your HTML too it has some syntax errors:
The 'action' attribute is required for elements.
'id`' is not a valid attribute of the element.
I have a radio button group on my page which is within a form. When the form is submitted, I would like to retrieve the values of the form and save them to my database. It seems that the value for the radio button group is radiobtngrp: 'on' but I don't know which one of the radio buttons is on. How do radio buttons work on the submit of a form?
Here is my HTML code for the radio buttons:
<label for="q-<%= question.id %>">
<input id="q-<%= question.id %>-r-i" type="radio" class="form-control" name="radiobtn">
<img src="/images/a.png">
</label>
I have multiple radio buttons which are added through a loop in my ejs file.
My submit button looks like this:
<button class="btn btn-lg btn-signin btn-yellow" type="submit">Submit</button>
Now in my route, if I try something like this:
console.log(req.body.radiobtn);
I see this in the console:
radiobtn: 'on'
Why is this? And how can I get the actual radio button which was clicked?
Thanks in advance!
Give each radio button in a group both name and value attributes.
The name attribute value is used as the key when submitting a form, with the value of the key taken from the value attribute of the selected radio button.
All buttons in the same group share the same name attribute value.
Here a quick HTML demo: it's not supposed to do anything except show the query string in the location bar when you hit submit:
<form method="get">
<input type="radio" name="myRadio" value="1">( value 1)<br>
<input type="radio" name="myRadio" value="2">( value 2)<br>
<input type="radio" name="myRadio" value="3">( value 3)<br>
<input type="submit" value="submit">
</form>
The default value of the value attribute is the string "on". Hence "on" is sent as the value of the radio group named "radiobtn" when the selected button is missing a value attribute. (Ref. HTML standard)
When I submit form by using below function it is submitting but values are not passed through this function. I use all functions but nothing found:
document.getElementById("postad").submit();
Form is given below.
<form action="register.php" id="postad" method="post">
<input class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
<input class="button" type="button" name="save" value="Publish" onclick="send();" />
</form>
Your form contains two form controls. Neither will be a successful control (i.e. one that appears in the submitted data), but for different reasons.
Only form controls with name attributes can be successful. Your text input doesn't have a name. (It also doesn't have a default value, so you need to type in it first).
Buttons can only be successful if they are the submit button used to submit the form. Your button isn't a submit button and you use JavaScript to submit the form.
There is no name attribute in your input text fields
<input name="post_title" class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
.........^
Ive got a html form with a few select lists and a text box in it. I also have a submit button which is outside of the form. The reason for this is I want to construct the parameters myself, as I dont want the content of all of the select lists. The problem I am having is, that when I press my submit button,The form automaticly trys to redirect to the same page, but with a ? at the end with all the contents of the form. I am also having problems where window.location.href is not working inside the submit() javascript method, but I am not sure if this is caused by the form issue or not. Example code:
<form>
<input name="cName" type="text" class="input-xlarge" id="input01" placeholder=
"Enter title" />
<div class="control-group">
<hr />
<label class="control-label" for="select01">Select box 1</label>
<div class="controls">
<select id="select01" name="type" onChange="reportModification(this.value)">
<option>One</option>
</select>
</div>
</div>
</form>
<button class="btn btn-primary" onClick="next()">Next</button>
This is not the exact code from the page, just a replica.So it might not be valid html in some places. Thanks for the help :)
The reason you get parameters in the url is that a get request is used instead of a post request. you should use:
<form method="POST" action="">
Also why is your button outside the form? you could have this instead:
</div>
<input class="btn btn-primary" type="submit" value="Next" onClick="next()" />
</form>
I think your button has to be inside the form element. You could use an onsubmit in the form element to intercept the form before it gets sent to the server. Here you could manipulate the values before they go. You would also need an action attribute in the form. If your function returns true, the data will be submitted, false and it won't.