I want to change a hidden inputs value when I push on a button. Here's what I'm doing.
My hidden input
<input type="hidden" value="action" id="action" />
My buttons
<INPUT name=submit value=~#SUBMIT~ type="button" id="btnSubmit" class="submitDatum">
<INPUT name=delete value=~#DELETE~ type="button" id="btnDelete" class="submitDatum">
My javascript
$("#btnSubmit").click(function() {
$('#action').val('submit');
});
$("#btnDelete").click(function() {
$('#action').val('delete');
});
Could anybody help?
kind regards
<INPUT name=submit onclick="change_value('btnSubmit','submit')" value=~#SUBMIT~ type="button" id="btnSubmit" class="submitDatum">
<INPUT name=delete onclick="change_value('btnDelete','delete')" value=~#DELETE~ type="button" id="btnDelete" class="submitDatum">
function change_value(htmlid,value_change) {
$('#'+htmlid).val(value_change);
}
try this
Related
I have tabs with forms in each of them and on click of reset button, it resets form fields of that form only.
//Reset respective forms
$('#thresholds .reset').on('click', function() {
$('#thresholds').trigger("reset");
});
$('#attributes .reset').on('click', function() {
$('#attributes').trigger("reset");
});
$('#rules .reset').on('click', function() {
$('#rules').trigger("reset");
});
$('#events .reset').on('click', function() {
$('#events').trigger("reset");
});
#thresholds, #attributes, #rules, #events are the form IDs.
How can I optimise this for code repetition?
You can identify all reset click with .reset class and then select closest from of this button and apply reset trigger.
Please find below mentioned code. This will help you.
$('.reset').on('click',function(e){
e.preventDefault();
$(this).closest('form').trigger('reset');
});
Check working example below.
$('.reset').on('click',function(e){
e.preventDefault();
$(this).closest('form').trigger('reset');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="thresholds">
<input type="text" />
<input type="button" class='reset' value="Reset" />
</form>
<form id="attributes">
<input type="text" />
<input type="button" class='reset' value="Reset" />
</form>
<form id="rules">
<input type="text" />
<input type="button" class='reset' value="Reset" />
</form>
<form id="events">
<input type="text" />
<input type="button" class='reset' value="Reset" />
</form>
Let me know if it not works.
You can merge them like this:
$('#thresholds .reset, #attributes .reset, #rules .reset, #events .reset').on('click', function() {
$(this).parents('form:first').trigger("reset");
});
i am trying to create a form which needs to be filled with 9 numeric digits. I would like the submit button to be disabled untill the form is filled exactly with 9 digits. I have found many scripts with button disabled untill form is filled but not with specific length. Could you please help me?
<form name="form1">
<input type="text" name='text1' maxlength="9" class="phone-input">
<input type="button" value="submit" onclick="phonenumber(document.form1.text1); changeDiv();"/>
</form>
Thank You!
You can try to use a pattern. Didn't try it, but it must be something like this:
<input pattern=".{9}">
As suggested by Markus, you can use the pattern attribute to validate the input (specify \d to allow only digits), in addition to required. The validity.valid property of the text field can then be used to enable/disable the button in the input event handler:
<form name="form1">
<input id="txtPhone" type="text" name='text1' pattern="\d{9}" required maxlength="9" class="phone-input" >
<input id="btnSubmit" type="button" value="submit" disabled="disabled" />
</form>
<script>
document.getElementById("txtPhone").addEventListener("input", function () {
document.getElementById("btnSubmit").disabled = !this.validity.valid;
});
</script>
document.getElementById("txtPhone").addEventListener("input", function () {
document.getElementById("btnSubmit").disabled = !this.validity.valid;
});
<form name="form1">
<input id="txtPhone" type="text" name='text1' pattern="\d{9}" required maxlength="9" class="phone-input" >
<input id="btnSubmit" type="button" value="submit" onclick="alert('Submit!');" disabled="disabled" />
</form>
I have a php application that I'm working on. Here's what I'm trying to do:
I have a search box (textbox) and several buttons. On clicking each button, I want it to fill the search box with a predefined string. Clicking another button will erase what's in the search box and replace its value with its pre-defined string. And a button to clear the textbox as well.
Example:
Button 1
on click -> textbox value = button1
Button 2
on click -> textbox value = button2 (old value is replaced)
Can anyone guide me with the JS code that does this? Thanks!
Apply 'button' class to every button and unique id for each button.
$(".button").click(function(){
var id = this.id;
$('#searchTextId').val($('#'+id).attr('value'));
});
$(document).ready(function(){
$(document).on('click','.click_me',function(e){
e.preventDefault();
var search_val = $(this).attr('data-value');
$('.text_search').val(search_val);
});
$(document).on('click','.clear_me',function(e){
$('.text_search').val('');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="click_me" data-value="text 1" value="button 1"/>
<input type="button" class="click_me" data-value="text 2" value="button 2"/>
<input type="button" class="click_me" data-value="text 3" value="button 3"/>
<input type="button" class="click_me" data-value="text 4" value="button 4"/>
<input type="button" class="clear_me" value="Clear"/>
<input type="text" class="text_search" />
<script>
function setText(obj) {
var val = obj.value;
document.getElementById('textBox').value = val;
}
</script>
<input type="button" name="btn1" id="btn1" value="Hello" onclick="setText(this)">
<input type="button" name="btn1" id="btn1" value="World" onclick="setText(this)">
<input type="button" name="btn1" id="btn1" value="StackOverflow" onclick="setText(this)">
<input type="text" name="textBox" id="textBox" value=""/>
Tested here: http://jsfiddle.net/o5fp0uq1/
I use jQuery and ajax.
In the first. it is my html.
<form id="frm" name='frm' action="." method="post">
<div style="position: absolute; top:270px;">
<div id='mybuttons'>
<input type="submit" class="buttonbig3" name="btn1" value="1" /><br />
<input type="submit" class="buttonbig3" name="btn2" value="2" /><br />
</div>
<input id="hidden-qid" type="hidden" name="set" value="hoge" />
</div>
</form>
And, I create submit function like below in JS.
$('#frm').submit(function() {
var serialized_date = $('form#frm').serialize();
console.log(serialized_date);
However, the "console.log" logged "set" paramater.
but, btn1 or btn2 can't show the log.
I guess it is child of the mybuttons div tag.
I don't want to remove the tag. because, I create dynamically the html by javascript.
$('#mybuttons').innerHTML = "<input type="\submit\" class="\buttonbig3\" name=\"btn1\" value=\"1\" /><br />";
Could you tell me how to serialize child tag.
I hope will be helpful , just find the button that does submit and added to the serialized
$('#frm').submit(function() {
var serialized_date = $('form#frm').serialize();
var btn = $(document.activeElement);
serialized_date += "&" + btn.attr("name") + "=" + btn.val();
console.log(serialized_date);
});
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frm" name='frm' action="." method="post">
<div id='mybuttons'>
<input type="submit" class="buttonbig3" name="btn1" value="1" /><br />
<input type="submit" class="buttonbig3" name="btn2" value="2" /><br />
</div>
<input id="hidden-qid" type="hidden" name="set" value="hoge" />
</form>
Serialize don't add submit button values to the data as submit buttons should be used only to submit the form, not to send specific data. You have to change the type="submit" to something else if there is specific data you want to get out of it.
serialize() docs
The .serialize() method creates a text string in standard URL-encoded
notation. It can act on a jQuery object that has selected individual
form controls, such as , , and : $( "input,
textarea, select" ).serialize();
Buttons can't be serialized. Only the elements with user inputs can be serialized like textbox, radio button, etc
If you place an input box inside the div, you will find it in your console.log.
<div id='mybuttons'>
<input type="submit" class="buttonbig3" name="btn1" value="1" /><br />
<input type="submit" class="buttonbig3" name="btn2" value="2" /><br />
<input id="hidden-qid" type="hidden" name="rias" value="hoge" />
</div>
Now if you try submitting the form, you will get that input text inside the div element. So it's not about child elements here.
I don't want to pass the value to the function, I want it to find the value itself.
<script type="text/javascript">
function add(buttonNum)
{
var elements = document.getElementsByTagName("button");
alert(document.myform.elements[buttonNum].value);
}
</script>
<form name="myform">
<input type="button" value="q" onclick="add(0)"/>
<input type="button" value="w" onclick="add(1)"/>
<input type="button" value="e" onclick="add(2)"/>
<input type="button" value="r" onclick="add(3)"/>
<input type="button" value="t" onclick="add(4)"/>
<input type="button" value="y" onclick="add(5)"/>
</form>
If I wanted to click on a button and display the value of the button into lets say a div; I don't want to code every button with an onclick(passing a parameter).
What approaches do I need to take? Something tells me that I need to get the length, run a for loop, and attach a handler. I'm just not sure on where to start.
simply pass this as parameter so that you can access all the attributes of the element but here only value:
<script type="text/javascript">
function add(elem)
{
alert(elem.value);
}
</script>
<form name="myform">
<input type="button" value="q" onclick="add(this)"/>
<input type="button" value="w" onclick="add(this)"/>
<input type="button" value="e" onclick="add(this)"/>
<input type="button" value="r" onclick="add(this)"/>
<input type="button" value="t" onclick="add(this)"/>
<input type="button" value="y" onclick="add(this)"/>
</form>
Compare:
getElementsByTagName("button");
<input>
You are getting the wrong element type.
If I wanted to click on a button and display the value of the button into lets say a div; I don't want to code every button with an onclick(passing a parameter).
Use addEventListener. You can identify the element clicked with event.target
e.g.
addEventListener('click', function (evt) {
if (evt.target.type == "button") {
alert(evt.target.value);
}
});