Select button with jQuery and enable input from a form

Asked

Viewed 454 times

1

Good afternoon, everyone,

I am trying to implement the following solution:

By clicking the button element I want the input field to be enabled.

But by clicking the button nothing happens. Could anyone help me identify what the problem of my code?

index.html

<!DOCTYPE html>

<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pain Free</title>
    <meta name="description" content="Site voltado para manipular doencas de pacientes que utiizando o app do pain free">
    <meta name="Laura" content="">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/menu.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <link rel="stylesheet" href="css/ie.css">
    <![endif]-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="js/responsive-nav.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>      
</head>

<body>
 <section id="profile_doctor">

        <div class="container_profile_doctor">

            <div class="form-row">
                <div class="form-group col-md-6">
                  <img src="doctor.png" alt="avatar doctor" id="avatar_profile_doctor" 
                  class="rounded mx-auto d-block"
                  width="180" height="180"/>
                </div>
            </div>

            <form  action="" method="POST">

              <div class="form-row">
                <div class="form-group col-md-6">
                    <input type="text" name="name" class="form-control" id="doctor_name" disabled="true" placeholder="Nome">
                  </div>
                <button type="submit" class="btn btn-primary" id="btn_edit_profile_doctor">Editar</button>
              </div>

              <div class="form-row">
                  <div class="form-group col-md-6">
                    <input type="text" name="occupation" class="form-control" id="doctor_occupation" disabled="true" placeholder="Profissão">
                  </div>
                  <button type="submit" class="btn btn-primary" id="btn_edit_profile_doctor">Editar</button>
                </div>
           </form>
            </div>


        </section>

<script src="js/fastclick.js"></script>
<script src="js/scroll.js"></script>
<script src="js/fixed-responsive-nav.js"></script>

Code jQuery

<script>
  $(document).ready(function()
  {
    $(':button').click(function()
    {
        var inputText = $('.form-control').attr('disabled',true);
    }
    );
  }
  );
</script>
jquery html5 form

3 answers

3

His JS had some strange things, the first was that where he was .attr('disabled', true) should be .attr('disabled', false).

Then his button era type=submit and should be type=button, and tb when clicking on any of the buttons the two fields were getting editable, and not just the field referring to the nearest button, to fix this I used $(this).parent().find('.form-control') to catch only the input next to button. And your buttons are the same ID, this should always be avoided, do not use the same ID for more than one element, @Victorcarnaval tip 

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" media="screen"
		href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" media="screen"
		href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
	<style>

	</style>
</head>

<body>

	<section id="profile_doctor">

		<div class="container_profile_doctor">

			<div class="form-row">
				<div class="form-group col-md-6">
					<img src="doctor.png" alt="avatar doctor" id="avatar_profile_doctor" class="rounded mx-auto d-block"
						width="180" height="180" />
				</div>
			</div>

			<form action="" method="POST">

				<div class="form-row">
					<div class="form-group col-md-6">
						<input type="text" name="name" class="form-control" id="doctor_name" disabled="true"
							placeholder="Nome">
					</div>
					<button type="button" class="btn btn-primary" id="btn_edit_profile_doctor">Editar</button>
				</div>

				<div class="form-row">
					<div class="form-group col-md-6">
						<input type="text" name="occupation" class="form-control" id="doctor_occupation" disabled="true"
							placeholder="Profissão">
					</div>
					<button type="button" class="btn btn-primary" id="btn_edit_profile_pro">Editar</button>
				</div>
			</form>
		</div>


	</section>

	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

	<script>
		$(document).ready(function () {
			$('button').click(function () {
				$(this).parent().find('.form-control').attr('disabled', false);
			});
		});
	</script>

</body>

</html>

  • The two elements button have the same id.

  • @Victorcarnaval was worth the tip, another error for the list, that I had not noticed rss

  • @Victorcarnaval I edited and put the credits ;)

  • 1

    Boa @hugocsl :)

0

You need to remove the type="submit" of your buttons to avoid sending the form. In addition, it should be false the value for the attribute disabled in your script.

0


Thanks for the personal help, I managed to solve using the following code.

<script>
  $(document).ready(function()
  {
    $(':button').click(function()
    {
       $("input").prop("disabled", false);
    }
    );

    $('#btn_save_doctor').click(function()
        {
          $("input").prop("disabled", true);
        }
      );
  }
  );
</script>
  • 1

    Just keep in mind that using selector by ID types like this $('#btn_save_doctor') like you did, if you have 10 btns, with 10 different Ids you will need 10x more lines of code, something that is at least a bad practice.... think about it...

  • But I only need to enable the fields with one button and disable with another button. But thanks for the tip anyway :)

Browser other questions tagged jquery html5 form

You are not signed in. Login or sign up in order to post.