Form Control by URL Query - javascript

I have a question about button control and form control. So, I wanted to show data inside field of the form according to the button clicked.
For example:
Button 1 clicked -> show the text field inside the form with text like "you clicked button 1".
Button 2 clicked -> show the text field inside the form with text like "you clicked button 2".
Maybe someone here can give an example.
Thank you.

Just Use jquery and capture the all button click event and get the name of clicked button and set the value to msg text filed like this .
$('button').click(function()
{
$('#msg').val("you clicked " +$(this).attr('name'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" >
msg : <input type="text" name="msg" id="msg" >
<button name="button1" id="button1" >button1</button>
<button name="button2" id="button2" >button2</button>
<span id="msg"> </span>
</form>

Related

automatically trigger one of the submit buttons in the form

I have a form as follows:
<form name="dummyform" id="dummyform">
<input type="text" name="dummyname">
<input type="submit" name="save_as_draft" id`="save_as_draft">
<input type="submit" name="send" id="send" hidden>
<button name="Dummysend" id="Dummysend">SEND DUMMY</button>
</form>
I want to trigger only the button with id send automatically when I click on the button with id Dummysend. I can do this by doing this JavaScript code:
document.getElementById("dummyform").submit();
The problem is that there are two submit buttons in this form. How can I only trigger the submit button with id send?
By input name, ID, context...
For example:
document.getElementById("send").click();
Watch out for your HTML too it has some syntax errors:
The 'action' attribute is required for elements.
'id`' is not a valid attribute of the element.

Change text on a button type when clicked

I can't change the text of a button when the button type is button, but I can change it if the type is input
The code for the button is
<button type='button'
id='1'
name='4'
class='btn btn-select'>Text I want to change</button>
In the handler I am trying to change it like so:
document.getElementById("1").value="New Button Text";
If I change it input type it works? Why?
TRY:
document.getElementById("1").innerText="New Button Text";
you are use the button as a tag not as input field
The label for a <input type="button"> is determined by the value attribute. An <input type="submit"> gets its label and submitted data from the value attribute (they can't be different).
The label for a <button> element is determined by its text content. The value attribute determines what data it will submit to the server (if it were a submit button) when clicked. They can be different.
document.getElementById("1").textContent = "New Button Text";
<button type='button' id='1' name='4' class='btn btn-select'>Text I want to change</button>

How to make HTML form execute the latest action on enter?

I have HTML form with <input> field and 2 buttons
to visit 2 different sites:
<form>
<input
type="search"
name="q"
>
<button
type="submit"
formaction="https://www.example1.com/"
>
Action 1!
</button>
<button
type="submit"
formaction="https://www.example2.com"
>
Action 2!
</button>
</form>
When I type something in the text field and click the Enter key, the form always picks the first button's action.
How can I make the form remember and execute the latest action instead?
So if I click on the Action 2! button, then clicking the Enter key will always delegate to that action, until I click on the other Action 1! button that would change the default to that action.

Generating and deleting a dynamic textbox using jquery/javascript

Currently the below piece of code gives me a textbox and an "add" button. While clicking on add button, a new textbox gets generated below the first textbox. clicking on "add" again adds another textbox and so on. But currently the new textbox does not have "add" button. i want an "add" button to each textbox as well. I also want a delete button for each textbox and clicking on it will delete that particular textbox in that row. Also, i want a validation that more than 10 textboxes will not be allowed on the click of "add" button.
Could aNY of you please help !! Coding in both jquery and javascript would be appreciable.
HTML CODE :
<div id="inputs">
Name : <input type='text' name='name'>
<button onclick="getinput()">Add</button>
</div>
Javascript code :
function getinput()
{
var name="<br> <input type='text' name='name'>";
$("#inputs").append(name);
}
you could do something like this : http://jsfiddle.net/yq670z0d/1/
<div id="inputs">
<div class="input">
Name : <input type='text' name='name'/>
<button class="addbox">Add</button>
</div>
</div>
$("#inputs").on('click','.addbox',function(){
if($('.input').length < 10){
$(this).parent().clone().appendTo('#inputs');
}
});
Only jQuery, but quite short. the idea is to copy the div with your input and button, and then add it to your div inputs.
for your delete button, you just have to add a button with a delete class, and in another click listener, call the jQuery function remove() for the specified div. for instance :
<div id="inputs">
<div class="input">
Name : <input type='text' name='name'/>
<button class="removebox">Remove</button>
</div>
</div>
$("#inputs").on('click','.deletebox',function(){
$(this).parent().remove();
});

How to show different textbox depending on which radio button is clicked?

I am working with JSP and I have a html form in which I have a button at the top which is Process button. Now if I click on that Process button, it shows me a form which has two radio button - TestClient and TestServer.
It also has Submit button in that form.
Here is my jsfiddle
Problem Statement:-
Now what I am trying to do is - As soon as I click on TestClient radio button, I would like to show two text box and one radio button along with label just below that TestClient and TestServer like this -
TestClient TestServer
Name textbox
Id textbox
Sex Male Female
Submit button
In the same way if I am clicking TestServer button - I would like to show three text box and one drop down menu just below the TestClient and TestServer
TestClient TestServer
Address textbox
ClientId textbox
ServerId textbox
Country dropdownbox
Submit button
Is this possible to do using jquery in my current jsfiddle example? If yes, then any jsfiddle example will be of great help to me.
Very do-able. I've just added a quick example with a div for each radio button and some text in them. You can add your own inputs etc.
Hide these divs with CSS by default.
<div class="client" style="display: none">
Client fields here
</div>
<div class="server" style="display: none">
Server fields here
</div>
Then you can do something like this with your jQuery handler:
$('input[name="client"]').click(function() {
if($(this).attr('id') == 'client') {
$('.client').show();
$('.server').hide();
} else {
$('.client').hide();
$('.server').show();
}
});
if you do not want to code the html and show/hide it, but you prefere to generate it with jquery, you can also use this solution:
http://jsfiddle.net/fauv9/1/
<button id="primary">Process</button>
<form method='post'>
<h4>Process</h4>
<fieldset><legend>process</legend>
<input id="client" value="TestClient"type="radio" name="cli_srv">
<label for="client">TestClient</label>
<input id="server" value="TestServer" type="radio" name="cli_srv">
<label for="server">TestServer</label>
</fieldset>
<fieldset id="form_process">
</fieldset>
</form>
<button form="form_process">Submit</button>
and
$("#primary").click(function(){
$("form").show()
});
var form= $('#form_process');
$("#client").click(function(){
form.html(null);
form.append('<label for="cli_name">name</label><input value="name" id="cli_name"><br>')
form.append('<label for="cli_id">id</label><input value="id" id="cli_id"><br>')
// etc...
})
$("#server").click(function(){
form.html(null);
form.append('<label for="cli_name">address</label><input value="address" id="address"><br>')
form.append('<label for="srv_id">id</label><input value=" server id" id="srv_id"><br>')
// etc...
})

Categories

Resources