How to retain use selected option in radio buttons? - javascript

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.

Related

Form Input Radio Doesn't Go To The Request Object Laravel

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.

How to get not focusable input form control by jQuery

<form action="" method="post" enctype="multipart/form-data">
<label class="btn btn-theme">
<input type="file" name="file" value="" style="display:none;" required=""> click Me to choose file
</label>
<label class="btn btn-success">
<input type="checkbox" name="checkbox" value="yes" style="display:none;" required=""> Are You agree ?
</label>
<br>
<input type="submit" name="" value="Submit">
</form>
i want to show alert whenever user haven't selected any file or not agree and press Submit button in my given code.
right now it giving "An invalid form control with name='file' is not focusable."
I know the reason behind it but how can i alert my user that you have not selected anything.
I do not like to use Jquery Submit or show them choose file icon.
Is there any way to get that element (with help of jQuery) on which browser trying to focus ?
This other issue seems to be similar. Can you add novalidate attribute to your form? This is seen here: An invalid form control with name='' is not focusable
JQuery has a focus method that should do what you want.
Create a variable somewhere that will keep track of whether the user has clicked on an input.
var inputFocusOccured = false;
Then use the focus method to change the variable whenever a user clicks or touches an input.
$("input").focus(function(){
inputFocusOccured = true;
});
Then when the user clicks submit have it check if the value is true or false
$("#SubmitBtn").click(function() {
if(inputFocusOccured === false){
alert( "Handler for .click() called." );
}
});

HTML Submit buttons on forms reload but not lose data

Lets say I have this: http://jsfiddle.net/oh0omatq/2/
<form>
<input placeholder="my value">Country
<button name="subject" type="submit" value="england">England</button>
<button name="subject" type="submit" value="wales">Wales</button>
<br />Your country is: Wales
<input type="submit">
</form>
Can I use this submit buttons for england and wales to set a value within the form, and reload the form, but also not loose the information already entered in the form, such as in the input box.
This above is just a preview, but I want to be able to reload and filter the input elements in the form depending on the button the user clicked, but also not loose any previously entered data in the fields.
I would recommend using javascript for this. I've edited your fiddle to use an onclick function.
<form>
<input placeholder="my value">
Country
<button name="subject" value="england" type="button" onclick="document.getElementById('value').innerHTML = this.value">England</button>
<button name="subject" value="wales" type="button" onclick="document.getElementById('value').innerHTML = this.value">Wales</button><br />
Your country is: <span id="value">Wales</span>
<input type="submit">
</form>
Changing the buttons to a type="button" so they don't submit the form allows the javascript to edit the value. Ofcourse you can make an input out of the span, allowing the chosen value to be sent with the form. Ofcourse, a select box would work as well then.
Would that do what you want?
You can see the edited fiddle here.
Keep in mind, this is a quick sketch. It is not recommended to use javascript inline.

Submit button values not being passed with Ajax

I have the following ajax code which submits name/email/message parameters to "messageaction.cfm" template and displays those same 3 parameters on original submission page (works fine):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
function submitForm() {
$.ajax({type:'POST', url:'messageaction.cfm', data:$('#ContactForm').serialize(), success: function(response) {
$('#ContactForm').find('.form_result').html(response);
}});
return false;
}
</script>
<form id="ContactForm" onsubmit="return submitForm();">
Name: <input type="text" name="name" value=""><br>
Email: <input type="text" name="email" value=""><br>
Message:<br> <textarea style="width: 200px; height: 100px;" name="message"></textarea>
<br>
<input type="submit" name="Choice" id="Choice" value="One">
<input type="submit" name="Choice" id="Choice" value="Two">
<div class="form_result"></div>
</form>
However, I have 2 submit buttons (corresponding values of "One" and "Two") and would like to be able to detect which one was pressed. In a normal submit form (without ajax), the variable "Choice" is diplayed correctly with the corresponding "One" or "Two" depending on which button I clicked. But in the ajax form, the "Choice" variable only displays the same "0" (default value) regardless of which button I press.
I have tried 2 other ajax form variations but cannot seem to pass the value of the input submit button value. There must be something really basic I'm doing wrong but have tried just about everything I can think of. Any suggestions would be highly appreciated!
Since id is unique and name attribute should be unique in the same form as well, you should change:
<input type="submit" name="Choice" id="Choice" value="One">
<input type="submit" name="Choice" id="Choice" value="Two">
to:
<input type="submit" name="ChoiceOne" id="ChoiceOne" value="One">
<input type="submit" name="ChoiceTwo" id="ChoiceTwo" value="Two">
and try again with your AJAX code. Make sure you target it properly this time :)
At the time of the submit event, jQuery.serialize() does not know which button was clicked, so it is likely skipping those buttons when generating the form data.
You'll have to process the click events for each button as well and manually pass the button value.
An alternative would be to set a hidden form field value when the user clicks a button since a button click event will get processed before the form submit.

html form trying to http get when a button is pressed

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.

Categories

Resources