CODEWITHSUNDEEP
javascripthtml
TheDevMan
TheDevMan

Reputation: 5954

Clear individual text box in html

I have a form with the ten text boxes. I have a submit button too. I would like to clear, two text box in row on click of a button in html.

Below is the screen shot:

enter image description here:

CODE:

 <form action="store_number.php" method="POST" name="myform" class="addform" div id="container" enctype="multipart/form-data">
<fieldset>
    <legend>Number Details</legend><br>
    <div class="fieldwrapper">
    <div class="thefield">   
    <input type="text" class="hint" id="name1" onkeypress='validate1(event)' value="<?php echo $namearray[0];?>" onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }" onblur="if (this.value == '') { this.className = 'hint'; this.value = '<?php echo $namearray[0];?>';}" size="25" name="name1" maxlength="30"/>   <input type="text" onkeypress='validate(event)' class="hint" id="number1" value="<?php echo $numberarray[0];?>"  onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }" onblur="if (this.value == '') { this.className = 'hint'; this.value = '<?php echo $numberarray[0];?>';}" size="20" name="number1" maxlength="10"/> <img src="img/clear.png" width="24" height="24"></a> </div>
 </div>
 </fieldset>
 <p align="center">
 <div class="buttonsdiv">
 <p align="center">
 <input type="submit" value="Submit"  name="submit" id="submit" class="button1" />
 </div>

 </form>

When I click on the red cross button for a particular row, I would like get to name and number textbox to have value Name and Number.

I tried to submit button button but then it is clashing with the FORM. Reset doesn't work too.

How do I achieve this?

Upvotes: 0

Views: 151

Answers (3)

WP_
WP_

Reputation: 361

Here is a proof of concept, even though it's rather ugly and bloated, it gets the job done. There are prettier ways to solve this, but this one should be easy to understand:

Example: http://codepen.io/anon/pen/JKtmh

<input type="text" id="1a" value="Name"/><input type="text" id="1b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('1a').value!='Name') || (document.getElementById('1b').value!='Number')) {((document.getElementById('1a').value='Name') && (document.getElementById('1b').value='Number'))};"/><br/>
<input type="text" id="2a" value="Name"/><input type="text" id="2b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('2a').value!='Name') || (document.getElementById('2b').value!='Number')) {((document.getElementById('2a').value='Name') && (document.getElementById('2b').value='Number'))};"/><br/>
<input type="text" id="3a" value="Name"/><input type="text" id="3b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('3a').value!='Name') || (document.getElementById('3b').value!='Number')) {((document.getElementById('3a').value='Name') && (document.getElementById('3b').value='Number'))};"/><br/>
<input type="text" id="4a" value="Name"/><input type="text" id="4b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('4a').value!='Name') || (document.getElementById('4b').value!='Number')) {((document.getElementById('4a').value='Name') && (document.getElementById('4b').value='Number'))};"/><br/>
<input type="text" id="5a" value="Name"/><input type="text" id="5b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('5a').value!='Name') || (document.getElementById('5b').value!='Number')) {((document.getElementById('5a').value='Name') && (document.getElementById('5b').value='Number'))};"/><br/>
<input type="text" id="6a" value="Name"/><input type="text" id="6b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('6a').value!='Name') || (document.getElementById('6b').value!='Number')) {((document.getElementById('6a').value='Name') && (document.getElementById('6b').value='Number'))};"/><br/>
<input type="text" id="7a" value="Name"/><input type="text" id="7b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('7a').value!='Name') || (document.getElementById('7b').value!='Number')) {((document.getElementById('7a').value='Name') && (document.getElementById('7b').value='Number'))};"/><br/>
<input type="text" id="8a" value="Name"/><input type="text" id="8b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('8a').value!='Name') || (document.getElementById('8b').value!='Number')) {((document.getElementById('8a').value='Name') && (document.getElementById('8b').value='Number'))};"/><br/>
<input type="text" id="9a" value="Name"/><input type="text" id="9b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('9a').value!='Name') || (document.getElementById('9b').value!='Number')) {((document.getElementById('9a').value='Name') && (document.getElementById('9b').value='Number'))};"/><br/>
<input type="text" id="10a" value="Name"/><input type="text" id="10b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('10a').value!='Name') || (document.getElementById('10b').value!='Number')) {((document.getElementById('10a').value='Name') && (document.getElementById('10b').value='Number'))};"/>

PS: You should use an ID that doesn't start with a number. HTML validators may not like it.

Upvotes: 1

icke
icke

Reputation: 1578

It's hard to tell without the actual HTML, but assuming your code looks something like this:

<div>
    <input type="text"><input type="text"><button>X</button>
</div>

You'll probably want to add a listener <button onclick="clearRow(this)"> and a JS function to clear the input fields:

function clearRow(button) {
    var inputs = button.parentNode.getElementsByTagName('INPUT');
    inputs[0].value = 'Name';
    inputs[1].value = 'Number';
}

Edit: You added your HTML code. Just attach the listener to your <img> tag.

Edit2: I can't seem to find the beginning of that <a> tag in that one long line. You may have to adapt the first line of clearRow to account for further nesting of the "X button".

Upvotes: 2

webNeat
webNeat

Reputation: 2828

Assumin that your HTML is something like that :

<form>
    <div class="row">
        <input type="text" name="name-1" class="nameInput">   
        <input type="text" name="number-1" class="numberInput">   
        <button class="cross"> X </button>   
    </div>
    <div class="row">
        <input type="text" name="name-1" class="nameInput">   
        <input type="text" name="number-1" class="numberInput">   
        <button class="cross"> X </button>   
    </div>
</form>

If you want to use jQuery; this will do the job :

$(document).ready(function(){
    $('button.cross').click(function(){
        var $parent = $(this).parent('dv');
        $parent.find('input.nameInput').val('Name');
        $parent.find('input.numberInput').val('Number');
    })
});

Upvotes: -1

Related Questions