so i have 2 buttons
<button type="submit" name="print">print</button>
<button type="submit" name="search">search</button>
beside the button search there is a textbox
<input type="text" name="txtSearch" autofocus>
now what i want to do is whenever I press enter i'd like to submit using the button search. but what happens is the button print is always getting submitted because it is on top of button search. I cant put button search on top of print because of the design. Is it possible to do it in php? or do I need javascript? i'm just starting to program and trying to learn more. thank you very much for the help!
You can't do that with php , you should use javascript or jquery .
add an id for your search input like this :
<button id='search' type="submit" name="search">search</button>
then you can use this code in jquery :
$('#search').keydown(function(e) {
var key = e.which;
if (key == 13) {
$('#your-form').submit();
}
});
You can...
Separate into two forms:
<form>
<button type="submit" name="print">print</button>
</form>
<form>
<button type="submit" name="search">search</button>
<input type="text" name="txtSearch" autofocus>
</form>
Or change the print button to:
Print or
<button type="button">print</button>
Or you could put your search button first, and use float or some kind of position:absolute and margin-top CSS.
Or use JavaScript, as Parsa suggests.
Related
I tried to search when press enter, here I use livesearch.js for searching but this js always search when typing. I want it search when press enter. So iI tried change but still not working.
Framework js
<script type="text/javascript" src="framework/liveSearch/livesearch.js"></script>
HTML
<input type="text" id="livesearch" class="livesearch" style="margin-top:0;"/>
<div class="searchresult" id="liveRequestResults"></div>
<iframe id="mainResult" src='log-list.php'></iframe>
Javascript
<script>
$('#livesearch').keydown(function(e) {
if(e.keyCode == 13) // I tried this code, first enter worked, after that back to search when typing
{
liveReqInit('livesearch','liveRequestResults','log-ls.php','','mainResult'); //this search work when typing
}
})
</script>
From what I understood, you want a normal search box. This is going go submit the value to your backend(which I assume is log-ls.php).
<form action="log-ls.php">
<input type="search" placeholder="Search..." name="search">
<button type="submit" value="Submit">Submit</button>
</form>
I am using this plugin to submit form with file upload.
Usually my forms are posted (without using this plugint) using:
<button id="send">Send</button>
and using js like this:
$('#send').click(function(){
ajaxSubmit();
});
This plugin is looking for the usual
<input type="submit" value="Send">
to send the form so that I can keep my buttons instead of the default buttons. My point is to update my click function to trigger form submitting via this plugin.
The plugin is initialized via:
$("#myForm").ajaxForm(options);
Any help?
My actual workaround is to style input buttons like my standard buttons but I'd prefer to keep all my code the same way (always using buttons to submit forms instead of inputs)
If you check the documentation, there are multiple ways of submitting the form with that plugin:
<input type="submit" name="submitButton" value="Submit1">
<input type="image" name="submitButton" value="Submit2" src="submit.gif">
<button type="submit" name="submitButton" value="Submit5"><span>submit 5</span></button>
You could use the last one. For that, just add type="submit" to your button, and it should be enough:
<button id="send" type="submit">Send</button>
Without seeing more code, the one thing I can say is that your javascript references an object with an ID of "send" but your input has no ID.
Try <input type="submit" id="send" value="Send"/>.
Lets say I have this: http://jsfiddle.net/oh0omatq/2/
<form>
<input placeholder="my value">Country
<button name="subject" type="submit" value="england">England</button>
<button name="subject" type="submit" value="wales">Wales</button>
<br />Your country is: Wales
<input type="submit">
</form>
Can I use this submit buttons for england and wales to set a value within the form, and reload the form, but also not loose the information already entered in the form, such as in the input box.
This above is just a preview, but I want to be able to reload and filter the input elements in the form depending on the button the user clicked, but also not loose any previously entered data in the fields.
I would recommend using javascript for this. I've edited your fiddle to use an onclick function.
<form>
<input placeholder="my value">
Country
<button name="subject" value="england" type="button" onclick="document.getElementById('value').innerHTML = this.value">England</button>
<button name="subject" value="wales" type="button" onclick="document.getElementById('value').innerHTML = this.value">Wales</button><br />
Your country is: <span id="value">Wales</span>
<input type="submit">
</form>
Changing the buttons to a type="button" so they don't submit the form allows the javascript to edit the value. Ofcourse you can make an input out of the span, allowing the chosen value to be sent with the form. Ofcourse, a select box would work as well then.
Would that do what you want?
You can see the edited fiddle here.
Keep in mind, this is a quick sketch. It is not recommended to use javascript inline.
I have a JSP page with multiple form elements (textbox,drpdown menu,textarea etc), I want to clear them on click of a button, i have written the below JavaScript code:
function clearForm(frm){
alert("in clear form");
$("textarea").val("");
document.getElementById("City").selectedIndex = 0;
document.getElementById('STREET_NAME').value="";
return false;
}
JSP code:
<form action="<%=request.getContextPath()%>/insertData.htm" id="myForm">
//here i have form elemetns like textbox, dropdown meny,text area etc.
<button name="clearButton" id="clearButton" onclick="return clearForm(this.form);">CLEAR</button>
<button name="buttonName" type="submit" id="submitButton" value="submit">SAVE</button>
</form>
When I click on CLEAR button, its going to JavaScript clearForm(frm) function ,clear the fields, then the form is getting submitted and the control is going to the controller class(Spring controller).Where I am going wrong, the form should not get submitted.
--EDITED--
When I use the below code , only textarea field is getting cleared.
function clearForm(frm){
$("textarea").val("");
document.getElementById("City").selectedIndex = 0;
document.getElementById('STREET_NAME').value="";
return false;
}
<button type="button" style="font-size:9px; height:20px;text-transform:uppercase;" name="clearButton" id="clearButton" onclick="return clearForm()">CLEAR</button>
Please find the same in jsfiddle
According to the MDN, without specifying a type attribute, a <button> element defaults to type="submit".
Add type="reset" to your button, and you won't need any JavaScript to clear out the form.
<button type="reset" name="clearButton" id="clearButton">CLEAR</button>
Otherwise, add type="button"…
<button type="button" name="clearButton" id="clearButton" onclick="return false;">CLEAR</button>
DEMO: http://jsfiddle.net/7TBW2/2/
EDIT:
As per OP's comments as to why his jsFiddle is not working.
OP's HTML:
<input type="text" name="relName" value="REL100" required="true" />
<textarea name="NOTES" cols="50" rows="4" />aklsdjj</textarea>
OP's JavaScript:
document.getElementById('relName').value = "";
$("textarea").val("");
You have lots of errors and inconsistencies:
1) document.getElementById('relName') is looking for the id attribute, but you don't have an id on this input, only a name attribute.
Add an id:
<input type="text" name="relName" id="relName" value="REL100" required="true" />
2) $("textarea") is a jQuery selector but you don't have any jQuery library included in your jsFiddle. Not sure why you would be mixing jQuery selectors with getElementById() in the first place, so I assume you're not really using jQuery for anything.
Use jQuery or don't, just be consistent:
document.getElementById("NOTES").value = "";
3) Your HTML is invalid on the textarea. You do not need a "self-closing" slash inside the opening tag since textarea is a container element.
It should be:
<textarea name="NOTES" id="NOTES" cols="50" rows="4">aklsdjj</textarea>
FIXED: http://jsfiddle.net/z9uGv/2/
I have 3 buttons in my form.
All the button actions goes to a same page after clicking it depending upon what button is clicked.
My query is: The name of the buttons are 'add','edit' and 'remove'
When the 'add' button is clicked, using js I need to get the value of that button and similarly for the other two buttons....
Can you please help?
<form>
<script type="text/javascript">
function doAction(value)
{
// Don't really have anything to set...just show the value
alert(value);
}
</script>
<input type="button" value="Add" onclick="doAction(this.value)">
<input type="button" value="Edit" onclick="doAction(this.value)">
<input type="button" value="Remove" onclick="doAction(this.value)">
</form>
There are other ways that involve not even passing the button's value, but they're not as compatible across browsers (IE uses a slightly different event model).
Of course, if you can get by without doing it in Javascript, and can just pass the clicked button to the server, it gets even easier than that...
<form>
<input type="submit" name="action" value="Add">
<input type="submit" name="action" value="Edit">
<input type="submit" name="action" value="Remove">
</form>
and whichever button you click gets put into the url as action=Add or whatever.
What about:
var buttonValue = document.getElementById('IdOfYourButton').value
have you tried: document.getElementById('button_id').value in the js function that you'll call when the button is clicked?
There is target property which you can use.It targets the element which caused the event to occur.
button.addEventListener('click',function(e){
console.log(e.target.value);
});