We Keep Coding

Reset for form not working after search has been done

I am trying to reset the form to blank values in the input textboxes after the data filled in the textbox have been searched.
<form id="myForm" class="mt-5" asp-controller="Leave" asp-action="GetAllLeaves">
<div class="form group col-md-6">
<label>Employee </label>
<div class="col">
<input type="hidden" id="employeeId" name="employeeId" />
<input type="text" name="employeeName" id="employeeName" value="#ViewData["CurrentFilterE"]" />
</div>
</div>
<button type="submit" class="btn btn-outline-success">Search</button>
<button type="reset" id="reset" class="btn btn-outline-primary">Reset</button>
</form>
I have tried bunch of different javascripts but none of them work after the search has been completed. They work fine before the search button is clicked. I am aware that there are questions already asked about this here and I have tried those codes but they don't work for me.
These are the different codes that I have tried. They don't work after the search button has been hit. Even refreshing the page does not delete the data in the input boxes.
function myFunction() {
document.getElementById("myForm")[0].reset();
};
$("#reset").click(function () {
$(this).closest('form').find("input[type=text], textarea").val("");
});
document.getElementById("reset").onclick = () => {
document.getElementById("myForm").reset()
};
let inputs = document.querySelectorAll('input');
document.getElementById("reset").onclick = () => {
inputs.forEach(input => input.value ='');
}

in your post method you need to have an IactionResult return type method and then you need to pass property name to ModelState.Remove method, not the value.
Either pass the property name in string, eg. ModelState.Remove("PropertyName"); or in the newer .NET framework, you can use nameof() keyword, eg. ModelState.Remove(nameof(model.Property));

The HTMLFormElement.reset() method restores a form element's default values. This method does the same thing as clicking the form's reset button. If a form control (such as a reset button) has a name or id of reset it will mask the form's reset method. It does not reset other attributes in the input, such as disabled.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset.
Your default input value = "#ViewData["CurrentFilterE"]". Reset method restores a form element's default values.
This will help to reset the input:
html:
<form id="myForm">
<input type="text" name="employeeName" id="employeeName" value="test" />
<button id="reset" class="btn btn-outline-primary">Reset</button>
</form>
js:
document.getElementById("reset").onclick = function(e) {
document.getElementById("employeeName").value = "";
}

I ended up using the following
$("#reset").click(function () {
// this for normal <input> text box
$('#employeeName').attr("value", "");
//this for checkbox
document.getElementById('searchAprroved').removeAttribute('checked');
});

jquery - copy value of input from one form to another (form and input named the same)

I would like to copy the value from an input in one form to the value of an input(with the same name) of the next form down. The forms and inputs are named the same. All it needs to do is copy the value of the title input to the title input one form down.
<form>
<input name="file" value="1.xml">
<input name="title" id="title" value="Smith">
<input type="submit" id="copy-down" value="copy">
</form>
<form>
<input name="file" value="2.xml">
<input name="title" id="title" value="Anderson">
<input type="submit" id="copy-down" value="copy">
</form>
etc...
In this case when the top "copy" button is clicked I would like jquery to overwrite Anderson with Smith.
$('#title').attr('value'));
Gives me Smith but I'm not sure what to do with that value once I have it.

Change HTML to this:
<form>
<input name="file" value="1.xml">
<input name="title" id="title1" value="Smith">
<input type="submit" id="copy-down1" value="copy">
</form>
<form>
<input name="file" value="2.xml">
<input name="title" id="title2" value="Anderson">
<input type="submit" id="copy-down2" value="copy">
</form>
Javascript:
function copyHandler() {
var copyVal = document.getElementById("title1").value;
var replaceInput = document.getElementById("title2");
replaceInput.value = copyVal;
}
document.getElementById("copy-down1").onclick = function(){
copyHandler();
return false;
}
Some notes:
This is so straightforward in vanilla javascript that I didn't add the jQuery code.
You should never assign multiple elements to the same ID, class or name can be used for that purpose.
The return false; portion of the onclick function is necessary so that the form doesn't reload when you click your submit button.
Let me know if you have any questions.

