Home > front end >  How can I replace placeholder and value attribute values with jQuery?
How can I replace placeholder and value attribute values with jQuery?

Time:11-26

I would like to replace Your Email Address (to "Write email") and Subscribe (to "Send") text under div id mynwsltr in form. Any idea how to do it please with jQuery?

<div  style="padding-bottom: 0px ;" id="mynwsltr">
  <div >
    <form  method="post" action="/?na=s" onsubmit="return newsletter_check(this)">
      <div >
        <input  placeholder="Your Email Address" type="email" name="ne" size="30" required />
      </div>
      
      <div >
        <input  type="submit" value="Subscribe" />
      </div>
    </form>
  </div>

CodePudding user response:

Use a Jquery selector to find the elements by the content of the data- attribute. Then use attr() to alter the value

$('input[placeholder = "Your Email Address"]').attr('placeholder', 'Write email');
$('input[value = "Subscribe"]').attr('value', 'Send');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  style="padding-bottom: 0px ;"  id="mynwsltr"  >
<div >
   <form  method="post" action="/?na=s" onsubmit="return newsletter_check(this)">
      <div ><input  placeholder="Your Email Address" type="email" name="ne" size="30" required /></div>
      <div ><input  type="submit" value="Subscribe"  /></div>
   </form>
</div>


This can be re-written as plain Javascript using:

A querySelector instead off $()

setAttribute() instead off Jquery's attr()

document.querySelector('input[placeholder = "Your Email Address"]').setAttribute('placeholder', 'Write email');
document.querySelector('input[value = "Subscribe"]').setAttribute('value', 'Send');
<div  style="padding-bottom: 0px ;"  id="mynwsltr"  >
<div >
   <form  method="post" action="/?na=s" onsubmit="return newsletter_check(this)">
      <div ><input  placeholder="Your Email Address" type="email" name="ne" size="30" required /></div>
      <div ><input  type="submit" value="Subscribe"  /></div>
   </form>
</div>

  • Related