Reputation: 5954
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:
:
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
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
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
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