you can try
$(document).ready(function(){
$('form').on('submit', function(e){
e.preventDefault();
var GetNameAttr = $(this).find('input:nth-child(2)').attr('name');
var GetTitleValue = $(this).find('input:nth-child(2)').val();
var NextFormNameAttr = $(this).next('form').find('input:nth-child(2)').attr('name');
if(NextFormNameAttr == GetNameAttr){
$(this).next('form').find('input:nth-child(2)').val(GetTitleValue );
}
});
});
Note: this code will change the second input value in next form with
the second input value of form you click if the name is same .. you
can do the same thing with the first input by using :nth-child(1)
Demo here
if your forms dynamically generated use
$('body').on('submit','form', function(e){
instead of
$('form').on('submit', function(e){
for simple use I create a function for that
function changeNextValue(el , i){
var GetNameAttr1 = el.find('input:nth-child('+ i +')').attr('name');
var GetTitleValue1 = el.find('input:nth-child('+ i +')').val();
var NextFormNameAttr1 = el.next('form').find('input:nth-child('+ i +')').attr('name');
if(NextFormNameAttr1 == GetNameAttr1){
el.next('form').find('input:nth-child('+ i +')').val(GetTitleValue1);
}
}
use it like this
changeNextValue($(this) , nth-child of input 1 or 2);
// for first input
changeNextValue($(this) , 1);
// for second input
changeNextValue($(this) , 2);
Working Demo

Using Json how can I select a radio button based on value in my database?

Hi I have a form that has a button used to prefill my form with data from my database. Using Json It works fine to populate text inputs but how do I get it to select a radio button based on the value returned from my database?
FORM
<form action="#">
<select id="dropdown-select" name="dropdown-select">
<option value="">-- Select One --</option>
</select>
<button id="submit-id">Prefill Form</button>
<input id="txt1" name="txt1" type="text">
<input id="txt2" name="txt2" type="text">
<input type="radio" id="q1" name="q1" value="4.99" />
<input type="radio" id="q1" name="q1" value="7.99" />
<button id="submit-form" name="Submit-form" type="submit">Submit</button>
</form>
SCRIPT
<script>
$(function(){
$('#submit-id').on('click', function(e){ // Things to do when
.......
.done(function(data) {
data = JSON.parse(data);
$('#txt1').val(data.txt1);
$('#txt2').val(data.txt2);
$('#q1').val(data.q1);
});
});
});
</script>
/tst/orders2.php
<?php
// Create the connection to the database
$con=mysqli_connect("xxx","xxx","xxx","xxx");
........
while ($row = mysqli_fetch_assoc($result))
{
echo json_encode($row);
die(); // assuming there is just one row
}
}
?>

Don't use ID because you have same ID of both radio buttons
done(function(data) {
data = JSON.parse(data);
$('#txt1').val(data.txt1);
$('#txt2').val(data.txt2);
// Don't use ID because the name of id is same
// $('#q1').val(data.q1);
var $radios = $('input:radio[name=q1]');
if($radios.is(':checked') === false) {
$radios.filter('[value='+data.q1+']').prop('checked', true);
}
});

You currently have both radio buttons using the same ID. ID's should be unique.
You can use the [name] attribute to do this, or you can set a class on the element. Here is an example:
$('input[name=q1][value="'+ data.q1 +'"]').prop('checked', true);

You can do it based on the value of said input:
instead of
$('#q1').val(data.q1);
Try
$('input:radio[value="' + data.q1 + '"]').click();
On a side note, you have both radios with the same ID, the results of an id based selector are going to vary from browser to browser because an id should be UNIQUE

you can refer the following link to solve your problem. works fine for me
JQuery - how to select dropdown item based on value

How to make a slider bar

Aloha, I'm trying to develop a slider bar that has 3 words that you can choose from. But I'm not able to save the words as letters, all I get is number either 1,2 or 3 :(
Here's the code I have and also a picture:)
<form action="something.php" method="post" id="form">
<input type="range" min=1 max=3 step=1 name="slider">
<div id="text">
<span > Bad </span>
<span> Ok </span>
<span> Good </span>
</div>
<input type="submit" value="next" id="but"/>
</input>
</form>
So this code shows the slider bar and letters at the top (which works with my css), but when I click "Submit", on the following page (using php) I get 1, 2 or 3.
But it should be Bad, Good or Good. I'm sure that the problem is in the HTML code.

Why not just assign the numerals to values when you process the submission?
if(isset($_POST['slider'])) {
$array[1] = 'Bad';
$array[2] = 'Ok';
$array[3] = 'Good';
// This is a simplified output, but this is essentially
// the easiest way
echo $array[$_POST['slider']];
}

There is two manner to do what you want :
1 - html + javascript :
You should add a hidden input in your form which before submitting your form you give it a value among the three : Bad, OK, Good according to the value of your slider.
2 - php :
<?php
$slider_index = intval($_POST['slider']);
$word = '';
switch ($slider_index) {
case 1:
$word = 'Bad';
break;
case 2:
$word = 'OK';
break;
case 3:
$word = 'Good';
break;
}
?>

This is not possible by using html only.
You could create a hidden input field and a "change" event handler on the range input field. The event handler sets the value of the hidden input field to the label corresponding to the selected number (1: bad, 2: ok, 3: good).
Example:
<form action="something.php" method="post" id="form">
<input type="range" min=1 max=3 step=1 name="slider" id="slider">
<input type="hidden" name="sliderLabel" id="sliderLabel" />
<div id="text">
<span > Bad </span>
<span> Ok </span>
<span> Good </span>
</div>
<input type="submit" value="next" id="but" />
</form>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function() {
// function to update the value of the hidden field
updateSliderLabel = function() {
var selectedValue = $('#slider').val();
var selectedLabel = $('#text > span').eq(selectedValue-1).text();
$('#sliderLabel').val(selectedLabel);
}
// when slider is changed, call the update function
$('#slider').on('change', function() {
updateSliderLabel();
});
// when page is loaded, call the update function
updateSliderLabel();
})();
</script>
The advantage of this solution is, you can easily adopt your labels in the html code, you don't need to modify your php logic.

Radio buttons checked changing submit text

My site structure consists on an index.php which is styled by a css file. It then includes the following php code in a separate file:
<?php include("globals.php"); ?>
<form action="<?php echo $website.$relative_string;?>" name="subscribe" onsubmit="javascript:return checkEmail(this);" method="post">
<div id="cell8" class="titlecell2"><h3>Email:</h3></div>
<div id="cell9" class="inputcell2">
<input type="text" class="inputfield2" name="email" value="Your Email..." id="email2" maxlength="255" onfocus="this.value='';">
</div>
<div id="cell10" class="textcell3">
<input name="group" type="hidden" id="group[]" value="<?php echo $group; ?>">
<input name="subscribe" id="sub" type="radio" value="true" checked>
</span>Subscribe </p>
</div>
<div id="cell11" class="buttoncell">
<button type="submit" name="Submit2" value="Join" id="submitButton2">
<span>OK</span>
</button>
</div>
<div id="cell8" class="textcell4">
<input type="radio" name="subscribe" id="unsub" value="false">
</span>Un-Subscribe </p>
</div>
</form>
It appears on screen with no problems in the correct layout as my css style sheet. What I would like this to do is when I select the "Subscribe" radio button the submit button text "OK" changes to "Join". When I click on the Unsubscribe button text "OK" or "Join" changes to "Leave".
I tried to make some code from research:
if(document.getElementById('sub').checked) {
document.write("<span>Join</span>"
}
else if(document.getElementById('unsub').checked) {
document.write("<span>Leave</span>)
}
I think this kind of worked in that it changed to Join (replacing the OK line, but obviously didn't update on clicking unsubscribe. I guess it would update on refreshing the page if my default wasn't join. I guess I need to do some form of onclick but then I have no idea how to adjust that span ok bit.
Please help?
Many thanks Chris

Here is a solution in plain JavaScript without jQuery. It avoids the unnecessary overhead.
This should work, but I haven't had a chance to test it:
var sub = document.getElementById('sub'); // Save element to a variable, so you don't have to look for it again
var unsub = document.getElementById('unsub');
var btn = document.getElementById('submitButton2');
sub.onchange = function() //When sub changes
{
if(sub.checked) //If it's checked
{
btn.innerHTML = "<span>Join</span>"; // Set button to Join
}
else // If not..
{
btn.innerHTML = "<span>OK</span>"; // Set button to OK
}
}
unsub.onchange = function() //When unsub changes
{
if(unsub.checked) //If it's checked
{
btn.innerHTML = "<span>Leave</span>"; // Set button to Leave
}
else // If not..
{
btn.innerHTML = "<span>OK</span>"; // Set button to OK
}
}
However, you should not do it like this.
You should combine the two radio buttons into a radio group.
In that case you will listen for radio group to change, get the value of the radio group, set button text according to the value.

if you label your <span>OK</span> to something like <span id="your_id">OK</span> then added a class to your radio button like this <input class="your_class" type="radio" name="subscribe" id="unsub" value="false"> them...
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#your_class").change(function () {
if ($(this).is(':checked')) {
$("#your_id").text('Join');
}else {
$("#your_id").text('Leave');
}
});
</script>
This was all written in the browser so let me know if there are any problems.