Home » Php » javascript – What can override the attributes in an html input?

javascript – What can override the attributes in an html input?

Posted by: admin July 12, 2020 Leave a comment

Questions:

I am outputing the values I want into an html input with PHP. But for some reason it is not recognizing the min and step attributes. How can html attributes be overridden?

EDIT – I am customizing Anspress for WordPress. Here is a link to look through the files for the plugin.

Any thoughts??

HTML that structures the output (ap_ask_form() is in the PHP code below)

<div id="ap-form-main" class="active ap-tab-item">
    <?php ap_ask_form(); ?>
</div>

ask_form.php

class AnsPress_Ask_Form
{
    public function __construct()
    {
        add_filter('ap_ask_form_fields', array($this, 'ask_form_name_field'));
    }

    public function ask_form_name_field($args){
        if(!is_user_logged_in() && ap_opt('allow_anonymous'))
            $args['fields'][] = array(
                'name' => 'name',
                'label' => __('Name', 'ap'),
                'type'  => 'text',
                'placeholder'  => __('Enter your name to display', 'ap'),
                'value' => sanitize_text_field(@$_POST['name'] ),
                'order' => 12
            );

        return $args;
    }
}

new AnsPress_Ask_Form;

/**
 * Generate ask form
 * @param  boolean $editing
 * @return void
 */
function ap_ask_form($editing = false){
    global $editing_post;

    $is_private = false;
    if($editing){
        $is_private = $editing_post->post_status == 'private_post' ? true : false;
    }

    $args = array(
        'name'              => 'ask_form',
        'is_ajaxified'      => true,
        'submit_button'     => ($editing ? __('Update question', 'ap') : __('Post question', 'ap')),
        'fields'            => array(
            array(
                'name' => 'title',
                'label' => __('Title', 'ap'),
                'type'  => 'text',
                'placeholder'  => __('Question in one sentence', 'ap'),
                'desc'  => __('Write a meaningful title for the question.', 'ap'),
                'value' => ( $editing ? $editing_post->post_title : sanitize_text_field( @$_POST['title'] ) ),
                'order' => 5,
                'attr' => 'data-action="suggest_similar_questions"',
                'autocomplete' => false,
            ),
            array(
                'name' => 'title',
                'type'  => 'custom',
                'order' => 5,
                'html' => '<div id="similar_suggestions"></div>'
            ),
            array(
                'name' => 'description',
                'label' => __('Description', 'ap'),
                'type'  => 'editor',
                'desc'  => __('Write description for the question.', 'ap'),
                'value' => ( $editing ? apply_filters('the_content', $editing_post->post_content) : @$_POST['description']  ),
                'settings' => apply_filters( 'ap_ask_form_editor_settings', array(
                    'textarea_rows'     => 8,
                    'tinymce'           => ap_opt('question_text_editor') ? false : true,
                    'quicktags'         => ap_opt('question_text_editor') ? true : false ,
                    'media_buttons'     =>false,
                )),
            ),
            array(
                'name'  => 'ap_upload',
                'type'  => 'custom',
                'html' => ap_post_upload_form(),
                'order' => 10
            ),
            array(
                'name' => 'parent_id',
                'type'  => 'hidden',
                'value' => ( $editing ? $editing_post->post_parent : get_query_var('parent')  ),
                'order' => 20
            )
        ),
    );

    if(ap_opt('allow_private_posts'))
        $args['fields'][] = array(
            'name' => 'is_private',
            'type'  => 'checkbox',
            'desc'  => __('Only visible to admin and moderator.', 'ap'),
            'value' => $is_private,
            'order' => 12,
            'show_desc_tip' => false
        );

    if(ap_opt('recaptcha_site_key') == '')
        $reCaptcha_html = '<div class="ap-notice red">'.__('reCaptach keys missing, please add keys', 'ap').'</div>';
    else
        $reCaptcha_html = '<div class="g-recaptcha" id="recaptcha" data-sitekey="'.ap_opt('recaptcha_site_key').'"></div><script type="text/javascript"
src="https://www.google.com/recaptcha/api.js?hl='.get_locale().'&onload=onloadCallback&render=explicit"  async defer></script><script type="text/javascript">var onloadCallback = function() {
        widgetId1 = grecaptcha.render("recaptcha", {
          "sitekey" : "'.ap_opt('recaptcha_site_key').'"
        });
      };</script>';

    if(ap_opt('enable_recaptcha'))
        $args['fields'][] = array(
            'name' => 'captcha',
            'type'  => 'custom',
            'order' => 100,
            'html' => $reCaptcha_html
        );

    /**
     * FILTER: ap_ask_form_fields
     * Filter for modifying $args
     * @var array
     * @since  2.0
     */
    $args = apply_filters( 'ap_ask_form_fields', $args, $editing );

    if($editing){
        $args['fields'][] = array(
            'name'  => 'edit_post_id',
            'type'  => 'hidden',
            'value' => $editing_post->ID,
            'order' => 20
        );
    }

    $form = new AnsPress_Form($args);

    echo $form->get_form();
    echo ap_post_upload_hidden_form();
}

/**
 * Generate edit question form, this is a wrapper of ap_ask_form()
 * @return void
 * @since 2.0.1
 */
function ap_edit_question_form()
{
    ap_ask_form(true);
}

My extension to this plugin using the WordPress hook “plugins_loaded” (the ask_form_amount_field($args, $editing) below is part of a class I made; if someone would like me to post it I can, just trying to show all the relevant info without making it too lengthy…)

public function ask_form_amount_field($args, $editing){
        if(wp_count_terms('question_amount_field') == 0)
            return $args; //Taxonomy stuff?

        global $editing_post;

        if($editing){
            $amount_field = get_the_terms( $editing_post->ID, 'question_amount_field' );
            $amount_field = $amount_field[0]->term_id;
        } //More things purely related to taxonomy, it seems.

        $args['fields'][] = array(
            'name' => 'amount_field',
            'label' => __('Amount field label', 'amount_field_for_anspress'),
            'type'  => 'number',
            'value' => ( $editing ? $amount_field :  sanitize_text_field(@$_POST['amount_field'] )), 
            'taxonomy' => 'question_amount_field',
            'orderby' => ap_opt('form_amount_field_orderby'),
            'desc' => __('Enter the amount you wish to tip someone for fulfilling your request.', 'amount_for_anspress'),
            'order' => 7,
            'min' => 0.50,
            'step' => 0.25
        );

        return $args;

    }

}}//The class ends here; its beginning is not shown above

function find_do_for_anspress() {
    $discounts = new Find_Do_For_AnsPress();
}
add_action( 'plugins_loaded', 'find_do_for_anspress' );
How to&Answers:

Here’s a shorter javascript solution with jQuery, please note that you may need to change $ to jQuery because of how WordPress implements jQuery

//set values
minValue = 100;
stepValue = 100;

//select element by ID, update min attribute
$("#my-element-id").attr("min", minValue);

//select element by ID, update step attribute
$("#my-element-id").attr("step", minValue);

Here’s the documentation on jQuery attr() for more information, it can be used to get and/or set attributes:
https://api.jquery.com/attr/

Answer:

Ok, you said a JavaScript soultion would work, so here’s how to overwrite the attribute in JS. You will need to give your item an id attribute using this method. we’ll assume your element has an id="myelement" attribute as well to identify it.

Here’s the jsFiddle example with comments explaining the code.

var myelement = document.getElementById('myelement');
myelement.removeAttribute("min");
myelement.removeAttribute("step");
var min = document.createAttribute('min');
var step = document.createAttribute('step');
min.value = '100'; //put your new values here
step.value = '100'; //put your new values here
myelement.setAttributeNode(min);
myelement.setAttributeNode(step);
alert(myInput.getAttribute('custom-attr'));